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

The source code for this table looks like this:

<table>
  <tr><th colspan="2">Web Growth Summary (*)</th></tr>
  <tr><th>Month</th><th>Number of Web Sites</th></tr>
  <tr><td>6/93</td><td>130</td></tr>
  <tr><td>12/93</td><td>623</td></tr>
  <tr><td>6/94</td><td>2,738</td></tr>
  <tr><td>12/94</td><td>10,022</td></tr>
  <tr><td>6/95</td><td>23,500</td></tr>
  <tr><td>1/96</td><td>100,000</td></tr>
  <tr><td>6/96</td><td>230,000 (est)</td></tr>
  <tr><td>1/97</td><td>650,000 (est)</td></tr>
</table>

Here are the elements used with tables:

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.

Exercises:

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:

   

   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.