XHTML Tables

 

Tables can be used to hold tabular data or serve as the foundation of page layouts.

Creating a table

Tables are made up of rows of cells. The number of cells in each row determines the table's shape. To define a table, use the table element. To define rows within the table, use the tr (table row) element. To define cells within a row, use the td (table data) element.

 

<p>Here's a table of how fun certain programming languages are:</p>

<table>

  <tr>

    <td>LANGUAGE</td>

    <td>HOW FUN?</td>

  </tr>

  <tr>

    <td>Java</td>

    <td>4.5 out of 5</td>

  </tr>

  <tr>

    <td>Lisp</td>

    <td>1.2 out of 5</td>

  </tr>

  <tr>

    <td>C++</td>

    <td>3.8 out of 5</td>

  </tr>

</table>

 

This is how the table may appear in the browser.

 

 

Altering table appearance

Controlling line breaks

Unless you specify otherwise, the browser will divide lines of text in within cell as it decides on the height and width of each column and row. Line breaks occur where there are spaces or certain punctuation characters in the text. To keep text within a cell on a single line, use nowrap="nowrap" in the td element. To suppress a line break within text in which spaces are required, use the non-breaking space character entity &nbsp;. NOTE: The XHTML equivalent of the non-breaking space is &#160;. To manually insert line breaks, use the br element.


 

<p>The newline character is useful in C...<br />

<tt>1. printf("apple banana cantaloupe");<br />

2. printf("apple\nbanana\ncantaloupe");</tt></p>

 

<table>

  <tr>

    <td>1.</td>
    <td>2.</td>

  </tr>

  <tr>

    <td>apple banana cantaloupe</td>

    <td>apple<br />banana<br />cantaloupe</td>

  </tr>

</table>

 

This is how the table may appear in the browser.

 

 

Note how the browser placed a line break between "banana" and "cantaloupe" for the first column. If the spaces in the first column of the second row were replaced with non-breaking spaces, apple&#160;banana&#160;cantaloupe, the output would be what was originally intended.

 

 

Borders

A border helps distinguish the table from the rest of the page. To display a border around the table and its cells, set the border attribute within the table element, where the value is the number of pixels for the border. To prevent a border from being displayed, use border="0". Borders can also be useful when first designing a page so that you can see how much space the table and its cells occupy.

 

<table border="2">

  ...

</table>

 

This is how the table may appear in the browser.

 

 

Width

By default a browser will automatically determine the width of the cells based on their content. The width of any column is the width of that column's widest cell. The width of the table is the sum of the column widths plus the size of the borders around the cells.

 

To set the width of a table, use the width attribute for the table element. Acceptable values are percentages (i.e., percentage of the page width) or the number of pixels. Similarly, to set the width of a cell, use the width attribute for the td element. When using percentages for cell widths, the percentage is relative to the width of the table.

 

<table border="1" width="40%">

  <tr>

    <td>Section 1</td>

    <td>Introduction</td>

  </tr>

  <tr>

    <td>Section 2</td>

    <td>History of Programming</td>

  </tr>

  <tr>

    <td>Section 3</td>

    <td>Why Programming is Fun</td>

  </tr>

</table>

 

Here is how the table may appear in the browser. NOTE: Some paragraph text was added below the table to demonstrate the proportions of the page width and the table width. The red line is 40% of the page width, and the blue line is the remaining 60%.

 

 

As an alternative, suppose you want each of the columns to split the width of the table evenly.

 

<table border="1" width="40%">

  <tr>

    <td width="50%">Section 1</td>

    <td width="50%">Introduction</td>

  </tr>

  <tr>

    <td>Section 2</td>

    <td>History of Programming</td>

  </tr>

  <tr>

    <td>Section 3</td>

    <td>Why Programming is Fun</td>

  </tr>

</table>

 

Here is how the table may appear in the browser. The red line is the same length as the blue line, indicating that the columns are evenly-sized.

 

 

A few other things to note about using widths:

 

 

Horizontal alignment

To align the table on the page, use the align attribute for the table element. Acceptable values are left, center, and right. When left- or right-alignment is used, the text will wrap around the right or left sides respectively.

 

<table border="1" width="40%" align="right">

  <tr>

    <td>Section 1</td>

    <td>Introduction</td>

  </tr>

  <tr>

    <td>Section 2</td>

    <td>History of Programming</td>

  </tr>

  <tr>

    <td>Section 3</td>

    <td>Why Programming is Fun</td>

  </tr>

</table>

 

Here is how the table may appear in the browser.

 

 

Note that there is very little between the left edge of the table and the adjacent paragraph text. The best way to correct this is by using cascading style sheets. However, if you want to have the table right-aligned and have the paragraph text displayed underneath the table, use the br element with the clear attribute.

 

<table border="1" width="40%" align="right">

  ...

</table>

<br clear="right" />

 

Here is how the table may appear in the browser.

 

Cell alignment

By default, a cell's contents are horizontally left-aligned and vertically middle-aligned. To control the horizontal alignment for a cell, use the align attribute of the td element, where acceptable values are left, center, and right. To control the vertical alignment for a cell, use the valign attribute of the td element, where acceptable values are top, middle, bottom, or baseline.

Suppose you want to add a footer to the bottom of your page with navigational links.

 

