|
Sometimes you will wish to add borders to tables to give it a definitive edge.
Now there are 3 ways that you can do this:
Using the "BORDER" Attribute
This is the most simple way of adding a border to a table. You can place a
'border = "x"' within the starting <table> tag to quickly add a border to
your table, where x is the measurement required (e.g. 1px). Quick and easy as
this may be, the border added is very ugly, and therefore is not the best option.
The actual appearance of a table using the "BORDER" attribute is shown to
the right under "Default Border".
Using "BGCOLOR" and "CELLSPACING"
One better way of adding borders to tables is to use the "BGCOLOR" and "CELLSPACING"
attribute. By setting the background of the table to 1 color, the background
of the cell to another color, and the cellspacing to any value except 0, you
are in effect creating a border for the table. For example:
<table bgcolor = "#C0C0C0" cellspacing = "1px">
<tr bgcolor = "#FFFFFF">
<td>
<!-- Cell Content Here -->
</td>
</tr>
</table>
|
This code would add a grey (#C0C0C0) border that is 1 pixel thick around the
table - an image of this table can be seen to the right.
Using Images
Adding a simple border to a table can be achieved by the method outlined above.
However if you want more attractive tables you will need to start using images.
This is far more complex than the 2 methods used above and you will first need to
familiarize yourself with how to add background images to tables.
When using images to create a background you will need to think which part
will have set height and which part varies. For example in the image of the
"Simple Image Border", the top and bottom of the image are the only parts that
are set. As the part in the middle can vary, i.e. the border for this part is
added by creating an image that can repeat itself. The 3 images required to
create this table is shown below:
Now all you need to do is create a table with 3 rows, each with the appropriate
background image. Note that the browser will automatically make the image repeat
itself both horizontally and vertically to fill the background space. If you want
a more complex layout within the table you can add an additional table within the
table.
[
Back to HTML Tutorials ]
|
