Chapter 10, Lesson 3

If you already know how to specify the width of an HTML table, you can skip this lesson.

The browser is an amazing piece of software, and it really becomes obvious when you see it's involvement in building tables. Why, the browser takes care of tons of dirty little details. Imagine, for example, if you had to specify the width of every line, it's location, how many pixels wide to make a column, how many pixels high to make a row, what size each cell had to be, what font to use, what color to use, etc, etc, etc. "Pshaw!", you say? Well, imagine if you had to do all that for a table of, say, 500 or 1000 data cells. The very thought of it makes me appreciate the robust quality of our current advanced browsers.

Normally, the browser calculates the sizes of all the cells based on how much text is in them, how many data cells are in each row, how many rows there are, and the values specified by the attributes submitted in the table's tags. And when the calculations are done, you get the table sized like the browser wants it, not as you necessarily envisioned it. For lots of tables, this is no problem, and we're happy to accept what the browser gives us. Sometimes, however, for presentability's sake, we want to specify the width of a table.

HTML gives us the table's 'WIDTH' attribute for doing this. Placed inside the <TABLE> tag, the 'WIDTH' attribute allows us to specify the width in two ways:

<TABLE WIDTH=number-of-pixels>
or
<TABLE WIDTH=percentage%>

Of course, follow the usual rules regarding the use of attributes inside tags, bla, bla, bla. Use the first form (shown above) to specify the table's absolute width (well, really, just absolutely recommended), expressed in screen pixels. When specifying the width in pixels, I suggest using a number lower than 600, for maximum compatibility with 640 x 480 VGA screens still in common use around the web. Why would you want to specify an absolute table width? Well, let's say that you have two tables of similar data; one table is for people from the planet Xircof, and the other for people (?) from the planet Terra. For appearance sake, it would be best for both tables to be exactly the same width, but if you let the browser construct it automatically, it very well make the tables two different sizes. With the table's 'WIDTH' attribute, the problem is no more, and neither planet's populace will feel slighted.

Use the second form to specify the table width as a percentage of the total screen width. This is a nice feature. For example, if you know that you want the table to occupy most of the screen width, but you don't have a clue what size screen the receiving browser is (and believe me, you don't have a clue, most of the time), then you can specify a width of , say, 95%, and the browser will make sure it's that wide, regardless of the screen size at the receiving end. Radical, dude! By the way, I suggest that you specify numbers of 95% or less, because some browsers (I'm not mentioning any names) don't properly take into account the scroll bars at the edge or bottom of the displayed page (window).

Let's see how the 'WIDTH' attribute works:

Here's a table with default table width:
<P>
<TABLE BORDER=5>
<CAPTION>UFOs Sighted </CAPTION>
<TR ALIGN="CENTER"><TH>Date</TH><TH>Count</TH></TR>
<TR ALIGN="CENTER"><TD>3-22-97</TD><TD>17</TD></TR>
<TR ALIGN="CENTER"><TD>4-19-97</TD><TD>39</TD></TR>
</TABLE>
<P>
Here's a table with specified WIDTH=300:
<P>
<TABLE BORDER=5 WIDTH=300>
<CAPTION>UFOs Sighted </CAPTION>
<TR ALIGN="CENTER"><TH>Date</TH><TH>Count</TH></TR>
<TR ALIGN="CENTER"><TD>3-22-97</TD><TD>17</TD></TR>
<TR ALIGN="CENTER"><TD>4-19-97</TD><TD>39</TD></TR>
</TABLE>
<P>
Here's another table with specified WIDTH=300:
<P>
<TABLE BORDER=5 WIDTH=300>
<CAPTION>UFOs Sighted </CAPTION>
<TR ALIGN="CENTER"><TH>Date</TH><TH>Count</TH>
    <TH>Comment</TH></TR>
<TR ALIGN="CENTER"><TD>3-22-97</TD><TD>17</TD>
    <TD>on one pass could see the three large eyes of what appeared to be an alien</TD></TR>
