Table Attributes

The basic table tags have many attributes. Here are a few of them. There are also two more tags to add to your collection.

You may also style tables by adding style definitions to your style sheet. In general, CSS styles will override the HTML attributes.

The <table> Tag

The opening table tag has many attributes that effect the entire table. A brief list follows.

  • summary="Text explanation of the table" is much like the alt attribute in the img tag. It is a written explanation of the structure of the table. Some text readers have difficulty cogently reading columns of text in a table; this summary attribute helps the user make sense of it.
  • border="n" where n is an integer (or whole number) expressing the number of pixels desired in the border around the entire table and between the cells.
  • cellspacing="n" where n is the distance in pixels between the cells of the table.
  • cellpadding="n" where n is the distance in pixels between the cell contents and the cell walls.
  • width="n" where n is the width of the table in pixels or width="n%" - n percent of the width of the browser window. The table will not size itself smaller than its contents no matter which way you have specified the width.
  • align="x" (depricated) where x is left, center, or right. If you do not specify the align attribute, the table will align to the left and act as a block element. The center value also makes the table act as a block element. The left or right values act much as they did with images; the table will align to one side and the text and other elements will wrap around the table.
  • bgcolor="name or number" allows you to specify the background color of the table using the predetermined color names or hex numbers. Remember that this is old school, CSS is the preferred method.

Here is an example of a table using all the attributes listed above.

This table's <table> tag code is in the cell below.
<table
summary="A two rowed table holding text explaining the attributes of this table."
border="3"
width="500"
cellspacing="5"
cellpadding="5"
bgcolor="#99FFFF"
align="center">

The <tr> Tag

Attributes applied to the table row tag effect all of the cells in the roe. They should override duplicate attributes in the table tag. Use the following attributes.

  • align="x" - The align attribute specifies the horizontal alignment of the contents of the table's cells in the row. Your choices are left, center, and right. The default is left.
  • valign="x" - Vertical alignment in the table cells is specified by the valign attribute. Your choices are top, middle, and bottom. The default is middle.
  • bgcolor="name or hex value" - You may change the value of the row to a different color than the whole table.

The example below has the table row tag contents revealed.

align <tr align="center">






valign		 <tr valign="bottom">
bgcolor <tr bgcolor="#FFCCFF">
Altogether now!



 <tr bgcolor="#FFFF99" align="right" valign="top">

The <td> Tag

You may use the same attributes as those used in the table row tag plus some more. Here are the usual suspects and a few more. These attributes applied to the table cell will override similar attributes specified in the table and table row tags.

  • align="x" - The align attribute specifies the horizontal alignment of the contents of the cell. Your choices are left, center, and right. The default is left.
  • valign="x" - Vertical alignment of the cell is specified by the valign attribute. Your choices are top, middle, and bottom. The default is middle.
  • bgcolor="name or hex value" - You may change the value of the cell to a different color than the whole table or row.
  • rowspan="n" where n is the number if rows you want the cell to span. This allow tables that differ from the usual complete grid of rows and cells. The example below will provide visual illumination.
  • colspan="n" where n is the number of columns you wish the cell to span. See the example below.
  • nowrap - just use the attribute nowrap to make stop text from wrapping in a cell. This is an attribute that has no value associated with it.
  • width="n" where n is the width of the cell in pixels or width="n%" - n percent of the width of the whole table. The cell will not size itself smaller than its contents no matter which way you have specified the width.
<td colspan="2" bgcolor="#FFCCFF"> Notice how the colspan attribute allows this cell to span the two columns below. Row one, cell three
Row two, cell one Row two, cell two <td rowspan="2" bgcolor="#FFFF99"> This table cell tag uses the rowspan attribute to span the two adjacent rows.
Row three, cell one Row three, cell two

Two More Tags

The <th> Tag

The table heading tag is very similar to the table cell tag; it is always between the table row tags and displays text. It has a different default state; text is bold and centered horizontally and vertically in the cell. It is very useful for a bold heading at the top of the columns or on the side of rows. Attributes are rarely used in a table heading tag; if you need the attribute, use a table cell tag.

Multiply
Me!		 2 4 6 8
1 2 4 6 8
3 6 12 18 24
5 10 20 30 40
7 14 28 42 56

The <caption> Tag

The caption tag is the exception to the rule with table tags. It contains visible items but is not contained by a table row or cell. It will place a caption above or below your table and center the contents of the caption.

Use align="top" or align="bottom" as attributes for the caption tag. Values of left or right are defined; I haven't found a browser that supports them yet.

Here is the code for a simple table with a caption on the bottom and the result is shown below. The caption tag pair usually comes after the initial table tag and before the initial table row tag.

<table summary="simple table with caption"
border="3" width="400" cellspacing="5" cellpadding="5" align="center" bgcolor="#99FFFF">
    <caption align="bottom">Some Cheese Flavors</caption>
  <tr>
    <td>Jack</td>
    <td>Cheddar</td>
    <td>Gouda</td>
  </tr>
  <tr>
    <td>Brie</td>
    <td>Colby</td>
    <td>VelVita®</td>
  </tr>
</table>

Some Cheese Flavors
Jack Cheddar Gouda
Brie Colby VelVita®

Summary

The attributes listed above are just a few of the ones available for your use. Try them out and you will find them easier than you think.

bottom graphic for DM 60A pages