First, and most important, remember the Golden Rule: tables are for the use they were intended for, representing tabular data (lists of figures, etc). They are not for layout of graphics and text!

That being said, tables are relatively easy to construct, so long as you remember that they are made up of rows, with each row of the table containing cells. It is vitally important that the cell count on each row is the same. If they are not, horrid results tend to happen.

Tables start very simply, with a <table> tag. Each row in the table is signified by a <tr> tag, and each cell inside this row is listed in order with a <td> tag. All of these tags are nested, so the result looks something like this:

<table>
	<tr>
		<td>This is the content of cell one</td>
		<td>This is the content of cell two</td>
	</tr>
</table>

Which produces a table that will look something like this:

The borders of the table are likely invisible in your browser, as this is the default UA style. Ironically, to make a table look the way we expect, we must use CSS: a solution is provided in an upcoming article.

Also note that closing tags for the table cells and rows are optional in HTML5, although it is good practice to include them.

This simple piece of code creates a simple one row, two cell table. Alternatively, you could think of it as a “one row, two column” table. If we add another row, it will alter the code of the table as follows:

<table>
	<tr>
		<td>This is the content of the first cell in the first row</td>
		<td>This is the content of the second cell in the first row </td>
	</tr>
	<tr>
		<td>This is the content of the first cell in the second row</td>
		<td>This is the content of the second cell in the second</td>
	</tr>
</table>

This code creates the table you see below (again, without any styles applied.)

There are two cell-specific attributes that you should be aware of: rowspan and colspan. colspan makes one cell “equal to” two or more cells, such as the following example:

<table>
	<tr>
		<td colspan="2">This is the content of the first cell in the first row, spanning two cells</td>
		<td>This is the content of the second cell in the first row </td>
	</tr>
	<tr>
		<td>This is the content of the first cell in the second row</td>
		<td>This is the content of the second cell in the second</td>
		<td>This is the content of the third cell in the second row </td>
	</tr>
</table>

Note that the count of cells on each row is still the same: the first cell in the first row is now “worth” two cells, making a count of three cells on the first row, matching the second row.

rowspan is similar, except working down through rows, rather than across columns. A cell that has been rowspanned “eats” cells in the rows below, meaning that those rows have fewer defined cells:

<table>
	<tr>
		<td rowspan="2">This is the content of the first cell in the first row, rowspanned into the second row </td>
		<td>This is the content of the second cell in the first row </td>
	</tr>
	<tr>
		<td>This is the content of the first cell in the second row</td>
	</tr>
</table>

Note that cells will automatically extend to their maximum width to accommodate whatever content is placed inside them. That limit is determined by the other cells, and the overall width of the table, determined by its associated style.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.