XHTML Tables
Tables can be used to hold
tabular data or serve as the foundation of page layouts.
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.
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 . NOTE:
The XHTML equivalent of the non-breaking space is  . 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 banana cantaloupe, the output would be what was originally intended.
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.
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:
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.
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.
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.
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").
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:
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.