1. Home
  2. Computing & Technology
  3. Web Design / HTML

Using HTML Tables - Advanced Attributes
Getting the Most Out of HTML Tables

By , About.com Guide

cols

NOT VALID
This is an invalid attribute, and is only loosely supported by some browsers. There is no alternative to it.

frame

This attribute modifies the lines that surround the table. The default is box, or all four sides. The other options are void which removes all lines, above, below, rhs, and lhs put lines on the top, bottom, and sides. hsides draws lines on the top and bottom (horizontal) and vsides draws the left and right sides.

<table frame="below">
<tr><td style="font-size : 10pt;">This table has a frame on the bottom.</td></tr>
</table>

View

height

NOT VALID
The height attribute sets the minimum height for a table, but it is not valid XHTML. Instead, you should use CSS to determine the height.

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

View

hspace and vspace

NOT VALID
These attributes add additional space to the sides of the table. However, this is best set with the margin style property.

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

View

nowrap

NOT VALID
The nowrap attribute allows you to force a table to be wider than the width of the browser window, even if it would normally wrap there. This is an invalid attribute, but can be replaced with the white-space style property. You must use this style on each cell, rather than the table as a whole. The text will only wrap to a new line when there is a br or p tag.

<table border="1">
<tr><td style="white-space: nowrap;">This table cell has been set to not wrap.</td></tr>
</table>

View

style

This tag creates an inline style for the table, overriding any other style rule in effect.

rules

This attribute determines which borders will appear between cells. You can choose rows (rows), columns (cols), none or all. The default is none.

<table style="width:50%;" rules="rows">
<tr>
<td style="font-size : 10pt;">This 4x4 table has</td>
<td style="font-size : 10pt;">the rows not columns</td>
</tr>
<tr>
<td style="font-size : 10pt;">outlined with the</td>
<td style="font-size : 10pt;">rules attribute.</td>
</tr>
</table>

View

valign

NOT VALID
This attribute sets the vertical alignment of the cells in the table. It is better to use the vertical-align style to get this effect. However, you have to set it on every cell in the table, rather than the table as a whole.

<table border="1">
<tr><td style="vertical-align: bottom;">The text in this cell will be aligned at the bottom of the cell.</td>
<td>This cell will be normal</td></tr>
</table>

View

width

If you want your table to have a pre-set width, then you should use the width attribute. You can also use style sheets - either is valid, but you have a little more control using style sheets.

<table width="80%" border="1">
<tr><td>This table is 80% of the width of the container it's in.</td></tr>
</table>

View

First page > Basic Table Attributes > Page 1, 2

Previous Features

Explore Web Design / HTML
About.com Special Features

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

  1. Home
  2. Computing & Technology
  3. Web Design / HTML
  4. HTML and XHTML
  5. XHTML
  6. Tables
  7. Advanced HTML Table Attributes - Getting the Most Out of HTML Tables>

©2009 About.com, a part of The New York Times Company.

All rights reserved.