Tables
« Previous: Lists | Next: Forms »
HTML tables have often been misused as a way of creating page layouts, but this practice is rapidly being replaced by the use of CSS-based designs due to their greater flexibility and accessibility benefits.
However, tables can be extremely helpful when they are used for their intended purpose,
that is, to display tabular data - calendars, price lists, etc.
To make the most basic table, we need three different tags:
<table> - defines a table<tr> - defines a row<td> - defines a cell
By default, there is no border, and the size of the table will increase to accomodate whatever’s inside it.
We can add a border and fix the width using the table attributes
(though you can also use CSS for this).
You can set the width as a percentage of the available space, or just specify a number to set the width in pixels.
| Code |
Output |
<table>
<tr>
<td> Text Goes Here </td>
</tr>
</table>
|
|
<table border="1">
<tr>
<td> Text Goes Here </td>
</tr>
</table>
|
|
<table width="50%" border="1">
<tr>
<td> Text Goes Here </td>
</tr>
</table>
|
|
<table width="200" border="1">
<tr>
<td> Text Goes Here </td>
</tr>
</table>
|
|
Note that the <tr> tag follows immediately after the <table> tag,
and <td> follows immediately after <tr>.
Nothing is allowed between <table> and <tr>,
or between <tr> and <td>.
This is similar to the rules we have for lists - just a teeny bit more complicated.
Now we’ll add some more cells and rows. Just remember that each cell you add must be inside a row.
Study the examples below and try to figure out why the first two were wrong, and how you think the correct ones will display.
<table width="200" border="1">
<tr>
<td>Cell</td>
</tr>
<td>Cell</td>
<table>
|
This is wrong! |
<table width="200" border="1">
<tr>
<td>Cell
<tr>
</tr>
</td>
</tr>
</table>
|
This is also wrong! |
<table width="200" border="1">
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
|
This is correct! |
<table width="200" border="1">
<tr>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
</tr>
</table>
|
And this is also correct! |
The first example was wrong because a cell was placed outside of a row. Each cell must be within a row.
The second example was wrong because a row was placed within a cell. Cells are inside rows, not the other way around. Neither of these examples would make a proper table (of course, most browsers will make their best stab at guessing what you’re trying to do, but relying on browsers to correct your mistakes is not a good habit to get into).
The third example is correct, and has one row, with two cells within it. It displays like this:
| Code |
Output |
<table width="200" border="1">
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
|
|
The fourth example is correct, and has two rows, with one cell in each. It displays like this:
| Code |
Output |
<table width="200" border="1">
<tr>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
</tr>
</table>
|
|
To make more complex tables, simply add more rows and cells:
| Code |
Output |
<table width="200" border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
<tr>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>
</table> |
| Cell 1 |
Cell 2 |
Cell 3 |
| Cell 4 |
Cell 5 |
Cell 6 |
| Cell 7 |
Cell 8 |
Cell 9 |
|
Merging table cells
You can merge cells within a column using the colspan attribute:
| Code |
Output |
<table width="200" border="1">
<tr>
<td colspan="2">Animals</td>
<td colspan="2">Plants</td>
</tr>
<tr>
<td>Cat</td>
<td>Dog</td>
<td>Grass</td>
<td>Sunflower</td>
</tr>
<tr>
<td>Snake</td>
<td>Bear</td>
<td>Tree</td>
<td>Bonsai</td>
</tr>
</table>
|
| Animals |
Plants |
| Cat |
Dog |
Grass |
Sunflower |
| Snake |
Bear |
Tree |
Bonsai |
|
As well as merging columns together, you can also merge rows together, like this:
| Code |
Output |
<table width="200" border="1">
<tr>
<td rowspan="2">Animals</td>
<td>Cat</td>
<td>Dog</td>
</tr>
<tr>
<td>Snake</td>
<td>Bear</td>
</tr>
<tr>
<td rowspan="2">Plants</td>
<td>Grass</td>
<td>Sunflower</td>
</tr>
<tr>
<td>Tree</td>
<td>Bonsai</td>
</tr>
</table>
|
| Animals |
Cat |
Dog |
| Snake |
Bear |
| Plants |
Grass |
Sunflower |
| Tree |
Bonsai |
|
As you can see, the second and the fourth rows only have two cells each, while the first and the third have three. If you look at the table, it has three cells per row, so what is this all about? Well, the first cell in the first row spans over the second row, and the first cell in the third row spans over the fourth. Therefore, they have been lent to the row above, and neither of these two rows have a first cell anymore. That's why it's called rowspan, it spans over two or more rows.
<th>
You can change a table cell to a table heading by using the <th> tag
(instead of <td>).
Browsers usually display text within <th> tags in bold:
| Code |
Output |
<table border="1">
<tr>
<td>I'm a normal cell</td>
</tr>
</table>
|
|
<table border="1">
<tr>
<th>I'm a title cell</th>
</tr>
</table>
|
|
cellpadding and cellspacing
The cellpadding and cellspacing attributes can be added to the
<table> tag.
Cellpadding adds padding within the table cells;
cellspacing adds space between the cells:
| Code |
Output |
<table width="200" border="1" cellpadding="5">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
|
| Cell 1 |
Cell 2 |
| Cell 3 |
Cell 4 |
|
<table width="200" border="1" cellspacing="5">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
|
| Cell 1 |
Cell 2 |
| Cell 3 |
Cell 4 |
|
More fun with tables
There are a few other tags and attributes you can add to tables to make them more user-friendly, such as:
<caption><thead><tbody><tfoot>- the summary attribute in the
<table> tag
You can find useful resources on tables at www.w3schools.com/tags/ and www.idocs.com/tags/tables/. Remember that the best use of these tags and attributes is to structure the data and make the table more user-friendly, rather than to make presentational changes (it's better to use CSS to change the appearance of the table).
« Previous: Lists | Next: Forms »