Tables for Layout | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

Tables can be a very important tool for HTML-based page layout. The foundation of graphic design is the ability to spatially arrange visual elements in relation to each other. Tables can be used to define a layout grid for just this purpose. Prior to the advent of style sheets supporting positioning (see Chapter 10), tables were the only reliable way to accomplish this. Even with CSS well supported at the time of this edition's writing, tables still remain the most commonly used technique in Web design.

The key to using a table to create a precise page grid is the use of the width attribute. The width attribute for the table element specifies the width of a table in pixels, or as a percentage value such as 80%. It also is possible to set the individual pixel widths of each cell within the table, using a width attribute for the td or th element. Imagine trying to create a 400-pixel column of text down the page with a buffer of 50 pixels on the left and 100 pixels on the right. In HTML before tables, this would be literally impossible without making the text a giant image. With a table, it is easy, as shown by the markup code here:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Table Layout  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <table border="0">   <tr>   <td width="50">  &nbsp;  </td>   <td width="400">   <h1 align="center">  Layout is here!  </h1>   <hr />   <p>  This is a very simple layout that would       have been nearly impossible to do without tables.       This is a very simple layout that would        have been nearly impossible to do without tables.       This is a very simple layout that would       have been nearly impossible to do without tables.  </p>   </td>   <td width="100">  &nbsp;  </td>   </tr>   </table>   </body>   </html>

In the preceding code, the border value is set to zero. The rendering of the example is shown here, with both the border on and off.

While the border attribute for a <table> tag isn't necessary because the browser does not draw a border by default, it is better practice to keep the attribute in, set to zero. The presence of the attribute allows borders to be quickly turned on and off by setting the value to 1 or 0 to check to see what is going on with a particular layout.

Tip	When creating empty table cells , it is a good idea to put a nonbreaking space (   ) or even a clear pixel gif (for example, space.gif) into the cell so it doesn't collapse.

Besides basic text layout, tables also can be used to provide more precise layout in relation to a background. One popular design concept employs a vertical strip of colored background on the left of the page, which contains navigation controls; the rest of the document contains the main text. Without tables, it is difficult to keep body content off darker regions of a background tile. The following is an example of the markup code to create a two-column design that works on top of a 100-pixel-wide color background:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Table Layout with Background  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body background="yellowtile.gif">   <table width="550" cellspacing="0" cellpadding="15">   <tr>   <td width="100" valign="top">   <a href="about.html">  About  </a><br /><br />   <a href="products.html">  Products  </a><br /><br />   <a href="staff.html">  Staff  </a><br /><br />   <a href="contact.html">  Contact  </a><br /><br />   </td>   <td width="450">   <h1 align="center">  Welcome to Demo Company, Inc.  </h1>   <hr />   <p>  This text is positioned over a white background;        the navigation links are over a colored background.        This layout combines a table with a background image.  </p>   </td>   </tr>   </table>   </body>   </html>

The rendering of this layout appears in Figure 7-4. Note how the foreground content (the <body> content) is aligned over the background image. Another way to achieve such effects is to set the bgcolor attribute for the table cells and forego the background image altogether.

Figure 7-4: Rendering of two-column layout

  <table width="550" cellspacing="0" cellpadding="10">   <tr>   <td width="100" valign="top" bgcolor="yellow">  links here  </td>   <td width="450">  content here  </td>   </tr>   </table>

Tip

Often, when setting up table layouts, you will want to control page margins as well. Recall that setting nonstandard <body> attributes like so, <body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0">, or using the CSS property margin for the body element will help rid your page of unsightly gaps.

cellpadding and cellspacing

The space between cells in a table is controlled by the cellspacing attribute for <table> . The value is measured in pixels or percentage values. When using tables for layout, cells should jut up next to each other, so this attribute is often set to , as in previous examples. However, it is possible to give space between cells by setting this attribute to a positive integer or percentage value. Similarly, the padding between cell walls and the content they surround is controlled by the cellpadding attribute, which is also often set to in tables used for layout. The two approaches are illustrated by this markup:

  <table border="1" cellspacing="15" cellpadding="40">   <tr>   <td>  Element 1  </td>   <td>  Element 2  </td>   <td>  Element 3  </td>   </tr>   </table>   <br /><br />   <table border="1" cellspacing="0" cellpadding="0">   <tr>   <td>  Element 1  </td>   <td>  Element 2  </td>   <td>  Element 3  </td>   </tr>   </table>

The code above renders the following:

Cell Alignment

