Simple Table Examples

Note: The style for these tables is set in a <style> element in the head of this document.

XHTML table tags

element	start tag	end tag	notes
table	`<table>`	`</table>`	can include a `summary` attribute (which is not displayed)
table caption	`<caption>`	`</caption>`	Optional
table row	`<tr>`	`</tr>`	HTML tables are organized by rows
table heading	`<th>`	`</th>`	must appear in a table row
table data	`<td>`	`</td>`	must appear in a table row
table head	`<thead>`	`</thead>`	Optional Used to organize complicated tables. Contents of each must be table rows. The table footer (if any) must be defined before the table body.
table foot	`<tfoot>`	`</tfoot>`
table body	`<tbody>`	`</tbody>`

The <th> and <td> tags can take rowspan or colspan attributes. The value in either case is the number of rows (or columns) that the table cell will take up. See below for examples.

Example 1

This is the (optional) table caption.
cell A1	cell B1	cell C1
cell A2	cell B2	cell C2
cell A3	cell B3	cell C3

Example 2

This table has column headings.
Column A	Column B	Column C
cell A1	cell B1	cell C1
cell A2	cell B2	cell C2
cell A3	cell B3	cell C3

Example 3

This table has both column headings and footings.
Column A	Column B	Column C
Foot A	Foot B	Foot C
cell A1	cell B1	cell C1
cell A2	cell B2	cell C2
cell A3	cell B3	cell C3

Example 4

This table has a footer spanning all three columns.
Column A	Column B	Column C
This footer spans the bottom of the table.
cell A1	cell B1	cell C1
cell A2	cell B2	cell C2
cell A3	cell B3	cell C3

Example 5

Note the empty cell at the upper left. You have to put it there yourself in the first row. Otherwise, the ‘Column A’ heading will be on top of the row headings, which isn't what we want. (You make a cell empty by not giving it any content, i.e., you write it as <td></td> with nothing in between.)

This table has row headings.
	Column A	Column B	Column C
Row 1	cell A1	cell B1	cell C1
Row 2	cell A2	cell B2	cell C2
Row 3	cell A3	cell B3	cell C3

Example 6

This table has a single row heading spanning three rows.
	Column A	Column B	Column C
These three rows of data have something in common	cell A1	cell B1	cell C1
	cell A2	cell B2	cell C2
	cell A3	cell B3	cell C3

Example 7

This table has three merged cells.
Row 3	cell A2	cell C2
	Column A	Column B	Column C
Row 1	cell A1		cell C1
Row 2	cell A2	cell C2

Example 8

This is really a CSS example of how to move the location of the optional table caption. Note that the default position is at the top of the table. Also note that this doesn't currently work in IE.

Here is the caption for Example 8a.
Column A	Column B	Column C
This footer spans the bottom of the table.
cell A1	cell B1	cell C1
cell A2	cell B2	cell C2
cell A3	cell B3	cell C3

Here is the caption for Example 8b. (Note that the caption appears *outside* the margin-bottom of the table.)
Column A	Column B	Column C
This footer spans the bottom of the table.
cell A1	cell B1	cell C1
cell A2	cell B2	cell C2
cell A3	cell B3	cell C3

Here is the caption for Example 8c. If you want a moveable caption, it's best to put your table in a <div>, keep the table margins tight, and use the div to set the spacing around the *table plus caption*
Column A	Column B	Column C
This footer spans the bottom of the table.
cell A1	cell B1	cell C1
cell A2	cell B2	cell C2
cell A3	cell B3	cell C3

Here is the caption for Example 8d.
Column A	Column B	Column C
This footer spans the bottom of the table.
cell A1	cell B1	cell C1
cell A2	cell B2	cell C2
cell A3	cell B3	cell C3

[ Return to the CPSCI 107 homepage ]

Brian J. Rosmaita <contact me>
This page was last modified Tuesday, 14 February 2006 at 16:56 UTC.