Creating Tables

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

各种各样的表r 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 and tags in your HTML document. Begin your table with the following tag:

<表>

Each horizontalrowin a table begins with the tag:

And, each piece ofdatawithin the row begins with the tag:

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:

<表>starts the table

starts the first row

starts the first "cell" of data (A1)

closes the A1 cell

starts the second cell (A2)

closes the A2 cell

closes the first row

starts the second row

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

closes the B1 cell

starts the B2 cell

closes the B2 cell

closes the second row

starts the third row

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

closes the C1 cell

starts the C2 cell

closes the C2 cell

closes the third row

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 aborderto the skeleton table. Aborderis the outline of a table. Theborder 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:

 A1  A2  
 B1  B2  
 C1  C2

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.