HTML Tutorials: Table Styles
How to add various table styles such as dash or dot borders,
and many other things.
First, make the table you want to dress up.
<table width="330" cellpadding="0" cellspacing="4">
<tr>
<td>
This is the table
we are going to pimpify.
</td>
</tr>
</table>
The next step is to add you elements of style. You need
to add something like this to your <td> tag:
style="border-top:1px #000000
dashed;border-bottom:1px #000000
dashed;border-right:1px #000000
solid;border-left:1px #000000 solid;"
Using something like the above code would give you a border
like my table on the bottom of the page. There are a
few different options you can play around with though.
Here is a quick run down of some other styles.
borders - affects whether or not the
border is shown:
You can use them for all different sides. Such
as:
border-top
border-right
border-bottom
border-left
border-width set the width, use the
below:
border-top-width
border-right-width
border-bottom-width
border-left-width
border-style set the style of the border:
border-top-style
border-right-style
border-bottom-style
border-left-style
border-color no surprise here, set the
color:
border-top-color
border-right-color
border-bottom-color
border-left-color
You can add different border types, including dotted, dashed,
or just solid. Say, if you want a table with only left
and right blue borders, one dotted and one dashed you'd
use something like this:
style="border-right:1px
#0066CC dashed;
style="border-left:1px
#0066CC dotted;
Now all thats left to do is put it all to use. After you
make the code, make sure you preview it, because it is
easy to mess up. Try something like:
This table was made with
this code:
<table>
<tr>
<td style="border-top:1px
#000000 dashed;border-bottom:1px #000000 dashed;border-right:1px
#000000 solid;border-left:1px #000000 solid;">
This table was
made with this code:
</td>
</tr>
</table> |
|
