Basics of Tables

HTML tables should only be used for rendering data that naturally belongs in a grid. I’m saying this as tables has previously been used for the layout of HTML pages and this has never been the idea. A lot of webdesigners used the tables for the layout, but there are two main reasons not to do it:

• It is semantically incorrect
• Tables are less flexible than e.g. div’s (and other semantic elements)

The elements of tables are pretty comprehensive, but the first you will need to know is the <table> element. This is the first element and defines that the following markup is inside a table.

When you are structuring tables, the HMTL markup is basically structured with row and cells (note, that there are no tags for columns, just rows).

The tag for rows is <tr> (abbreviation for table row) and the tag for each cell is <td> (which stands for table data, and this is where the actual content is.

Before you start writing your markup for the table, you need to know exactly what it should look like – this will make it a lot easier for you. Let’s try and make a really simple table – with three columns and four rows.

<table border="1" width="100%">
	<tr>
			<td>Row 1, cell 1</td>
			<td>Row 1, cell 2</td>
			<td>Row 2, 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>

As you can see, the <td> tags are nested inside the <tr> tags, and thins means, that every cell in a row must be inside the <tr> element.

NB!

And please note, that I have added the attribute border to the <table> tag so that you can actually see the tableborders when you try out the examples, but you should never do this when you are writing your markup – tableborder are a job for CSS!