HTML Tables - Lesson 5

There are many times in web development when you may need to use tables to display information. Templates of basic sites can be made with tables to hold the various sections on the page, but most of the time they are used in the usual way.

You define a table with the <table> tag. However, within this tag there are others including <tr> and <td>. The TR tag, divides the table into rows (think of TR as table rows). The TD tag divides the table into data cells (think of this one as table data). This data cell can contain not just text, but images, links, forms etc. So, let's take a look at the code for making a basic table.

<table border="1">
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>

The first line begins the table, and also sets the border size, within the table tag. Then we see two different rows, with two cells in each, which will give four data cells. Try it in your browser.

You don't have to define a border. If you don't, you will just see the text (or whatever's in your data cells).

Next we'll look at making a header in a table. Most of the time you will need headers along the top row of cells. To do this, we use the TH tag (table header), which centers and bolds the text in the cell. Remember the TH tag must be within a TR tag, because the text will need to be in a row of its own.

<table border="1">
<tr>
<th>First Header</th>
<th>Second Header</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>

Now you know how to use tables. Remember to try using images and hyperlinks within tables too. It's possible to make a navigation bar with a table and lots of hyperlinks, also.