[click to go to previous page] [to index page] [to next page]

3 : Table Borders and Alignment

previous page

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>
         

next
[click to go to previous page] [to index page] [to top of this page] [to next page]

Copyrightę 1998. Liberty Miller . All rights reserved.
This material may not be reproduced without the written permission of the author.
Last modified 01/04/99 23:27:50

Page 3