You can define a table with the <table> tag. A table is divided into rows (<tr> tag), table header cells (<th> tag) and table data cells (<td> tag). The <td> tag contains the main content of a table, this can be anything at all from plain text to lists, images, forms, flash animations etc.
Please note the header tag (<th> is not mandatory).
Below is an example of table code.
<table border="1">
<tr>
<th>Row 1 Cell 1 Header</th>
<th>Row 1 Cell 2 Header</th>
</tr>
<tr>
<td>Row 1: Cell 1</td>
<td>Row 1: Cell 2</td>
</tr>
<tr>
<td>Row 2: Cell 1</td>
<td>Row 2: Cell 2</td>
</tr>
</table>
This is how it looks in the browser:
| Row 1 Cell 1 Header |
Row 1 Cell 2 Header |
| Row 1: Cell 1 |
Row 1: Cell 2 |
| Row 2: Cell 1 |
Row 2: Cell 2 |
You can also make table cells span multiple columns by using the colspan argument.
In the example below the 2nd row of the table spans both cells. (For this example I have omitted the <th> tag to keep it simple.
<table border=”1”>
<tr>
<td>Row 1: Cell 1</td>
<td>Row 1: Cell 2</td>
</tr>
<tr>
<td colspan=”2”>Row 2: Cell 1 spanned.</td>
</tr>
</table>
This is how it looks in the browser:
| Row 1: Cell 1 |
Row 1: Cell 2 |
| Row 2: Cell 1 spanned. |
The Border Attribute in Tables
In order to display borders on the table you must specify the border="1" attribute. If you do not specify this there will be no border displayed. This can be useful when you are using tables to structure your pages but most of the time you would want borders to show.
An Empty Table Cell?
You can have empty cells in a table. There are two ways you can accomplish this, one is to have an empty <td></td> tag. This will display the table with a missing cell.
Example:
<table border=”1”>
<tr>
<td>Row 1: Cell 1</td>
<td>Row 1: Cell 2</td>
</tr>
<tr>
<td>Row 2: Cell 1</td>
<td></td>
</tr>
</table>
How it looks in the browser:
| Row 1: Cell 1 |
Row 1: Cell 2 |
| Row 2: Cell 1 |
|
Your other option is to display the empty cell like a normal cell but without content, this can be done by adding a none breaking space into the cell. A ( ) see example below:
<table border=”1”>
<tr>
<td>Row 1: Cell 1</td>
<td>Row 1: Cell 2</td>
</tr>
<tr>
<td>Row 2: Cell 1</td>
<td> </td>
</tr>
</table>
This is how it looks in the browser:
| Row 1: Cell 1 |
Row 1: Cell 2 |
| Row 2: Cell 1 |
|