The previous page describes the attributes of the TABLE element that are valid in HTML5 (and HTML 4.01). This page describes the TABLE attributes that are valid in HTML 4.01, but are obsolete in HTML5. If you still write HTML 4.01 documents, you can use these attributes, but most of them have alternatives that will make your pages more future-proofed for when you do move to HTML5.
Valid HTML 4.01 Attributes
The border attribute I described on the previous page. The only difference in HTML 4.01 from HTML5 is that you can specify any whole integer (0, 1, 2, 15, 20, 200, etc.) to define the width of the border in pixels.
To build a table with a 5px border, write:
<table border="5">
<tr>
<td>This table has a 5px border.</td>
</tr>
</table>
See an example of two tables with borders.
The cellpadding attribute defines the amount of space between cell borders and the contents of the cell. The default is two pixels. Set the cellpadding to 0 if you want no space between the contents and borders.
To set the cell padding to 20, write:
<table cellpadding="20">
<tr>
<td>This table has a cellpadding of 20.</td>
</tr>
<tr>
<td>Cell borders will be separated by 20 pixels.</td>
</tr>
</table>
View an example of a table with cellpadding
The cellspacing attribute defines the amount of space between the table cells and the cell content. Like cellpadding, the default is set to two pixels, so you must set it to 0 if you want no cell spacing.
To add cell spacing to a table, write:
<table cellspacing="20">
<tr>
<td>This table has a cellspacing of 20.</td>
</tr>
<tr>
<td>Cells will be separated by 20 pixels.</td>
</tr>
</table>
See a table with cellspacing
The frame attribute identifies which portions of the border surrounding the outside of a table will be visible. You can frame your table on all four sides, any one side, top and bottom, left and right, or none.
Here is the HTML for a table with only the left side border:
<table border="1" frame="lhs">
<tr>
<td>This table</td>
<td>will have</td>
</tr>
<tr>
<td>only the</td>
<td>left side framed.</td>
</tr>
</table>
And another example with the bottom frame:
<table border="1" frame="below">
<tr>
<td>This table has a frame on the bottom.</td>
</tr>
</table>
Check out some tables with frames
The rules attribute is similar to the frame attribute, only it affects the borders around the cells of the table. You can set rules on all the cells, between columns, between groups like TBODY and TFOOT or none.
To build a table with lines only between the rows, write:
<table border="1" rules="rows">
<tr>
<td>This 4x4 table has</td>
<td>the rows not columns</td>
</tr>
<tr>
<td>outlined with the</td>
<td>rules attribute.</td>
</tr>
</table>
And another with lines between the columns:
<table border="1" rules="cols">
<tr>
<td>This is</td>
<td>a table</td>
<td>where the </td>
</tr>
<tr>
<td>columns</td>
<td>are</td>
<td>highlighted</td>
</tr>
</table>
Here is an example of a a table with rules
The summary attribute provides information about the table for screen readers and other user agents that might have trouble reading tables. To use the summary attribute, you write up a brief description of the table and put that as the value of the attribute. The summary won't display on the web page in most standard web browsers.
Here is how to write a simple table with a summary:
<table summary="This is a sample table that contains filler information. The purpose of this table is to demonstrate a summary.">
<tr>
<td>column 1 row 1</td>
<td>column 2 row 1</td>
</tr>
<tr>
<td>column 1 row 2</td>
<td>column 2 row 2</td>
</tr>
</table>
View a table with a summary
The width attribute defines the width of the table in either pixels or as a percentage of the container element. If the width is not set, the table will take up only as much space as it needs to display the contents, with a maximum width the same as the width of the parent element.
To build a table with a specific width in pixels, write:
<table width="300">
<tr>
<td>This table is 80% of the width of the container it's in.</td>
</tr>
</table>
And to build a table with a width that is a percentage of the parent element, write:
<table width="80%">
<tr>
<td>This table is 80% of the width of the container it's in.</td>
</tr>
</table>
See an example of a table with a width
Deprecated HTML 4.01 TABLE Attribute
There is one attribute of the TABLE element that is deprecated in HTML 4.01 and obsolete in HTML5: align. This attribute lets you set where the table should be located on the page relative to the text that is beside it. This attribute has been deprecated in HTML 4.01, and you should avoid using it. Instead, you should use the float CSS property or the margin-left: auto; and margin-right: auto; styles. The float property gives you a result that is closer to what the align attribute provided, but it can affect the way the rest of the page contents display. The margin-right: auto; and margin-left: auto; are what the W3C recommends as an alternative.
Here is a deprecated example using the align attribute:
<table align="right">
<tr>
<td>This table is right aligned</td>
</tr>
<tr>
<td>Text flows around it to the left</td>
</tr>
</table>
See a deprecated example using the align attribute.
And to get the same effect with valid (non-deprecated) HTML, write:
<table style="float:right;">
<tr>
<td>This table is right aligned</td>
</tr>
<tr>
<td>Text flows around it to the left</td>
</tr>
</table>
See a valid example
The next page in this article explains TABLE attributes that are not part of any HTML specification.
