Tables
Tables are an excellent way to present tabular data on a webpage. It must be noted that tables should ONLY be used to present data that is in tabular format; NOT to format/layout a webpage!
Standard table
The following adds a 3X3 table to a webpage with a 1 pixel border around the table, as well as around each row and cell inside the table
<style type="text/css">
table, th, td {
border: 1px solid black;
</style>
<table>
<tr>
<th>Row 1, Cell 1</th>
<th>Row 1, Cell 2</th>
<th>Row 1, Cell 3</th>
</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>
</table>
which would result in:
| Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 |
|---|---|---|
| Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 |
| Row 3, Cell 1 | Row 3, Cell 2 | Row 3, Cell 3 |
The colspan attribute
The following makes the first row in the table span all 3 columns
<table>
<tr>
<th colspan="3">Row 1</th>
</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>
</table>
which would result in:
| Row 1 | ||
|---|---|---|
| Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 |
| Row 3, Cell 1 | Row 3, Cell 2 | Row 3, Cell 3 |
The rowspan attribute
The following makes the first column in the table span all 3 rows
<table>
<tr>
<th rowspan="3">Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
<tr>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
</tr>
</table>
which would result in:
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Row 2, Cell 2 | Row 2, Cell 3 | |
| Row 3, Cell 2 | Row 3, Cell 3 |