Getting Down with ...

by ...

Lesson n:

HTML tables are designed to hold tabular data, like this:

Web Growth Summary (*)
Month Number of Web Sites
6/93 130
12/93 623
6/94 2,738
12/94 10,022
6/95 23,500
1/96 100,000
6/96 230,000 (est)
1/97 650,000 (est)

The source code for this table looks like this:

  <tr><th colspan="2">Web Growth Summary (*)</th></tr>
  <tr><th>Month</th><th>Number of Web Sites</th></tr>
  <tr><td>6/96</td><td>230,000 (est)</td></tr>
  <tr><td>1/97</td><td>650,000 (est)</td></tr>

Here are the elements used with tables:

This element encloses the entire table. Put <table> at the start of the table and </table> at the end of it.
Table row - one row of the table.
Table heading - default attributes of this element are usually bold and centered. Use it to put headings on your table.
Table data - this specifies one cell of the table (as does th). Each table row should have the same number of these, unless the colspan="x" attribute inside the openning tag to indicate that it spans more than one column.

Tables must have the same number of columns in each row. Columns are implicitely determined by the number of table data cells (or table data headings) that occur in each row. This means that you need to make sure each row in your table has the same number of td or th elements.

Using the colspan="x" attribute (where x is the number of columns spanned) inside a td or th makes it take up the space of x columns in the table. In the Web Growth Summary example above, the first row had a single table heading element that spanned both columns of the table.


  1. Once again, copy minimal_page.html to a new file named decbinocthex.html and set the title and a top level heading to Table I. Use what you've learned in this lesson to produce the following table(**) inside the new document:

    Table of Decimal, Binary, Octal, Hexidecimal Values

    Put a level 2 heading above this table labeled Decimal, Binary, Octal, and Hex. Your completed decbinocthex.html Should look something like this

  2. In a file named mytable.html, create another table with your own data. If you like sports, maybe a table with a column for team names and columns for wins, losses, and ties.

    As usual, set the title and a top level heading to the same thing. This time call it Table II. Put a level 2 heading above your table with an appropriate description inside.

(*) From Matthew K. Gray's website @ (**) The table shown here is an image so that the source for it is not available and the exercise is more challenging ;-)