Page 26 - HTML5 Notes for Professionals

Chapter 8: Tables

The HTML <table> element allows web authors to display tabular data (such as text, images, links, other tables,
etc.) in a two dimensional table with rows and columns of cells.

Section 8.1: Simple Table

<table>
<tr>
<th>Heading 1/Column 1</th>
<th>Heading 2/Column 2</th>
</tr>
<tr>
<td>Row 1 Data Column 1</td>
<td>Row 1 Data Column 2</td>
</tr>
<tr>
<td>Row 2 Data Column 1</td>
<td>Row 2 Data Column 2</td>
</tr>
</table>

This will render a <table> consisting of three total rows (<tr>): one row of header cells (<th>) and two rows of
content cells (<td>). <th> elements are tabular headers and <td> elements are tabular data. You can put whatever
you want inside a <td> or <th>.

Heading 1/Column 1 Heading 2/Column 2
Row 1 Data Column 1 Row 1 Data Column 2

Row 2 Data Column 1 Row 2 Data Column 2

Section 8.2: Spanning columns or rows

Table cells can span multiple columns or rows using the colspan and rowspan attributes. These attributes can be
applied to <th> and <td> elements.

<table>
<tr>
<td>row 1 col 1</td>
<td>row 1 col 2</td>
<td>row 1 col 3</td>
</tr>
<tr>
<td colspan="3">This second row spans all three columns</td>
</tr>
<tr>
<td rowspan="2">This cell spans two rows</td>
<td>row 3 col 2</td>
<td>row 3 col 3</td>
</tr>
<tr>
<td>row 4 col 2</td>
<td>row 4 col 3</td>
</tr>

</table>

GoalKicker.com – HTML5 Notes for Professionals 19