Cells defined by <td> or <th> are generally aligned horizontally by setting the align attribute to left , right , or center with left being the default. It is also possible to justify their contents by setting the attribute to justify, or to align contents on a particular character such as a decimal point using the value char . However, aligning on characters is still not that well-supported in browsers. The contents of cells can also be aligned vertically by setting valign on <th> or <td> tags to top , middle , bottom or baseline . The following example illustrates the more common uses of these values.

  <table border="1" cellspacing="0" cellpadding="0" width="100%">   <tr>   <td align="left">  Left  </td>   <td align="center">  Center  </td>   <td align="right">  Right  </td>   </tr>   <tr>   <td valign="top" height="100">  Top  </td>   <td valign="middle">  Middle  </td>   <td valign="bottom">  Bottom  </td>   </tr>   </table>

A typical rendering of this markup is shown here.

Colored Tables and Cells

As already mentioned in this chapter, table elements also can be assigned background colors using the bgcolor attribute. The bgcolor attribute is valid for <table> , <tr> , <th> , and <td> .

  <table border="1" cellspacing="0" cellpadding="8" bgcolor="green">   <tr>   <th bgcolor="lightblue">  lightblue  </th>   <th bgcolor="lightblue">  lightblue  </th>   <th bgcolor="lightblue">  lightblue  </th>   </tr>   <tr bgcolor="orange">   <td>  orange  </td>   <td>  orange  </td>   <td>  orange  </td>   </tr>   <tr>   <td bgcolor="red">  red  </td>   <td bgcolor="white">  white  </td>   <td bgcolor="blue">  blue  </td>   </tr>   <tr>   <td>  green  </td>   <td>  green  </td>   <td>  green  </td>   </tr>   </table>

In this code, the header cells ( th ) in the first row will have a light blue background; all three cells ( td ) in the second row will have an orange background as defined for the entire row ( tr ); the three cells in the third row will have different background colors as defined by the bgcolor attribute for each <td> tag; and the cells in the last row, which have no background color defined for themselves or their row, will default to the green background color defined in the <table> tag.

Recall that the cellspacing attribute for <table> , which sets how many pixels of space are included between table cells, is set to zero; if it is set to a higher value, the background color will display in the areas between cells in most browsers.

Additional proprietary attributes also have been defined for table border colors. Internet Explorer 4 and higher defines a bordercolor attribute for < table> as well as for cells. Netscape will recognize the bordercolor attribute for <table> , but not on the cells. Strict standards- compliant browsers such as Opera 7 will recognize none of these attributes. As an example, the markup

  <table bordercolor="#ff0000" border="1">   <tr>   <td bordercolor="#0000ff">  Blue Border  </td>   <td>  Red Border  </td>   </tr>   </table>

will render a table with a red border around the entire table and its first cell will have a blue border in Internet Explorer, but not in Netscape.

Internet Explorer 4 and higher also provide two more border color attributes: bordercolordark and bordercolorlight .

  <table bordercolorlight="#ff0000" bordercolordark="#0000ff"   border="4">   <tr>   <td>  Cell  </td>   </tr>   </table>

Under Internet Explorer, this example will render a two-tone outer border for the table in which the colors simulate a three-dimensional shading, as shown here:

While these proprietary attributes are useful for creating a bevel style effect on a table, the effect is easily accomplished in standard CSS.

Basic HTML initially didn't provide great support for table borders and colors; with all the proprietary extensions and subtle variations, page authors often ended up frustrated. However, sometimes a simple workaround such as using a nested table can solve the problem, albeit messily. Consider the markup here:

  <table cellspacing="0" cellpadding="0" border="0" width="200">   <tr>   <td bgcolor="#990000">   <!-- begin nested table -->   <table cellspacing="1" cellpadding="3" border="0" width="200">   <tr>   <td bgcolor="#FFFFFF" width="100">  Cell 1  </td>   <td bgcolor="#FFFFFF" width="100">  Cell 2  </td>   </tr>   <tr>   <td bgcolor="#FFFFFF" width="100">  Cell 3  </td>   <td bgcolor="#FFFFFF" width="100">  Cell 4  </td>   </tr>   </table>   <!-- end nested table -->   </td>   </tr>   </table>

The outer table employs a single table cell with its bgcolor set to red. The cells in the nested table have their bgcolor set to white. The cellspacing for the nested table is set to 1, allowing the black background of the outer table to show through in the spaces between the cells:

This "hack" will work for browsers even as far back as Netscape 3. Still, some care must be taken in using this approach. The two tables must be the same width, or the border effect could be uneven . Given the reliance on tables in layouts, such tricky markup is much more common than readers might imagine.

Background Images in Tables

Using the background attribute it is also possible to apply background images to tables and table cells. Defining a table with the code

  <table width="100%" border="1" cellpadding="0" cellspacing="0"   background="tabletile.gif">

would place a repeating background tile behind the table, as shown here:

Notice that the table on the left is the typical rendering in modern browsers, but beware that the table on the right shows Netscape 4 tiling backgrounds very differently. It is also possible to set table cells ( <td> and <th> ), but the tiling effect will be limited to the cell it is defined on, so be careful if you have adjacent cells with different backgrounds.

< Day Day Up >