Signed in as:
Sign out
Links
Creating Websites home
Beginnings
Introduction to the Web
Introducing HTML
Marking up text
Setting Up
FTP and FileZilla
Links and anchors
Getting some style
Intermediate topics
Style sheets
Testing and debugging
Lists
Images and maps
Audio and video
Intro to JavaScript
The DOM and scripting
Logic and Arrays
Functions and document.write
Forms and INPUT
Other controls
Cookies
HTML tables
Structuring tables
Scripting w/ tables
Inline frames
Loose ends
Support
In this lesson, we see how to define tables in HTML, and we provide four examples of HTML and CSS code. Topics include:
Note: I strongly suggest you view all our videos in full screen mode: click the icon in the lower right corner of the video area (it shows four arrows pointing to the corners of the screen). When you are done, the Esc ("escape") key returns you to regular mode.
Lesson 20: Introduction to HTML Tables
Hands on exercise
This exercise is primarily focused on adding style to support a table
as well as extending an existing table to have an additional column.
We also request a header row to create a header for each column.
In your MyWebFiles directory is a file named 'tables.html'. This contains much of the content we used in our sample table about meeting spaces, except it has twice as many rows and doesn't have any style element.
First, add a <style> element in your <head> element, containing
the 'pic' class as in the lecture:
.pic {width: 150px; height: 120px;}
and then add 'class=pic' into the start tag of all the second <td> elements
in each row.
Next, add a new column of "standard seating configuration" for each space as follows:
| Space name | Configuration |
|---|---|
| Conference Room A | Single round table |
| Conference Room Be | Single oval table |
| Conference Room See | Single oval table |
| Daffy-teria | Mulitple small tables |
| Office Pool | Standing room only |
| Executive Meeting Room | Single oval table |
| Play Room | Standing room only |
| Garden Office | Single square table |
| Garbage Bay | Standing room only |
| Computer Room | Single oval table |
| Music Room | Chairs in rows, no tables |
| Exercise Room | Standing room only |
| Subterranean Garage | Standing room only |
| Mail Room | Single square table |
| Waiting Room | Back to back benches |
| Baiting Room | Standing room only |
| Deluxe Broom Closet | Standing room only |
Finally, add a header for each column by adding a row of <th> elements.
Supplemental materials
A cumulative summary of the contents of the course so far:
Click here for the cumulative technical summary
back list forward
Email us if you would like additional information. We would love to see your comments and recommendations for our site.
Our privacy policy: we use cookies to keep track of where you are on the site, but we do not leave cookies on your site; we do not track your visits; we do not disseminate any information about you because we do not gather any information about you.