<table border="1" width="100%">

  <tr>

    <td align="left" width="33%">Previous</td>

    <td align="center" width="33%">Current</td>

    <td align="right">Next</td>

  </tr>

</table>                                                                                          

 

Here is how the table may appear in the browser.

 

 

The markup below demonstrates how to use vertical alignment within a cell. NOTE: The image of the blue square was added to show the differences in vertical alignment types.

 

<table border="1" width="100%">

  <tr>

    <td><img src="square.png" alt="Square" /></td>

    <td valign="top">Top</td>

    <td valign="middle">Middle</td>

    <td valign="bottom">Bottom</td>

    <td valign="baseline">Baseline</td>

  </tr>

</table>

 

Here is how the table may appear in the browser.

 

Background

Changing the background color of one or more cells is an easy way to add visual clarity and structure to a table. To change the background color, use the bgcolor attribute, where acceptable values are either one of the sixteen predefined colors (e.g., red) or an RGB combination (e.g., #ff0466). The bgcolor attribute works similarly for table rows (i.e., tr element) or the entire table (i.e., table element).

 

To set a background image for a cell, row, or table, use the background attribute, where the value is a URL of an image. A background image can be used in conjunction with a background color if the image supports transparency.

 

<p>Light-blue indicates an interpreted language; light-red indicates a compiled language.</p>

<table border="1" width="50%">

  <tr><td background="clouds.png" align="center"><b>Language</b></td></tr>

  <tr><td bgcolor="#ffa0a0">C</td></tr>

  <tr><td bgcolor="#ffa0a0">FORTRAN</td></tr>

  <tr><td bgcolor="#ffa0a0">Java</td></tr>

  <tr><td bgcolor="#88c4ff">JavaScript</td></tr>

  <tr><td bgcolor="#88c4ff">Perl</td></tr>

  <tr><td bgcolor="#88c4ff">Python</td></tr>

</table>

 

Here's how the markup may appear in the browser.

 

 

When a background image is used whose size exceeds the cell or table size, the browser determines the placement of the image based on the align attribute. Consider the example above, where clouds.png is 600x400 pixels. If align is set to left, the upper-left corner of the image is displayed in the upper-left corner of the cell. If align is center, the center of the image is displayed in the center of the cell. If a background image's size is smaller than the cell or table size, the image will be tiled.

Controlling space

There are two types of space for table cells: cell padding and cell spacing. Cell padding is the space between a cell's contents and the cell's border. Cell spacing is the space between the borders of each cell. The default values are one pixel for cell padding, and two pixels for cell spacing.

 

To define the amount of space, use the cellspacing and cellpadding attributes of the table element, where the values are specified in pixels.

 

The images below show the difference between cell spacing and cell padding. The image on the left shows the default cell spacing and padding. The image in the middle shows cell padding of 15 pixels (cellpadding="15"). The image on the right shows cell spacing of 15 pixels (cellspacing="15").

 

                                                    

 

Nested tables

For more complex formatting of information, tables can be nested by defining a new table to be the content of one of the container table's cells.

Suppose you want to create an outer table with two columns: one for section names, and the other for the page content. The page content will consist of text and a right-aligned table that contains an image and a caption.

 

<table cellpadding="5">

  <tr>

    <!-- Section names -->

    <td>History<br />

      Philosophy<br />

      Syntax<br />

      Resources<br />

    </td>

 

    <!-- Page content -->

    <td>

      <table align="right">

        <tr><td><img src="logo.png" alt="Java Logo" /></td></tr>

        <tr><td align="center"><i>The Java logo.</i></td></tr>

      </table>

      <p>Java is a programming language originally...</p>

      <p>The original and reference implementation...</p>

      <p>Java's design, industry backing and...</p>

    </td>

  </tr>

</table>

 

Here's how the markup may appear in the browser.

 

 

Here are some tips for nesting tables:

 

 

Spanning

It is often useful to straddle or span one cell across several columns or several rows. To span columns, use the colspan attribute of the td element, where the value is the number of columns to span. Likewise to span rows, use the rowspan attribute of the td element, where the value is the number of rows to span. You are not required to specify content for the cells "covered up" by the spanned cells. For example, if your table has two columns and you want a cell to span those two columns, you only need to define one table data element.

 

Using the previous example, suppose you now want to add a title for the page text as part of the table by spanning both columns for the top row.

 

<table cellpadding="5">

  <tr>

    <td colspan="2"><h1>Java Programming Language</h1></td>

  </tr>

  <tr>

    <!-- Section names -->

    <td>History<br />

      Philosophy<br />

      Syntax<br />

  ...

</table>

 

Here's how the markup may appear in the browser.

 

 

The following markup demonstrates how to span columns as well as rows.

 

<table border="1">

  <tr>

    <td colspan="2"><h1>Fun Programming Languages</h1></td>

  </tr>

 

  <tr>

    <td rowspan="3">Compiled</td>

    <td>C</td>

  </tr>

  <tr><td>Java</td></tr>

  <tr><td>FORTRAN</td></tr>

 

  <tr>

    <td rowspan="3">Interpreted</td>

    <td>JavaScript</td>

  </tr>

  <tr><td>Perl</td></tr>

  <tr><td>Python</td></tr>

</table>

 

Here's how the markup may appear in the browser.