12. HTML Tables

HTML tables are defined using three tags.

The <table> tag defines the beginning of the table and </table> the end. Each row is created with a <tr> element and ended with a </tr>. Cells within that row are created with the <td> (table data) element and ended with a closing </td>. It is inside the <td> tags that the actual content of the table is placed.

Therefore, to produce a simple three column, two row table the HTML would be as follows:

<table>
	<tr>
		<td>Column 1</td>
		<td>Column 2</td>
		<td>Column 3</td>
	</tr>
	<tr>
		<td>Value 1</td>
		<td>Value 2</td>
		<td>Value 3</td>
	</tr>
</table>

That would result in a HTML table as follows.

Column 1	Column 2	Column 3
Value 1	Value 2	Value 3

Table Headers

To make your table data more accessible when a <td> contains data that represents a column or row header then it is better to use the <th> element. The <th> table header tag is exactly like the <td> but is more semantic. It will also by default embolden and centre its content.

The Correct Use of Tables.

Tables have in the past been used by web designers as a way of laying out content. However, this technique dates back to the late 1990s when browsers did not have mature CSS support. CSS is now recognized as the best approach for web page layout via Flexbox and grid. HTML tables are, however, ideally suited to displaying data. For example:

<table>
   <tr>
       <th>Qualification</th>
       <th>Subject</th>
       <th>Grade</th>
       <th>Date</th>
   </tr>
   <tr>
       <td>'A' Level</td>
       <td>Maths</td>
       <td>C</td>
       <td>August 2005</td>
   </tr>
   <tr>
        <td>'A' Level</td>
        <td>Physics</td>
        <td>A</td>
        <td>August 2005</td>
    </tr>
</table>

To make the table grid visible (and to stylize it) really requires CSS. We’ll see more of this later.