HTML Tables

HTML tables are defined using three core tags.

<table> 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 3 column 2 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

Tables can be created where one cell spans over more than one row, or more than one column. This is achieved through the use of the colspan and rowspan attributes of the <td> element.

For example:

<table>
     <tr>
          <td colspan="3">Set to colspan 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 rowspan="2">Set to rowspan to 2</td>
          <td>Row 3 Cell 2</td>
          <td>Row 3 Cell 3</td>
     </tr>
     <tr>
          <td>Row 4 Cell 2</td>
          <td>Row 4 Cell 3</td>
     </tr>
</table>

would produce:

Set to colspan 3
Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3
Set to rowspan to 2 Row 3 Cell 2 Row 3 Cell 3
Row 4 Cell 2 Row 4 Cell 3

Deprecated Attributes

The following attributes you may well come across but they are deprecated. You should use CSS techniques as described here instead.

HTML Element HTML attribute behaviour CSS Replacement
<table> border Value in pixels - the width of the borders around a table. border-collapse and border
  cellpadding Value in pixels - the space between the cell wall and the cell content. padding
  cellspacing Value in pixels - the space between cells (changes thickness of the cell wall) margin
<tr> align Values of right, left, center control position of row content horizontally. text-align
  valign Values of top, middle, bottom control position of row content vertically. vertical-align
<td> align Values of right, left, center control position of row content horizontally. text-align
  valign Values of top, middle, bottom control position of row content vertically. vertical-align

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.  HTML tables are, however, ideally suited to displaying data.  Tables were made for data. For example:


<table style="width:400px">
<tr>
	<td>Hotel Name</td>
	<td>Address</td>
	<td>Tel</td>
	<td>Other</td>
</tr>
<tr>
	<td>Sheffield Hiiton</td>
	<td>Victoria Quays, Furnival Road, Sheffield, S4 7YA</td>
	<td>0114 252 5500</td>
	<td>Gym and Pool</td>
</tr>
<tr>
	<td> Mercure Sheffield St    Paul's Hotel and Spa </td>
	<td>119 Norfolk Street, Sheffield, S1 2JE </td>
	<td>0114 278 2000</td>
	<td> Spa, Gym and Pool</td>
</tr>
<tr>
	<td> Mercure Sheffield St    Paul's Hotel and Spa </td>
	<td>119 Norfolk Street, Sheffield, S1 2JE </td>
	<td>0114 278 2000</td>
	<td> Spa, Gym and Pool</td>
</tr>
<tr>
	<td>Best Western Cutlers Hotel</td>
	<td> George Street, Heart of the City, Sheffield, S1 2PF </td>
	<td>0114 273 9939</td>
	<td> Free Wi-fi and Broadband</td>
</tr>
</table>


Using <th> for Table Headers

In the above example the first row indicates the heading for the columns.  To make your table data more accessible it is useful to replace the <td> in the first row with <th>.  The <th> table header tag is exactly like the <td> but is more semantic.  It will also by default embolden and centre its content.


<table style="width:400px">
<tr>
	<th>Hotel Name</th>
	<th>Address</th>
	<th>Tel</th>
	<th>Other</th>
</tr>
<tr>
	<td>Sheffield Hiiton</td>
	<td>Victoria Quays, Furnival Road, Sheffield, S4 7YA</td>
	<td>0114 252 5500</td>
	<td>Gym and Pool</td>
</tr>
<tr>
	<td> Mercure Sheffield St    Paul's Hotel and Spa </td>
	<td>119 Norfolk Street, Sheffield, S1 2JE </td>
	<td>0114 278 2000</td>
	<td> Spa, Gym and Pool</td>
</tr>
<tr>
	<td> Mercure Sheffield St    Paul's Hotel and Spa </td>
	<td>119 Norfolk Street, Sheffield, S1 2JE </td>
	<td>0114 278 2000</td>
	<td> Spa, Gym and Pool</td>
</tr>
<tr>
	<td>Best Western Cutlers Hotel</td>
	<td> George Street, Heart of the City, Sheffield, S1 2PF </td>
	<td>0114 273 9939</td>
	<td> Free Wi-fi and Broadband</td>
</tr>
</table>


Leave a Reply

*