XHTML Class Guide and Reference
Make your own web pages

tables - How to make them

Tables were added to HTML fairly early on, They are intended to be used to display tabular data, for example product specifications and comparisons.

Ever since their introduction they have been used heavily for formatting web pages. This type of use of a content specification to specify page layout and appearance is just the sort of thing that HTML4.0, XHTML, and CSS are trying to put an end to. However we are still in a transition period, and many existing sites still depend on tables for layout.

It is very important with tables to get the beginning and ending tags matched properly or some browsers will not show your table at all.

It is a good idea to indent your table code to help you keep track of your tags.

Sample table - code and appearance

Sample Code

<table  border="1"> <!-- begin table -->
 <tr>   <!-- begin row -->
  <th>  <!-- begin heading cell -->
   Fruit
  </th>  <!-- end heading cell --->
  <th>
   Color
  </th>
  <th>
   Seeds
  </th>
 </tr>   <!-- end row -->
 <tr>    <!-- new row -->
  <td>   <!-- begin content cell -->
   Apple
  </td>  <!-- end content cell -->
  <td>
   Red or Green
  </td>
  <td>
   5 in the core
  </td>
 </tr>    
 <tr>
  <td>
    Strawberry
  </td>
  <td>
   Red
  </td>
  <td>
   Covered with small seeds
  </td>
 </tr>
 <tr>
  <td>
    Peach
  </td>
  <td>
   Orange
  </td>
  <td>
   big pit
  </td>
 </tr>
 
</table>  <!-- end table -->

Appearance

View source to see how alternate tables were made.

This table is made using the same xhtml tags shown to the left.

Fruit Color Seeds
Apple Red or Green 5 in the core
Strawberry Red Covered with small seeds
Peach Orange big pit

This is the same table with border="0" instead of border="1".

Fruit Color Seeds
Apple Red or Green 5 in the core
Strawberry Red Covered with small seeds
Peach Orange big pit

This is the same table as above with the header cells left aligned.

Fruit Color Seeds
Apple Red or Green 5 in the core
Strawberry Red Covered with small seeds
Peach Orange big pit

This is the same table as the top one except cellpadding="5"

Fruit Color Seeds
Apple Red or Green 5 in the core
Strawberry Red Covered with small seeds
Peach Orange big pit

This is the same table as the top one except cellspacing="5"

Fruit Color Seeds
Apple Red or Green 5 in the core
Strawberry Red Covered with small seeds
Peach Orange big pit

Attributes

Many other attributes can be set for tables. the most useful are:

width use in table or td tag specify as a percentage or in pixels
don't set wider than 600 if you can help it
height you can use in td tag specify in pixels, but you won't get less than the height of a row of text in Netscape
bgcolor use in table or td tag specify with the usual color numbers
align use in table or td tag choices are left, right, and center
valign use in table or td tag choices are top, bottom, and center
rowspan use in td tag specify that a certain cell extends down for more than one row
colspan use in td tag specify that a certain cell reaches across more than one column
border use in table tag specify how wide the border lines between cells should be, 0 = no border

Quirks

If you specify widths and heights they may not be honored. Netscape especially has a reputation for doing something else if it thinks the content warrants it. A cell with nothing in it, especially if there is nothing in that row or column may be 'collapsed' and disappear. If you want to hold that cell open either put in a   or a transparent gif with height & width set to what you want to hold the cell open to.