Adding borders to a table

To draw a border around a table, use the border attribute for the <table> tag. This turns on borders around the whole table and around all the cells in the table. Specify the border width in pixels. For example:

<table border="1">
<tr>
<th>Fruits<th>Vegetables
<tr>
<td>Apples<td>Celery
<tr>
<td>Oranges<td>Carrots
</table>

The value of the border attribute tells the browser how thick to make the border. Note the border width only affects the outside border of the table, not the borders around the cells.

The frame and rules attributes in the <table> tag let you control how the table border is drawn. These attributes are part of the new HTML 4 specification.

You can use the rules attribute to draw borders around rows (rules="rows"), around columns (rules="cols") or around all the cells (rules="all"). You can also to remove all borders (rules="none"):

The frame attribute allows you to:

• Draw a box around the table (frame="box")
• Remove the table border entirely (frame=void)
• Draw a border at the top, bottom, the left or right hand side (frame="above|below|lhs|rhs")
• Draw top and bottom borders (frame="hsides") and left and right borders (frame="vsides")

Here are the examples:

You can combine the two effects: