Chapter 10, Lesson 4

If you already know how to explicitly size a table's cell, you can skip this lesson.

Sometimes, the Web page author wants to assure that a table looks pretty much exactly as expected, and not rely on the browsers algorithm (formula for calculating) to determine the size of the table and it's cells. Other times, in order to make sure the table aligns with a background (image) feature, it's important that a column or row of cells be a particular size.

HTML allows this level of control, for individual cells, by virtue of the 'HEIGHT' and 'WIDTH' attributes. Lest you confuse these with attributes for the <TABLE> tag (which are nevertheless similar), these attributes are specified in the individual cell tags, i.e., the <TD> tag and/or the <TH> tag.

For specifying the cell width, then, in screen pixels, we have:

<TD WIDTH=number-of-pixels> (for data cell)
or
<TH WIDTH=number-of-pixels> (for heading cell)

For specifying the cell height, in screen pixels, use:

<TD HEIGHT=number-of-pixels> (for data cell)
or
<TH HEIGHT=number-of-pixels> (for heading cell)

Naturally, its quite common to specify both attributes (applicable to <TD> or <TH> :

<TD HEIGHT=number-of-pixels WIDTH="number-of-pixels">

Be aware that these attributes, when specified by the HTML author, may be superceded by the browser's built-in rules. In the case of a conflict between specifications for cells in the same column or row, for example, the browser will decide how to build the table based on its own best compromise.

Let's look at some examples:

Here's a table with default cell dimensions:
<P>
<TABLE BORDER=5>
<CAPTION>Demo Table 1 </CAPTION>
<TR ALIGN="CENTER"><TH>NoSpec</TH><TH>NoSpec</TH></TR>
<TR ALIGN="CENTER"><TD>NoSpec</TD><TD>NoSpec</TD></TR>
<TR ALIGN="CENTER"><TD>NoSpec</TD><TD>NoSpec</TD></TR>
</TABLE>
<P>
Here's a table with the first column's heading and data specified in screen pixels:
<P>
<TABLE BORDER=5>
<CAPTION>Demo Table 2 </CAPTION>
<TR ALIGN="CENTER"><TH WIDTH=150 HEIGHT=75>W=150 H=75</TH>
    <TH>NoSpec</TH></TR>
<TR ALIGN="CENTER"><TD  WIDTH=100 HEIGHT=35>W=100 H=35</TD>
    <TD>NoSpec</TD></TR>
<TR ALIGN="CENTER"><TD  WIDTH=100 HEIGHT=5>W=100 H=5</TD><TD>NoSpec</TD></TR>
</TABLE>
<P>
Here's a table with minimum number of attributes to fully specify the entire table:
<P>
<TABLE BORDER=5>
<CAPTION>Demo Table 3 </CAPTION>
<TR ALIGN="CENTER"><TH WIDTH=150 HEIGHT=75>W=150 H=75</TH>
    <TH WIDTH=100>W=100</TH>
    <TH WIDTH=100>W=100</TH></TR>
<TR ALIGN="CENTER"><TD HEIGHT=25>H=25</TD>
    <TD>NoSpec</TD>
    <TD>NoSpec</TD></TR>
<TR ALIGN="CENTER"><TD HEIGHT=35>H=35</TD>
    <TD>NoSpec</TD>
    <TD>NoSpec</TD></TR>
</TABLE>

Here's a table with default cell dimensions:

Demo Table 1

NoSpec	NoSpec
NoSpec	NoSpec
NoSpec	NoSpec

Here's a table with the first column's heading and data specified in screen pixels:

Demo Table 2

W=150 H=75	NoSpec
W=100 H=35	NoSpec
W=100 H=5	NoSpec

Here's a table with minimum number of attributes to fully specify the entire table:

Demo Table 3

W=150 H=75	W=100	W=100
H=25	NoSpec	NoSpec
H=35	NoSpec	NoSpec

There's a lot of stuff to go over here:

• In "Demo Table 1", we built a table with no specified data attributes, i.e., we took the browser defaults. We've see this before.
• In "Demo Table 2", we built a table and specified the indicated cells in the first column using the 'WIDTH' (W) and 'HEIGHT' (H) values as shown in the table. Now let's analyze the results.
  • Looking first at the 'HEIGHT' attribute, we see that the specified height was applied to all cells in each of the rows where cells were specified. For example, in the first heading cell of the first row, we specified a 'HEIGHT' of 75 screen pixels; the browser sized that cell and the unspecified cell in that row to 75 pixels high. In the second row, the first data cell specified 35 pixels of 'HEIGHT'. We go it, for the entire second row. In the third row, the first data cell specified 5 pixels of 'HEIGHT'. However, 5 pixels is not enough height to display the text in that row, so the entire row was adjusted to the smallest height that would display the text, which turned out to be approximately 20 pixels.
  • Looking next at the 'WIDTH' attribute, we see that the width was specified for all three cells in the first column. The top cell specified 150 pixels of 'WIDTH' and the middle and bottom cells specified 100 pixels. What the browser gave us for that first column was 150. Why? The browser has to build the table so that all the cells in one column are aligned, which means they all have to be displayed with the same width. When an inconsistency like this occurs (150 and 100 specified for the same column), it picks the largest specified value, in this case: 150.
  • The cells in the second column were unspecified. Therefore, they received the height specified for the row they belong to, and the width determined by the browser's default calculations.
• In "Demo Table 3", we see an example which demonstrates the minimum number of cells which need to be specified, to assure that all columns and rows in the table comply. Basicly, we need to specify the 'WIDTH' of at least one cell in each column, and specify the 'HEIGHT' of at least one cell in each row. Any remaining unspecified cells' height and width will comply with the height and width of the specified cell in that row or column, provided that the browser doesn't supercede the specification for some other reason (like we saw with the height in the last row of demo table 2). Notice also, that for the purposes of specifying row height or column width, '<TD>' cells and '<TH>' cells are treated identically by the browser (in other words, both types of cells are simply and equally treated as "row members" or "column members").

Specifying cell dimensions can be a lot of trouble, and makes the table considerably more complicated to author using a text editor, not to mention less readable in source code. Still, it can allow you to do some pretty dazzling things with your web page, which we'll demonstrate in a future chapter. Before we can address those fancy applications, however, we have to thoroughly understand the basic workings of table tags and their attributes.

---

Overseer: Monty Northrup ... ... leave e-mail ...

---