RESOURCES :: Mini Tutorials:: Table Border using CSS

Setting a class or ID for table border:

This goes in your stylesheet:

.borderTable { padding: 2px 4px 2px 4px; border: 1px solid #660000; }

OR directly on your page:

Cut this code and paste it directly before the closing </head> tag of your pages code. The </head> is near the top of the page in code view.

<style type="text/css">
<!--
.borderTable {
padding: 2px 4px 2px 4px;
border: 1px solid #660000;
}
-->
</style>

and apply to the table

<table class="bordertable">

Table Markup:

<table border="0" cellpadding="0" cellspacing="0" class="borderTable">
<tr><td>Table Cell 1</td>
</tr>
<tr><td>Table Cell 2</td>
</tr>
</table>

Table looks like this:

We have given the table a 1px border.
Top and bottom padding of 2px
Left and right padding of 4px

A class may be used as many times as you like on a page.

Setting an ID for table border:

This goes in your stylesheet:

#borderTable { padding: 2px 4px 2px 4px; border: 1px solid #990066; }

OR directly onto your page:

Cut this code and paste it directly before the closing </head> tag of your pages code. The </head> is near the top of the page in code view.

<style type="text/css">
<!--
#borderTable {
padding: 2px 4px 2px 4px;
border: 1px solid #660000;
}
-->
</style>

and apply to the table

<table id="bordertable">

Tutorial Home >>

Table markup:

<table border="0" cellpadding="0" cellspacing="0" id="borderTable">
<tr><td>Table</td>
</tr>
</table>

Table looks like this:

We have given the table a 1px border.
Top and bottom padding of 2px
Left and right padding of 4px

An ID can only be used once per page.