Using HTML TABLE Element Attributes

Getting the Most Out of HTML Tables By Learning Table Attributes

HTML table attributes give you a lot more control over HTML tables. There are a lot of attributes available to tables to make them more interesting and change the look of your page.

HTML TABLE Element Attributes

In HTML5 the element uses the global attributes and one other attribute: . And it has changed to only have the value of 1 or empty (i.e. border=""). If you want to change the width of the border, you should use the border-width CSS property.

See below to learn about the valid HTML5 table attributes.

There are also several attributes that are part of the HTML 4.01 specification that have become obsolete in HTML5:

  • —Use the CSS padding property on the table's TD and TH elements.
  • —Use the CSS property border-spacing on the table.
  • —Use CSS styles border-color: black; and border-style on the table.
  • —Use CSS styles border-color: black; and border-style on the appropriate elements of the table.
  • —Instead, you should describe the structure of the table in a CAPTION or put the entire table in a FIGURE and describing it in a FIGCAPTION. Alternatively, you could simplify the structure of the table so that no explanation is needed.
  • —Use the CSS width property.

And one attribute that was deprecated in HTML 4.01 and is also obsolete in HTML5.

Learn more about the HTML 4.01 TABLE Attributes.

  • align—Use the CSS margin property instead.

There are also several attributes that are not part of any HTML specification.

Use these attributes if you know that the browsers you support can handle them and you don't care about valid HTML.

  • —Use the CSS property background-color instead.
  • bordercolor—Use the CSS property border-color instead.
  • bordercolorlight—Use the CSS property border-color instead.
  • bordercolordark—Use the CSS property border-color instead.
  • cols—There is no alternative to this attribute.
  • height—Use the CSS property height instead.
  • —Use the CSS property margin instead.
  • —Use the CSS property margin instead.
  • —Use the CSS property white-space instead.
  • —Use the CSS property vertical-align instead.

Learn more about the Browser Specific TABLE Attributes.

HTML5 TABLE Element Attributes

As I mentioned above, there is only one attribute, beyond the global attributes, that is valid on an HTML5 TABLE element: border.

The border attribute is used to define a border around the entire table and all the cells within it. There was some question as to whether it would be included in the HTML5 specification, but it remained because it provided information about the table structure, beyond simply style implications.

To add the border attribute, you set the value to 1 if there is a border and empty (or leave off the attribute) if there is not. Most browsers will also support 0 for no border, and any other integer value (2, 3, 30, 500, etc) to declare the border's width in pixels, but this is obsolete in HTML5. Instead, you should use CSS border style properties to define the border width and other styles.

To create a table with a border, write:

<table border="1">
  <tr>
    <td>This is a table with a border</td>
  </tr>
</table>

The next page in this article describes the HTML 4.01 attributes that are obsolete in HTML5. If you plan on writing HTML 4.01 documents, you can learn them, otherwise, you can ignore them. Most of these attributes have alternatives, described above.

The previous page describes the attributes of the 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 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 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 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 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 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 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 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 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.

The previous page describes attributes of the HTML element that are valid in HTML 4.01, but are obsolete in HTML5.

This page describes TABLE attributes that are not valid in any current specification. If you don't care about whether your pages validate and your users use a browser that supports these elements, then you can use these elements. But most of them are either unsupported in modern browsers or have alternatives that are more standards-compliant.

I do not recommend using these attributes on your HTML tables.

The attribute is an old attribute that was included before CSS was widely supported. It allows you to change the background color of the table. You can set a color name or a hexadecimal code. This attribute still works in a lot of browsers, but for future-proofed HTML, you should not use it, and use CSS instead.

The better alternative to this attribute is the style property.

To change the background color of a table, write:

<table style="background-color: #ccc;">
  <tr>
    <td>This table has a grey background</td>
  </tr>
</table>

Similar to the bgcolor attribute, the bordercolor attribute lets you change the color of the attribute. This attribute is only supported by Internet Explorer. Instead you should use the border-color style property.

To change the color of your table's border, write:

<table border="1" style="border-color: red;">
  <tr>
    <td>This table has a red border.</td>
  </tr>
</table>

The bordercolorlight and bordercolordark attributes were included in Internet Explorer to allow you to create a 3D border around your table. However, as of IE8 and up, this is only supported in IE7 Standards Mode and Quirks Mode. Microsoft states that these properties are no longer supported.

For a short time, the cols attribute on the TABLE element was proposed to help browsers know how many columns a table had.

The premise was that this would help speed up the rendering of large tables. However it was only implemented by Internet Explorer, and as of IE8 and up, this is only supported in IE7 Standards Mode and Quirks Mode.

Because there is a width attribute (obsolete in HTML5) many people assumed there was a height attribute for tables as well. But because tables conform to the width of their content or the defined width in the CSS or width attribute, the height could not be constrained. So instead, browsers allowed the height attribute to define the minimum height of the table. If the table were taller than that height, it would display taller. But you should use the property

With the CSS height property you can constrain the height if you use the CSS property as well to define what happens with any excess content.

To set the minimum height on a table, write:

<table style="height: 30em;">
  <tr>
    <td>This table is at least 30 ems high.</td>
  </tr>
</table>

The two attributes and added space around the left/right sides (hspace) and top/bottom (vspace) of the table. You should use the style property instead.

To set the vertical space to 20 pixels and the horizontal space to 40 pixels, write:

<table style="margin: 20px 40px;"
  <tr>
    <td>This table has a vspace of 20 pixels and an hspace of 40 pixels.</td>
  </tr>
</table>

The attribute is a boolean attribute that defines whether the contents of the table should wrap at the edge of the parent element or window or force horizontal scrolling. Instead you should define the wrapping characteristics of each table cell using the CSS property.

To make a column with a lot of text not wrap, write:

<table>
  <tr>
    <td style="white-space: nowrap;">This is a column with a ton of content. But even if it is wider than the container the text should not wrap to the next line, but instead force the browser window to scroll horizontally to see all the content.</td>
  </tr>
</table>

Finally, the attribute defines how the contents of each cell should align vertically within the cell. Instead of this invalid attribute, you should use the CSS property on each cell you want to change the alignment of.

You won't notice the effects of this style unless the cell's contents is less than the available space created by other, larger cells.

To force a cell to align to the bottom (rather than the middle, as the default), write:

<table>
  <tr>
    <td>This cell is longer than the rest and so will force the height to be taller. So you will see that the vertically aligned cell is aligned to the bottom.</td>
    <td style="vertical-align: bottom;">Contents at bottom.</td>
    <td>Contents in middle.</td>
  </tr>
</table>