3 : Table Borders and Alignment

The previous page shows a basic table with some attributes.
Here is a table with NO attributes, containing only the prime elements.

Table 2 Cell 1A Cell 2A Cell 3A CELL 1B CELL 2B CELL 3B

Table 2 Code <table> <tr> <td>Cell 1A</td> <td>Cell 2A</td> <td>Cell 3A</td> </tr> <tr> <td>CELL 1B</td> <td>CELL 2B</td> <td>CELL 3B</td> </tr> </table>

In the table above there are no borders, and that the default alignment on the page is to the left.
Now let's add a border and align the table to the right:

Table 3 Cell 1A Cell 2A Cell 3A CELL 1B CELL 2B CELL 3B

Table 3 Code <table border=1 align=right> <tr> <td>Cell 1A</td> <td>Cell 2A</td> <td>Cell 3A</td> </tr> <tr> <td>CELL 1B</td> <td>CELL 2B</td> <td>CELL 3B</td> </tr> </table>

Now you know two attributes (seen above in red) which you can add to the opening <table> tag.

• The "align" attribute positions the table horizontally on the LEFT, RIGHT, or CENTER of the space provided (for example: on a web page, or in a table cell.)
  The default alignment is LEFT.
• The "border" attribute has a number which represents the size, in pixels, you want the outside border to be. Any number larger than 0 also shows the borders around each cell (the cell "walls" if you will).
  The default border setting is 0.

The following table shows the difference between the table border and the cell walls:

Table 4 Cell 1A Cell 2A Cell 3A CELL 1B CELL 2B CELL 3B

Table 4 Code <table border=10 bordercolor=red align=center> <tr> <td>Cell 1A</td> <td>Cell 2A</td> <td>Cell 3A</td> </tr> <tr> <td>CELL 1B</td> <td>CELL 2B</td> <td>CELL 3B</td> </tr> </table>

In Table 4 the border is set to 10 pixels. Notice how the width of the "cell walls" didn't change? Only the outer border width of the table is controlled by the border attribute.
To further highlight the border, I added another attribute to the <table> tag: bordercolor. Depending on which browser you are using, just the outer border of the table will appear red, or all the cell borders will appear red.

• You can specify any browser compatible color (see the chapter on "Using Color in Web Pages") in the bordercolor attribute.
• The default bordercolor is GRAY.

So what if you want to increase the size of the cell walls instead of or in addition to increasing the outer border size?
To do that you need to use the cellspacing attribute.
Here you can see the effect of adding cellspacing to Table 4:

Table 5 Cell 1A Cell 2A Cell 3A CELL 1B CELL 2B CELL 3B

Table 4 Code <table border=10 bordercolor=red align=center> . . . </table> Table 5 Code <table border=10 bordercolor=red align=center cellspacing=9> . . . </table>

Page 3