Web Hosting by Netfirms | Free Domain Names by Netfirms

Learning HTML: Tables

The HTML table model allows you to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells much like a spreadsheet or database.  You can add formatting tags we've already discussed to the contents of individual cells.

Basic Table

The <TABLE>...</TABLE> tags contain all other elements that specify rows, cell content, caption, and formatting.  Attributes such as WIDTH=... (the width of the table in pixels or as a percent), BORDER=... (the border around the table and individual cells in pixels), CELLSPACING=... (the amount of space to leave between cell borders in pixels), and CELLPADDING=... (the padding in pixels between the border around each cell and the cell's contents) can be applied to the TABLE tag.

Each table may have an associated caption, <CAPTION>...</CAPTION> that provides a short description of the table's purpose.  It may be rendered as bold in some browsers.

Table Rows are enclosed by the <TR>...</TR> tags and individual cells by the <TD>...</TD> tags.  Attributes are ALIGN=... (horizontal placement of cell contents - LEFT|CENTER|RIGHT|JUSTIFY), and VALIGN=... (vertical placement of cell contents - TOP|MIDDLE|BOTTOM|BASELINE).

Table cells may contain header information, which may be rendered as bold, by using the <TH>...</TH> tags instead of <TD>.  These don't allow scrolling.  Additionally, cells may span multiple rows and columns using the ROWSPAN=... and COLSPAN=... attributes.

Here's a table that illustrates some of the above features:

<TABLE BORDER="1">
  <CAPTION ALIGN="TOP">A test table with merged cells</CAPTION>
  <TR>
    <TH ROWSPAN="2"></TH>
    <TH COLSPAN="2">Average</TH>
    <TH ROWSPAN="2">Red<BR>eyes</TH>
  </TR>
  <TR>
    <TH>height</TH>
    <TH>weight</TH>
  </TR>
  <TR>
    <TH>Males</TH>
    <TD>1.9</TD>
    <TD>0.003</TD>
    <TD>40%</TD>
  </TR>
  <TR>
    <TH>Females</TH>
    <TD>1.7</TD>
    <TD>0.002</TD>
    <TD>43%</TD>
 </TR>
</TABLE>

In the above table I added the BORDER="1" attribute to add a 1 pixel border around the table and cells.  You may change this to BORDER="0" to eliminate the border or a higher number to make the border wider.

Jump to top

Grouping Table Sections

Table rows may be grouped into a header (<THEAD>...</THEAD>),  body (<TBODY>...</TBODY>) and footer (<TFOOT>...</TFOOT>) tags.  Browsers may render the <THEAD> and <TFOOT> as bold and may support scrolling of body sections independently of the head and foot sections.  When long tables are printed, the head and foot information may be repeated on each page that contains table data.

Here's an example (I left out the <TD> tags to keep it simpler):

<TABLE BORDER="1">
  <THEAD>
    <TR> ...header information... </TR>
  </THEAD>
  <TFOOT>
    <TR> ...footer information... </TR>
  </TFOOT>
  <TBODY>
    <TR> ...first row of body data... </TR>
    <TR> ...second row of body data... </TR>
  </TBODY>
 </TABLE>

You may also group columns and declare column properties at the start of a table by using the <COLGROUP>...</COLGROUP> and <COL>...</COL> Tags.  This speeds up the rendering of larger tables but is more complex than this tutorial can explain so check out the Resources for more advanced tutorials.

Jump to top

Previous Chapter | Home | Up | Next Chapter

Send feedback and kudos to: peterconrad@hotmail.com
Copyright © 2004 by Web Taming. All Rights Reserved.

For more attractions please visit my Personal Pages on Planet Tripod.