How Web Pages Work

Creating Tables

Currently, one of the most widely used HTML tools for creating artfully arranged Web pages is the table. By mastering tables, you are no longer just "creating" a page, you are "designing" one.

The variety of tables at your disposal is extensive, ranging from a simple box to very complex design layouts. In this article we will discuss table basics, as well as a few tricks and hints for you to experiment with in your quest to design an exciting page that people will love to visit.

Again, as with all information you would like displayed in the browser window, make sure your table is between the <body> and </body> tags in your HTML document. Begin your table with the following tag:

<table>

Each horizontal row in a table begins with the tag:

<tr>

And, each piece of data within the row begins with the tag:

<td>

Consider the following table diagram:

A1 A2

B1 B2

C1 C2

Here we have three rows and two columns.

To code the skeleton of this diagram, the following tags are used in the following order:

<table> starts the table

<tr> starts the first row

<td> starts the first "cell" of data (A1)

</td> closes the A1 cell

<td> starts the second cell (A2)

</td> closes the A2 cell

</tr> closes the first row

<tr> starts the second row

<td> starts the first cell of data in the second row (B1)

</td> closes the B1 cell

<td> starts the B2 cell

</td> closes the B2 cell

</tr> closes the second row

<tr> starts the third row

<td> starts the first cell of data in the third row (C1)

</td> closes the C1 cell

<td> starts the C2 cell

</td> closes the C2 cell

</tr> closes the third row

</table> closes the table

Many designers like to indent portions of their tables to make the coding easier to read. An example of this is shown below.

Now we will add data and a border to the skeleton table. A border is the outline of a table. The border tag (border="value") is placed within the initial table tag. You can specify how thick you would like the outline to appear by assigning a particular value (we will assign a value of "1"). It's a good idea to experiment with different values to find out what they look like displayed in the browser. If you do not want a border to show, assign a "0" value.

(Note: Even if you are not planning to have a border appear around your table, it is always best to start with a visible border, at least until you work out any "bugs" that may be affecting the way your table is displayed.)

Type (or cut and paste) the following code and data into your HTML document:

<table border=1>   
<tr><td>A1    </td>    
<td>A2</td>   </tr>   
<tr><td>B1    </td>    
<td>B2</td>   </tr>   
<tr><td>C1    </td>    
<td>C2</td>   </tr>  
</table>

The table displayed in your browser should look a lot like the diagram shown earlier.

There are many attributes you can assign to a table. What follows is a discussion of the tags that will allow you to format your table in lots of creative ways.

In the next section we'll find out how to change the background color of the table.