| 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 |
<style type="text/css"> table { padding: 2; border-spacing: 3; } th { background: #00FF00; } th.time { text-align: right; font-size: small; } td { text-align: center; vertical-align: middle; } td.busy { background: #00FFFF; } td.free { background: #FF00FF; font-weight: bold; } </style> <table width="70%" align="center"> <tr> <th></th> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th> </tr> <tr> <th class="time">9:00</th> <td class="busy" ROWSPAN="3">sleep</td> <td class="busy">CompSci 110</td> <td class="busy">breakfast</td> <td class="busy">CompSci 110</td> <td class="busy">running</td> </tr> <tr> <th class="time">10:00</th> <td class="busy" ROWSPAN="2">breakfast</td> <td class="busy" ROWSPAN="2">CompSci 108</td> <td class="free" ROWSPAN="2">free</td> <td class="busy" ROWSPAN="2">CompSci 108</td> </tr> <tr> <th class="time">11:00</th> </tr> <tr> <th class="time">12:00</th> <td class="busy">lunch</td> <td class="busy">lunch</td> <td class="busy">lunch</td> <td class="busy">lunch</td> <td class="busy">lunch</td> </tr> <tr> <th class="time">1:00</th> <td ROWSPAN="5" class="free">free</td> <td class="free" ROWSPAN="5">free</td> <td class="free" ROWSPAN="5">free</td> <td class="free" ROWSPAN="5">free</td> <td class="free" ROWSPAN="5">free</td> </tr> <tr> <th class="time">2:00</th> </tr> <tr> <th class="time">3:00</th> </tr> <tr> <th class="time">4:00</th> </tr> <tr> <th class="time">5:00</th> </tr> </table>
Note, this example embeds the style sheet inside the HTML file using the style tag. It is a better practive to keep the HTML and the CSS in separate files, since it makes it easier to use the same style sheet for multiple HTML files or to have multiple styles for the same HTML page. To use a separate CSS file, include this line in the head of your HTML file:
<link href="my_style_sheet.css" type="text/css" rel="stylesheet" media="screen" />
Note, the style tag should be included in the head of the HTML page or be the first tag after body.
For more detail on the options available when using Cascading Style Sheets, see these resources: