SEARCH
  Tutorials HTML and CSS Tutorials Table Properties

Table Properties

1. Ever wonder how to get your table border as thin as 1px but when you se border="1" and it looks like 2 or 3 px wide? Well here's how. First within the table tag we will add a CSS code (Cascading Style Sheet). To do this we add style=" " parameter.

<table cellpadding="0" cellspacing="0" border="0" width="250" align="center">
<tr>
<td style="border-top:1px #FFFFFF solid; border-bottom:1px #FFFFFF solid; border-right: 2px #FF0000 dashed;border-left:2px #FF0000 dashed;"><br>Text Here<br></td>
</tr>
</table>

So the above code will output the following.


  Text Here

2. One other neat effect is you can make your table look like its 3D and popping out of your webpage. Basically we make the borders solid and make the line width 3px (2px will prolly work also). Here's how:

<table cellpadding="0" cellspacing="0" border="0" width="250" align="center">
<tr>
<td style="border-top:3px #E6E6E6 solid; border-bottom:3px #595959 solid; border-right: 3px #595959 solid; border-left:3px #E6E6E6 solid;"><br>Text Here<br></td>
</tr>
</table>

That above code will output:


   Text Here


There you have it, some neat effects you can add to your websites table to make them even cooler.

subscribe to newsletter