Attributes In The <tr> Tag

You've probably noticed in all of the <table> tutorials that I've not used any attributes in the <tr> tags. The reason for this is Netscape's lack of support for these attributes. Lets say we wanted to set a background color for an entire row by using:

<tr bgcolor="red">

This would color all of the cells (<td>s) in that row in IE, but might not in Netscape. The same goes for the BACKGROUND attribute. To make sure your table looks good in both browsers, use attributes in the <table> and <td> tags. (Note: I've gotten BGCOLOR in a <tr> tag to work in Netscape, but it's hit or miss.)

Sizing rows doesn't really do much. The settings are almost always overridden by the dimensions of the cells and overall table. The same goes for alignment. So, use <tr> tags to do what they do best -- make a new row.

The <th> Tag

There is a table tag that we haven't discussed at all because there's not much of a need for it. It's the <th>, or "table header" tag. This tag works just like a <td> tag except that it makes any text in it bold. That's it. Here's an example:

See how the text in the top two cells is slightly bolder than the cells below? This is what <th> does. Not much, is it? Currently, column headers are styled with CSS using <span> or <div> to apply the style inside good ol' <td> tags.

Here's the code for the table above with the <th> tags:

<table width="50%" align="center" cellspacing=0 cellpadding=5 border=3 bordercolor="black">

<tr>
<th width="50%" align="center">A &lt;th&gt;</th>
<th width="50%" align="center">Another &lt;th&gt;</th>
</tr>

<tr>
<td width="50%" align="center">Cell #1</td>
<td width="50%" align="center">Cell #2</td>
</tr>

</table>

CSS And Table Elements

CSS support for styling table elements -- "table", "tr", "td", and "th" -- is somewhat limited and inconsistent. Netscape support is generally absent. Backgrounds and other styling should be done with attributes in the <table> and <td> tags.

The styling of content within a cell can be styled as usual. These styles can be applied by any appropriate HTML tag inside the cell. Don't forget that you can use <div> and <span> to apply general classes.

The point here is that styling the "table" elements isn't well supported by browsers, particularly Netscape. This won't be the situation for long, however. Keep your ear to the ground and your eyes open.

The Importance Of WIDTH

You may have noticed in the sample tables of the table tutorials that WIDTH was almost always defined, but HEIGHT was seldom used. In practice, with tables containing content, HEIGHT may not be used at all. The HEIGHT is then determined by the content.

WIDTH is a different story for the following reason. If a table's width extends beyond the screen, the viewer must "side scroll" to see all of the content. Side scrolling is very undesirable. It can generally be eliminated by setting a WIDTH to fit within the size of the viewer's screen.

If WIDTH is set, the table will stretch down to contain the content. This results in "vertical scrolling" which viewers are familiar and comfortable with.

If WIDTH and HEIGHT are set, but the content won't fit into the cells properly, your table will be screwed up one way or another. It may stretch beyond the defined limits or it may "clip", or cut off, the content. As a rule, WIDTH is always defined and HEIGHT is only defined where it has to be.

Relative vs Absolute Sizing

Relative sizing means your tables will look proportionately the same on all screens at all resolutions. Percentages are used to relatively size a table. Stretching a table to WIDTH="100%" will spread it across the entire browser widow regardless of whether the screen is set to 640x480 or 1280x1024. All of the cells with proportionally align themselves as well if they have percentage WIDTHs.

Absolute sizing, on the other hand, will set the table to a specific size at all screen resolutions. A <table WIDTH=200...> will make the table 200 pixels wide regardless of the viewer's screen settings. This type of sizing is used a lot when dynamic positioning, like pop up menus (using CSS and JavaScript), is used.

There is a time and place for both Relative and Absolute positioning and they can be used together. We'll be talking more about this as we continue.

To Next Advanced HTML Lesson

Back To Advanced HTML Index