Tables

Across the worldwide web, HTML tables are used and abused to layout pages. The correct use for tables is to do exactly what you would expect a table to do - to structure tabular data.

There are a number of tags used in tables, and to fully get to grips with how they work is probably the most difficult area of this HTML Beginners Tutorial.

Copy the following code into the body of your document and then we will go through what each tag is doing:


<table>
	<tr>
		<td>Row 1, cell 1</td>
		<td>Row 1, cell 2</td>
		<td>Row 1, cell 3</td>
	</tr>
	<tr>
		<td>Row 2, cell 1</td>
		<td>Row 2, cell 2</td>
		<td>Row 2, cell 3</td>
	</tr>
	<tr>
		<td>Row 3, cell 1</td>
		<td>Row 3, cell 2</td>
		<td>Row 3, cell 3</td>
	</tr>
	<tr>
		<td>Row 4, cell 1</td>
		<td>Row 4, cell 2</td>
		<td>Row 4, cell 3</td>
	</tr>
</table>

The table element defines the table.

The tr element defines a table row.

The td element defines a data cell. These must be enclosed in tr tags, as shown above.

If you imagine a 3x4 table, which is 12 cells, there should be four tr elements to define the rows and three td elements within each of the rows, making a total of 12 td elements.

Related Pages

Next: Forms - Text boxes and other user-input thingamajigs.
Previous: Images - Adding something a bit more than text...