weballey logo
 
left Tables - borders backnext right
homesearchsite mape-mail
basics
expanding
sizing
colors
< borders >
alignment
nesting
navbar
quick recap
tags
epilogue
      Now let us have a closer look at the table borders. You already know border visibility is controlled by the BORDER attribute of the TABLE tag. Setting it to zero will hide it, setting it to one or higher, they will be visible. The higher values will only influence the appearance of the outer border.

<TABLE BORDER="10">
<TR><TD>cell 1</TD><TD>cell 2</TD><TD>cell 3</TD></TR>
</TABLE>

cell 1cell 2cell 3

    The space between cells can be set with the CELLSPACING attribute of the TABLE tag. If you don't use this attribute, the size will default to about three pixels wide. You can set it to whatever value you like. Often you won't want any space between the cells, like on this web page. Then you set it to zero.

<TABLE BORDER="1" CELLSPACING="10">
<TR><TD>cell 1</TD><TD>cell 2</TD><TD>cell 3</TD></TR>
</TABLE>

cell 1cell 2cell 3

    There is some space between the cell contents and its borders. Just to prevent the cell contents from colliding with the borders. This cell padding is about two pixels default. You can set it to a specific value with the CELLPADDING attribute of the TABLE tag. If you don't want any space between them, set this attribute to zero.

<TABLE BORDER="1" CELLPADDING="10">
<TR><TD>cell 1</TD><TD>cell 2</TD><TD>cell 3</TD></TR>
</TABLE>

cell 1cell 2cell 3

    When laying out web pages you will often set all these values to zero. This will give you tighter control over the exact size of tables and cells. If you don't set them, some browsers will add the (varying) default values to the table. When specifying the cells and table size exactly, things won't add up sometimes. Causing undesired shifting of your precious layout.

borders

goto top  
leftCopyright © Gerben Hoekstra - All rights reserved backnext right