Tables

Key points

HTML Tables format text into a series of rows and columns.
Each table row has one or more cells, but all rows must have the same number of cells.
You can improve readability by adding captions and headers to tables, and by adjusting cell padding and spacing.

Often used for formatting blocks of text, HTML tables are an easy way to add a fixed structure to a web page.

Creating a Simple Table

First, take a look at a simple table and the HTML used to create it:

Row 1, Col 1	Row 1, Col 2
Row 2, Col 1	Row 2, Col 2

Click to view Live Example

<table border="1">
	<tr>
		<td>Row 1, Col 1</td>
		<td>Row 1, Col 2</td>
	</tr>
	<tr>
		<td>Row 2, Col 1</td>
		<td>Row 2, Col 2</td>
	</tr>
</table>
A simple HTML table

Not surprisingly, HTML tables are added using the <table> tag. But, similar to lists, the table tag alone doesn't tell the web browser anything useful. Instead, tables contain rows (each <tr> tag is a new table row) and columns. Within each row is a cell for every column (each <td>, or table data, is a single cell). The border attribute on the table tag tells the web browser to put a border around each cell of size 1. Increasing the value of the table border attribute will increase the size of the border around each cell.

Table Headers

HTML provides a way to easily add headers to each column of a table. Most web browsers will display table headers in bold so the reader can tell it apart from a regular table cell. To add a header, use the <th> tag (table header) instead of <td> for one of the rows:

Click to view Live Example

<table border="1">
	<tr>
		<th>Column 1</th>
		<th>Column 2</th>
	</tr>
	<tr>
		<td>Row 1, Col 1</td>
		<td>Row 1, Col 2</td>
	</tr>
	<tr>
		<td>Row 2, Col 1</td>
		<td>Row 2, Col 2</td>
	</tr>
</table>
HTML table with column headers

Which produces the following table:

Column 1	Column 2
Row 1, Col 1	Row 1, Col 2
Row 2, Col 1	Row 2, Col 2

Note that the <th> tags still appear in table rows (<tr>). HTML does not restrict table headers to being at the top of a table, either. Adding headers in multiple places in the table can help for tables with a lot of rows.

Captions

It is also easy to add captions to HTML tables using the <caption> tag. Most browsers display table captions centered above the table, and require the caption tag to appear immediately after the table tag:

Click to view Live Example

<table border="1">
	<caption>Table 1: A simple table</caption>
	<tr>
		<th>Column 1</th>
		<th>Column 2</th>
	</tr>
	<tr>
		<td>Row 1, Col 1</td>
		<td>Row 1, Col 2</td>
	</tr>
	<tr>
		<td>Row 2, Col 1</td>
		<td>Row 2, Col 2</td>
	</tr>
</table>
The table with a caption added

Which looks like:

Table 1: A simple table
Column 1	Column 2
Row 1, Col 1	Row 1, Col 2
Row 2, Col 1	Row 2, Col 2

Table Formatting

Besides the border attribute, HTML tables also have the cellspacing and cellpadding attributes, which can help increase the readability of tables. Consider the following two tables:

2.112332	5.432165
3.765356	9.332865

Mass	Volume
2.112332	5.432165
3.765356	9.332865

The second table, which adds table headers, cellpadding, and cellspacing, is much easier to read and understand. Cellpadding is space between the border of a cell and the cell's data, and cellspacing adds extra space between two cells. Here is the HTML for the second table above:

Click to view Live Example

<table border="1" cellspacing="4" cellpadding="10">
	<tr>
		<th>Mass</th>
		<th>Volume</th>
	</tr>
	<tr>
		<td>2.112332</td>
		<td>5.432165</td>
	</tr>
	<tr>
		<td>3.765356</td>
		<td>9.332865</td>
	</tr>
</table>
An HTML table is easier to read with headers and padding