Learning HTML 3.2 - Chapter 10: Tables

Learning HTML 3.2: 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 ALIGN=... (horizontal placement of table - LEFT|CENTER|RIGHT), 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.

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), and VALIGN=... (vertical placement of cell contents - TOP|MIDDLE|BOTTOM).

Each table may have an associated caption, <CAPTION>...</CAPTION> that is placed either before the first row (ALIGN="TOP") or after the last row (ALIGN="BOTTOM") and provides a short description of the table's purpose. It may be rendered as bold in some browsers.

Here's an example of a basic table:

<TABLE BORDER="1">

  <CAPTION ALIGN="TOP">This is your basic table</CAPTION>

  <TR>

    <TD>Row 1, Cell 1</TD>

    <TD>Row 1, Cell 2</TD>

  </TR>

  <TR>

    <TD>Row 2, Cell 1</TD>

    <TD>Row 2, Cell 2</TD>

  </TR>

          </TABLE>

This is your basic table
Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2

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.

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. Other attributes are NOWRAP which disables word wrap and WIDTH=... and HEIGHT=... which can be either in pixels or percent.

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">&nbsp;</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>

A test table with merged cells
	Average		Red eyes
	height	weight	Red eyes
Males	1.9	0.003	40%
Females	1.7	0.002	43%

Jump to top

• Back • Home • Up •

Learning HTML 3.2: Tables

Basic Table

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