[an error occurred while processing this directive]
Go to Bottom Nav - November 24, 2017 - No exercises at this time - ERRORblah Happy Holidays and Semester Break!

Note: Many of these attributes are depricated for XHTML Strict and HTML5 but you may run into them on legacy coded pages. CSS is required for table formatting instead of HTML attributes to validate the pages when using XHTML strict and HTML5.

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 must 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 attributes that effect the 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.

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."
style="border:outset 3px black; width:500px; background-color:#99FFFF; margin:10px auto;" >

The <tr> Tag

Some styles applied to the table row tag effect all of the cells in the row. Use the following style.

  • style="background-color:color name or color value"

The example below has the table row tag contents revealed.

Table cell Another table cell
style="background-color:name or color value" <tr style="background-color:#FFCCFF;">

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.

  • style="background-color: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.
<td colspan="2"> 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" > 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/styles 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.

Heading One
Ut pharetra, ante eget imperdiet ullamcorper, tortor nunc sollicitudin orci, non cursus neque nisl eget ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, nibh in suscipit interdum, velit magna volutpat turpis, at ornare sem magna et tellus. Sed pulvinar facilisis ligula, id vehicula eros sollicitudin a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Heading Two
Vivamus vestibulum, augue id iaculis sodales, odio odio feugiat arcu, scelerisque congue nisi ipsum vitae orci. Nunc sed ligula quam. Cras sed iaculis neque. Proin ultricies consectetur tortor, eu pulvinar sapien commodo ac. Cras diam arcu, lacinia id mattis ut, convallis sed massa. Nullam ut arcu lacus. Suspendisse ultricies elementum arcu ut dictum.
Heading Three
Sed aliquet augue ut ligula porta gravida pellentesque sapien semper. Duis mauris massa, semper pulvinar eleifend id, tincidunt fermentum nulla. Proin ipsum neque, imperdiet in vestibulum non, hendrerit ac nisi. Maecenas eleifend libero quis urna lacinia elementum. Etiam mi massa, sollicitudin nec accumsan in, aliquet in dui. Pellentesque consequat diam quis felis luctus a vehicula lectus mollis.
Pull Down Menu Close Menu