Tables
Tabular tables are a great way to display a large amount of information in an organized, visual format. To create a table in HTML, you need four elements:
| <table> | <tr> | <th> | <td> |
|---|---|---|---|
| starts a table | specifies a table row, all of the table data that goes into a table row is nested inside the <tr> | contains one cell in the heading of a table; must be inside a table row | contains one data cell in a table; must be included in a table row |
Look at the following code.
<table cellspacing="0">
<tr>
<th> Monday </th>
<th> Tuesday </th>
<th> Wednesday </th>
<th> Thursday</th>
</tr>
<tr>
<td> Math Test </td>
<td> History Project </td>
<td> Science Quiz</td>
<td> No Homework</td>
</tr>
</table>
Now look at the table it produces.
| Monday | Tuesday | Wednesday | Thursday |
|---|---|---|---|
| Math Test | History Project | Science Quiz | No Homework |
Special Table Tips
- When you need to leave a row blank so that all of your data cells line up, type in <td></td>.Since there isn't any text inside the tags, that space will be left empty.
- If you want to move the Headings down the left side of the table, make the <th> the first item in each row:
<table>
<tr>
<th>text</th>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<th>text</th>
<td>text</td>
<td>text</td>
<td>text<td>
</tr>
<tr>
<th>text</th>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>