Tables in HTML

This lecture notes is based on Prof Doreen De Leon's lectures.

Reading

Sebesta Section 2.8

Table Tags

The <table> tag

The <tr> tag

The <th> and <td> tags

The <caption> tag

Example

1.
<table border="1">
<caption>Recent Presidents and Vice Presidents</caption>
<tr><th> </th><th>Prez</th><th>Veep</th></tr>

<tr><th>1989-1993</th><td>George</td><td>Dan</td></tr>
<tr><th>1993-2001</th><td>Bill</td><td>Al</td></tr>
<tr><th>1991-2005</th><td>George</td><td>Dick</td></tr>
</table>

Recent Presidents and Vice Presidents
PrezVeep
1989-1993GeorgeDan
1993-2001BillAl
1991-2005GeorgeDick

2.
<table border="1" cellspacing="0" cellpadding="5">
<caption align="bottom">
Competition in a Small Ecosystem</caption>
<tr>
<td rowspan="2"></td>
<th colspan="3">Population (in 1000s)</th>
</tr>
<tr>
<th>Lynxes</th>
<th>Hares</th>
<th>Mice</th>
</tr>
<tr align="center">
<th>1970</th>
<td>10.5</td>
<td>7.5</td>
<td>3.2</td>
</tr>
<tr align="center">
<th>1990</th>
<td>12.8</td>
<td>6.9</td>
<td>4.2</td>
</tr>
</table>
produces the following:

Competition in a Small Ecosystem
Population (in 1000s)
Lynxes Hares Mice
1970 10.5 7.5 3.2
1990 12.8 6.9 4.2
3
<table border="1" summary="Some properties that some animals have" cellpadding="5">
<caption>Quite a Stupid Table</caption>
<tr>
    <td colspan="2" rowspan="2"></td>
    <th colspan="3">Properties</th>
</tr>
<tr>
    <th>Tail?</th>
    <th>Feathers?</th>

    <th>Moos?</th>

</tr>
<tr>
    <th rowspan="3">Mammals</th>
    <th>Dogs</th><td>yes</td>
    <td>no</td><td>no</td>
</tr>

<tr>
    <th>Duckbill Platypuses</th>

    <td>yes</td>
    <td>no</td>
    <td>no</td>
</tr>
<tr>
    <th>Cows</th>

    <td>yes</td>

    <td>no</td>
    <td>yes</td>
</tr>
<tr>
    <th rowspan="2">Birds</th>
    <th>Penguins</th>

    <td>yes</td>

    <td>yes</td>
    <td>no</td>
</tr>
<tr>
    <th>Ducks</th>
    <td>yes</td>

    <td>yes</td>

    <td>no</td>
</tr>
</table>

Quite a Stupid Table
Properties
Tail? Feathers? Moos?
Mammals Dogsyes nono
Duckbill Platypuses yes no no
Cows yes no yes
Birds Penguins yes yes no
Ducks yes yes no