<TR ALIGN="CENTER"><TD>4-19-97</TD><TD>39</TD>
    <TD>had to replace keg of beer halfway through observation session</TD></TR>
</TABLE>
<P>
Here's a table with specified WIDTH=30:
<P>
<TABLE BORDER=5 WIDTH=30>
<CAPTION>UFOs Sighted </CAPTION>
<TR ALIGN="CENTER"><TH>Date</TH><TH>Count</TH></TR>
<TR ALIGN="CENTER"><TD>3-22-97</TD><TD>17</TD></TR>
<TR ALIGN="CENTER"><TD>4-19-97</TD><TD>39</TD></TR>
</TABLE>
<P>
Here's a table with specified WIDTH=50%:
<P>
<TABLE BORDER=5  WIDTH=50%>
<CAPTION>UFOs Sighted </CAPTION>
<TR ALIGN="CENTER"><TH>Date</TH><TH>Count</TH></TR>
<TR ALIGN="CENTER"><TD>3-22-97</TD><TD>17</TD></TR>
<TR ALIGN="CENTER"><TD>4-19-97</TD><TD>39</TD></TR>
</TABLE>
<P>
Here's a table with specified WIDTH=100%:
<P>
<TABLE BORDER=5  WIDTH=100%>
<CAPTION>UFOs Sighted </CAPTION>
<TR ALIGN="CENTER"><TH>Date</TH><TH>Count</TH></TR>
<TR ALIGN="CENTER"><TD>3-22-97</TD><TD>17</TD></TR>
<TR ALIGN="CENTER"><TD>4-19-97</TD><TD>39</TD></TR>
</TABLE>

Here's a table with default table width:

UFOs Sighted

Date	Count
3-22-97	17
4-19-97	39

Here's a table with specified WIDTH=300:

UFOs Sighted

Date	Count
3-22-97	17
4-19-97	39

Here's another table with specified WIDTH=300:

UFOs Sighted

Date	Count	Comment
3-22-97	17	on one pass could see the three large eyes of what appeared to be an alien
4-19-97	39	had to replace keg of beer halfway through observation session

Here's a table with specified WIDTH=30:

UFOs Sighted

Date	Count
3-22-97	17
4-19-97	39

Here's a table with specified WIDTH=50%:

UFOs Sighted

Date	Count
3-22-97	17
4-19-97	39

Here's a table with specified WIDTH=100%:

UFOs Sighted

Date	Count
3-22-97	17
4-19-97	39

The demo provides several examples:

• In the first table, we see our default table, with the width calculated by the browser.
• In second table, we explicitly specified a width of 300 screen pixels, and the browser gave it to us.
• In the third table, we introduced an extra set of cell data. The text in the third column was easily wide enough to cause the table width to exceed our specified width of 300 pixels. But the browser saved our fragile egos, by word-wrapping the text in those third cells, and adjusting the row heights as required to display all the table contents, yet still give us our desired table width. In general, the browser will word-wrap in a table wherever it needs to (if we don't do something to otherwise prevent it).
• In the fourth table, we explicitly specified a width of 30 screen pixels. The browser gave us something, but it wasn't 30 pixels. What happened? Well, the browser knew that it couldn't build a table 30 pixels wide, because if it did, the cell data would have to be truncated (cut-off). So the browser pre-empted our specification and supplied the smallest possible table that would still display our data properly. (Thank goodness the browser is smarter than I am).
• The fifth table specifies a table width of 50% of screen width. Regardless of what size your screen resolution is set for, you should have observed aabout half its width.
• The sixth table specifies a table width of 100%. Observe whether or not the table was wider than your screen window. If so, your browser is a good example of why I suggest 95% as the maximum specified screen width.

In all cases, notice that the browser enlarged the cells' width as required to build the specified table, but the contents of each cell remained unchanged, and the height of each row remained the same.

---

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

---