1. Technology
Send to a Friend via Email

Using HTML TABLE Element Attributes

Getting the Most Out of HTML Tables By Learning Table Attributes

By

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 TABLE element uses the global attributes and one other attribute: border. 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:

  • cellpadding—Use the CSS padding property on the table's TD and TH elements.
  • cellspacing—Use the CSS property border-spacing on the table.
  • frame—Use CSS styles border-color: black; and border-style on the table.
  • rules—Use CSS styles border-color: black; and border-style on the appropriate elements of the table.
  • summary—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.
  • width—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.

  • bgcolor—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.
  • hspace—Use the CSS property margin instead.
  • vspace—Use the CSS property margin instead.
  • nowrap—Use the CSS property white-space instead.
  • valign—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.

©2014 About.com. All rights reserved.