Web Page Design Boot Camp

  Home |  Basics |  Intermediate |  Advanced |  Tools |  Site Map    Subtopics:

Using Tables

Tables give you a way to format information as rows and columns. There are four pairs of tags that are used in creating tables in HTML documents. They are:

<table></table>
Marks the beginning and the end of the table.
<tr></tr>
Marks the beginning and end of a table row.
<td></td>
Indicates a cell within a table. A cell can contain text or images.
<th></th>
A table header. Similar to the <td></td> tag set, it indicates a table cell used as a column heading. Heading text is normally displayed in boldface and centered in the cell.

Here is the HTML for a simple table with three rows and two columns is shown below.

This HTML... Produces this... 
<table>
<tr>
   <td>Harrison County</td>
   <td>Clarksburg</td>
</tr>
<tr>
   <td>Marion County</td>
   <td>Fairmont</td>
</tr>
<tr>
   <td>Monongalia County</td>
   <td>Morgantown</td>
</tr>
</table>
Harrison County Clarksburg
Marion County Fairmont
Monongalia County Morgantown
Indenting of tags as shown above is not required, but it does make the HTML more readable by clearly marking the beginning and end of table rows.

Table Borders

You can have tables displayed with border lines separating the individual table cells. This is done using the border=n parameter in the <table> tag where n is a number from 0 through 2. A border of zero displays no border.

<table border=1> <table border=2>
Harrison County Clarksburg
Marion County Fairmont
Monongalia County Morgantown
Harrison County Clarksburg
Marion County Fairmont
Monongalia County Morgantown