Table Spacing

Overview

Tables are used to create page layouts and generally help us keep the pieces of our HTML pages where we want them. Three methods are widely used, each with its advantages and disadvantages:

• Spacing with pixels or fixed-width spacing is helpful when you want to specify an exact size, but are willing to let your information scroll off the right edge of the screen when there's not enough space.
• Spacing with percentages allows you variable-width spacing by giving the proportions of the layout segments, but letting them readjust for different sizes of windows.
• Spacing with images is the surest way to fix table columns to a particular width.

  Part of the reason for having three methods rather than just one is the basic philosophy of HTML, to allow as much flexibility as possible for the browser, and limit the ability of the designer to give rigid specifications. Pixels and percentages are both built-in features of HTML, but images allow the designer greater "authority" because the width of images is more important to a browser than the whims of a mere designer. ;-) Images are a way to "trick" the browser into doing what we want.

Save your XHTML template file as x00h.htm, and title the page, "". Make sure your name is listed as author.

Specifying table widths in pixels gives us fixed-width spacing. To space with pixels, add a width attribute to one or more cells in the top row of a table, adding an integer number of pixels after an equal-sign:

<table>
<tr>
<td width="50">Cell 1</td>
<td width="100">Cell 2</td>
</tr>
</table>

1. Create a table with four rows and two columns with a border of 1 pixel.
2. Make the first column 50 pixels wide, the second 100, the third 150, and the fourth 200.
3. Put random words in each of the eight cells - the first words that come to your mind. (Can't think of any? Use this random-word seed: birds)
4. View the table in a browser to make sure you're getting something reasonble.
5. Duplicate the table, and add a table width specification of 600 (100 pixels wider than the total cell width) to the table tag.
6. Duplicate the second table, and change the table width to 250 (half the total width of the cells).
7. View the tables in three browsers, each with the windows as wide as the screen will let them be, and observe:
   What are the differences in width between the tables?
   Which is more "powerful": table width or cell widths?
   Do all the browsers render the tables the same? If not, what can you infer about their table-processing algorithm?
   Squeeze the browser windows to make them narrower and observe the differences in the tables. Which is more "powerful": the window width, the table width, or the cell widths?

In my experience, fixed width specifications seldom need to be used.

• For layout and data presentation, most tables look better using variable width.
• When using tables to organize images, the use of shim images is more reliable.
• Fixed pixel-width specification can be used in tables for layout to save the trouble of accessing shim images.

Spacing with percentages, also known as variable-width spacing, is just like spacing with pixels, except you add a % sign after the number.

<table>
<tr>
<td width="25%">Cell 1</td>
<td width="75%">Cell 2</td>
</tr>
</table>

1. Create a table with 3 columns and 2 rows with a border of 1 pixel.
2. Set the width of the cells in the first row to 20%, 50%, and 30% respectively
3. Fill each of the 6 cells with random words. (If necessary, use this random-word seed: lead.)
4. Check the table in a browser to make sure it works.
5. Duplicate the table twice.
6. In the second table put an over-all table width of 500 pixels.
7. In the third table put an over-all table width of 70% (that relates to the width available for the table in the window).
8. View the tables in three browsers, each with the windows as wide as the screen will let them be, and observe:
   Do all the tables have (roughly) the same proportion of column sizes?
   Do all the browsers render the tables the same? If not, what can you infer about their table-processing algorithm?
9. Squeeze the browser windows to make them narrower and observe the differences in the tables:
   Does the over-all table width in pixels keep its size better than the one with its over-all width in percent?
   When the window gets really narrow, do the proportions of the column widths degenerate the same in each table? In each browser?

Variable width is suitable for many purposes:

• When the balance and proportions are more important than the specific widths;
• When browser-window widths are likely to vary a great deal;
• When you don't need to specify exact widths for images and other precise elements.

Spacing with images can be done with actual graphics that you want your viewers to see, but usually it's done with shims. The Merriam-Webster OnLine Dictionary defines a shim as "a thin often tapered piece of material (as wood, metal, or stone) used to fill in space between things (as for support, leveling, or adjustment of fit) ".

In the Web-world, a shim is an invisible picture (usually a 1x1 pixel transparent GIF) used to force a minimum column width in a table. How can a 1x1 pixel image do that? Simply by specifying the desired width in the img tag. For example:

<table>
<tr height="1">
<td><img src="shim.gif" width="100" height="1"></td>
<td><img src="shim.gif" width="200" height="1"></td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>

1. Create a table with 4 columns and 3 rows with a border of 1 pixel.
2. Set the height if the first row to 1 pixel, as in the example above.
3. Insert a shim image into each cell of the first row, widths of 50, 100, 150, and 200 pixels respectively. The height of each should be set to 1 pixel.
   Where can you get a shim image? Right here in this square: (Beautiful, isn't it? ;-)
4. Fill each of the 8 cells in the second and third rows with random words. (Need inspiration? Use this random-word seed: rose.)
5. Check the table in a browser to make sure it works.
6. Duplicate the table, and add a table width specification of 600 (100 pixels wider than the total cell width) to the table tag.
7. Duplicate the second table, and change the table width to 250 (half the total width of the cells).
8. View the tables in three browsers, each with the windows as wide as the screen will let them be, and observe:
   What are the differences in width between the tables?
   Which is more "powerful": table width or image size? Always?
   Do all the browsers render the tables the same?
   Squeeze the browser windows to make them narrower and observe the differences in the tables. Which is more "powerful": the window width, the table width, or the image widths?

There are circumstances when neither fixed nor variable width tables are exactly right. Sometimes a combination of the two is helpful.

This table is set up to demonstrate how browsers balance exact, proportional, and unspecified widths.

• The overall table width is set to a relatively narrow 200 pixels.
• The contents of the cells are all approximately equal.
• The first column requests 100 pixels, half the table's width.
• The second column requests 50% of the 200, which would normally also be 100 pixels.
• However, there is a third, unspecified-width column which the browser must squeeze in somehow.

View the tables in three browsers and observe:

Which of the columns is widest? Is it the widest in all three browsers?
Which is the second-widest column?
Would you have guessed correctly which column would be widest, and which second?
Which is the most "powerful" way of getting a column to the desired width? Which is second, and which is third?
• Overall table width
• Column width in pixels
• Column width in percent

Because they combine flexibility with the ability to specify certain columns, mixed-width tables are ideal for many uses, such as when:

• one or two columns need to be a specific width, but
• the remainder of the table can be balanced according to space available.

When you're done, double-check that the assignment meets the specifications above, and that all links are functional.

If your Instructor has asked you to do so, upload to your work to your WCC student Website, and send email to the instructor with the URI. Be sure your email meets the formal requirements: name, class, section and exercise (W24f), and that it follows standard business-email practice.