HTML TABLE:
You are probably aware from your work with a word processor or a spreadsheet program what a table is. If not then a table is an arrangement of horizontal rows and vertical columns which may vary in height and width. The intersection of a row with a column is called a cell. The layout of a table in a word processing pages or spreadsheet program is controlled by tabbing (using the tab key on the computer) between the various columns and rows.
A table in HTML is not difficult to create and by now you you might have an idea of the tags to be used. A table in HTML begins with <table> and ends with a </table>. In between these two tags we use additional tags to signify the beginning and end of a table row and the beginning and end of a table cell.
- <tr>
- is used to to show the start of a new row within the table
- </tr>
- signifies the end of a table row.
- <td>
- is used to show the start of a table cell.
- </td>
- shows the end of a table cell.
The following text will produce a table of fruits and vegetables:
<table>
<tr><td>Fruit</td><td>Vegetable</td></tr>
<tr><td>Apple</td><td>Carrot</td></tr>
<tr><td>Orange</td><td>Pea</td></tr>
<tr><td>Pear</td><td>Turnip</td></tr>
</table>
This HTML will be displayed as:
| Fruit | Vegetable |
| Apple | Carrot |
| Orange | Pea |
| Pear | Turnip |
We can improve the appearance of this table by using tags to indicate that the first row of the table contains headings.
- <th>
- indicates the beginning of a header cell
- </th>
- indicated the end of a header cell
So if we replace the <td>...</td> in the first row of the above table with <th>...</th> like this:
<tr><th>Fruit</th><th>Vegetable</th></tr> we will get the following:
| Fruit | Vegetable |
|---|---|
| Apple | Carrot |
| Orange | Pea |
| Pear | Turnip |
Note: the head cells have their text presented in a bold type face and centred within the cell.
Tables are used a lot in the construction of Web pages where they are used to control the layout of the page. For example keeping a logo at the top left of a Web page and a navigation bar at the bottom of the page – such as this Web page.
All Web browsers will allow you to view the source coding of the Web page you are viewing (if you are using Internet Explorer this can be found by clicking on the View option on the menu bar and selecting Source option. The HTML coding of the page will be shown in a separate Notepad window. have a look at your favourite Web site’s source code – it will still look very scary but you should be able to see the coding used to specify that a table is being used.
