The University of Texas at Austin- What Starts Here Changes the World
Services Navigation


Building a Simple Table

(3 rows by 3 columns)

How table appears in browser:

Menu for Monday
Breakfast Lunch Dinner
eggs sandwich steak
migas burger grilled salmon

HTML source code:

<table>

<caption>menu for Monday</caption>

<tr>
<th>Breakfast</th>
<th>Lunch</th>
<th>Dinner</th>
</tr>

<tr>
<td>eggs</td>
<td>
sandwich</td>
<td>
steak</td>
</tr>

<tr>
<td>
migas</td>
<td>
burger</td>
<td>
grilled salmon</td>
</tr>

</table>

Reading the HTML Source Code

As you look over the above HTML code, consider the tags as parenthetical pairs in that they are opened and closed in order. All tables are opened with the <table> tag and closed with the </table> tag (all closing tags begin with a /).

All tables should have a <caption>tag which gives a short title for the table and is closed with </caption>

All tables have at least one row, the <tr> (table row) tag starts the row and the </tr> tag ends the row. All tables also have at least one column, the <td> (table data) tag starts the column (also referred to as a table cell) and the </td> tag ends the column. All <td> tags must be within <tr> tags and all <tr> tags must be within <table> tags.

If you want the first row in your table to be a header row, then you would use the <th> (table header) tags instead of the <td> tags. By default, data in the <th> tags will be bold and centered within the cell.

Proceed to using scope.


  Updated 2008 January 14
  Copyright | Privacy | Accessibility
  Comments to TeamWeb