tables

Tables are a bit more complex than anything we've looked at so far. The information below should give you a rough idea of how tables work, but there's a lot more to tables than what's presented here.

Here's a simple (and silly) table:

Name Age Favorite Dessert
Zachary 50 Popsicles
Yvette 83 Bananas Foster
Xerxes 12 Chocolate Ice Cream

Here's the HTML code for the above table: 

<TABLE BORDER="1">

 <TR>
  <TH>Name</TH>
  <TH>Age</TH>
  <TH>Favorite Dessert</TH> 
 </TR>
 
 <TR>
  <TD>Zachary</TD>
  <TD>50</TD>
  <TD>Popsicles</TD> 
 </TR>
 
 <TR>
  <TD>Yvette</TD>
  <TD>83</TD>
  <TD>Bananas Foster</TD> 
 </TR>
 
 <TR>
  <TD>Xerxes</TD>
  <TD>12</TD>
  <TD>Chocolate Ice Cream</TD> 
 </TR>
 
</TABLE>

It may look a little intimidating at first, but if we pick it apart, we can see that here are only four elements here:

Let's look at each of these in turn...

The Table Element

The entire table element is delimited by the <TABLE> and </TABLE> tags. In the example above, you will notice that the <TABLE> tag has been expanded to <TABLE BORDER="1">. This optional attribute specifies a border with a width of one pixel. You can, of course, specify a thicker border, or no border at all.

The Table Row

Our sample table has four horizontal rows. Each table row is delimited by the <TR> and </TR> tags. Table rows are nested within the table element described above.

The Table Datum

Our sample table has three colums. That means that each row of the table is divided into three individual cells. Each cell (or table datum) is delimited by the <TD> and </TD> tags. The cells are nested within the table row element described above.

The Table Header

A table header is really just a special sort of table cell, one that serves as a header for a row or column. Each table header is delimited by the <TH> and </TH> tags. Most browsers display the content of a table header cell in boldface.

Tables are block-level elements.

| Introduction to HTML | Tutorials |