Here is an example table:
<table border="1">
<tr>
<td>Ship</td>
<td>Speed</td>
</tr>
<tr>
<td>Dragon Ship</td>
<td>slow</td>
</tr>
<tr>
<td>Ferry</td>
<td>slow</td>
</tr>
</table>
It looks like this:
| Ship
| Speed
|
| Dragon Ship |
slow |
| Ferry |
slow |
We can colour table rows using the <tr> tag, like this:
<tr bgcolor="red"
>
<td>Ship</td>
<td>Speed</td>
</tr>
But, colouring a column (like the Speed column) is more difficult.
You could colour each <th> tag, like this:
<tr bgcolor="red"
>
<td bgcolor="yellow">Ship</td>
<td>Speed</td>
But, here is a better way.
We're going to use the column group tag (<colgroup>) to colour all the columns, like this.
| Ship |
Speed |
| Dragon Ship |
slow |
| Ferry |
slow |
- write a table in the code
<table border="1">
<tr>
<td>Ship</td>
<td>Speed</td>
</tr>
<tr>
<td>Dragon Ship</td>
<td>slow</td>
</tr>
<tr>
<td>Ferry</td>
<td>slow</td>
</tr>
</table>
- save the code and open the page in a browser
you'll see this:
| Ship |
Speed |
| Dragon Ship |
slow |
| Ferry |
slow |
- Now, let's make "Ship" and "Speed" the headings of their columns by changing <td> to <th> in the code:
<table border="1">
<tr>
<th>Ship</th>
<th>Speed</th>
</tr>
<tr>
<td>Dragon Ship</td>
<td>slow</td>
</tr>
<tr>
<td>Ferry</td>
<td>slow</td>
</tr>
</table>
- save the code and open the page in a browser
you'll see this:
| Ship |
Speed |
| Dragon Ship |
slow |
| Ferry |
slow |
"Ships" and "Speed" have been made bold and centred by the <th> tag!
more tutorials to try
you might like to try these tutorials too:
you are here
Tutorials
