HTML Table Example (and the same table using CSS)

Monday Tuesday Wednesday Thursday Friday
9:00 sleep CompSci 110 breakfast CompSci 110 running
10:00 breakfast CompSci 108 free CompSci 108
11:00
12:00 lunch lunch lunch lunch lunch
1:00 free free free free free
2:00
3:00
4:00
5:00
Table Source
<table cellspacing="3" cellpadding="2" width="70%" align="center"> <tr> <th bgcolor="#00FF00"></th> <th bgcolor="#00FF00">Monday</th> <th bgcolor="#00FF00">Tuesday</th> <th bgcolor="#00FF00">Wednesday</th> <th bgcolor="#00FF00">Thursday</th> <th bgcolor="#00FF00">Friday</th> </tr> <tr> <th bgcolor="#00FF00" align="right"><small>9:00</small></th> <td rowspan="3" bgcolor="#00FFFF" valign="middle" align="center">sleep</td> <td bgcolor="#00FFFF" valign="middle" align="center">CompSci 110</td> <td bgcolor="#00FFFF" valign="middle" align="center">breakfast</td> <td bgcolor="#00FFFF" valign="middle" align="center">CompSci 110</td> <td bgcolor="#00FFFF" valign="middle" align="center">running</td> </tr> <tr> <th bgcolor="#00FF00" align="right"><small>10:00</small></th> <td rowspan="2" bgcolor="#00FFFF" valign="middle" align="center">breakfast</td> <td rowspan="2" bgcolor="#00FFFF" valign="middle" align="center">CompSci 108</td> <td rowspan="2" bgcolor="#FF00FF" valign="middle" align="center"><strong>free</strong></td> <td rowspan="2" bgcolor="#00FFFF" valign="middle" align="center">CompSci 108</td> </tr> <tr> <th bgcolor="#00FF00" align="right"><small>11:00</small></th> </tr> <tr> <th bgcolor="#00FF00" align="right"><small>12:00</small></th> <td valign="middle" bgcolor="#00FFFF" align="center">lunch</td> <td valign="middle" bgcolor="#00FFFF" align="center">lunch</td> <td valign="middle" bgcolor="#00FFFF" align="center">lunch</td> <td valign="middle" bgcolor="#00FFFF" align="center">lunch</td> <td valign="middle" bgcolor="#00FFFF" align="center">lunch</td> </tr> <tr> <th bgcolor="#00FF00" align="right"><small>1:00</small></th> <td rowspan="5" bgcolor="#FF00FF" valign="middle" align="center"><strong>free</strong></td> <td rowspan="5" bgcolor="#FF00FF" valign="middle" align="center"><strong>free</strong></td> <td rowspan="5" bgcolor="#FF00FF" valign="middle" align="center"><strong>free</strong></td> <td rowspan="5" bgcolor="#FF00FF" valign="middle" align="center"><strong>free</strong></td> <td rowspan="5" bgcolor="#FF00FF" valign="middle" align="center"><strong>free</strong></td> </tr> <tr> <th bgcolor="#00FF00" align="right"><small>2:00</small></th> </tr> <tr> <th bgcolor="#00FF00" align="right"><small>3:00</small></th> </tr> <tr> <th bgcolor="#00FF00" align="right"><small>4:00</small></th> </tr> <tr> <th bgcolor="#00FF00" align="right"><small>5:00</small></th> </tr> </table>
Making tables into Documents

In order to verify your table is correctly formed, you should view it using an appropriate program. In order for most programs to interpret this code correctly, you should include some header and footer code that identifies the type of document. For HTML, this is shown below:

<html>
<body>

<!--- your table code goes here --->

</body>
</html>
Resources

For more detail on the options available when creating tables using the Hypertext Markup Language, see these resources: