Modify a Table s Appearance


Modify a Table’s Appearance

Although you need only the three basic table elements, your HTML toolbox includes additional elements and attributes that can be used to modify a table’s appearance. In addition, the content you choose to put in each cell will affect how your table looks on a Web page. As you work through this chapter, try modifying the simple table you created earlier by adding the lines in the following section (or sometimes modifying existing tags) and watch how your table develops.

Add Headings and Captions

In keeping with a table’s original purpose for displaying structured information, HTML provides some elements that allow you to add headings, captions, and footers to your table.

Tip

Sometimes existing code will be displayed to make it easier to understand where you need to add or modify code. In these cases, type in only the code that appears in boldface.

Use the <th> </th> Element to Add Headings to Your Table

To add a heading, you use <th> </th> instead of the <td> element. <th> creates cells the same way <td> does, but also displays the text inside the cells as centered and boldface. Try adding a heading to the table by adding this line of code above the first row:

<tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> </tr>

Add Captions with the <caption> </caption> Element

A caption can be used to display a title for your table. Use the <caption> </caption> element just above the first row of cells. To add a caption to the sample table, add this line: <caption>How to Use Tables</caption>. The following code shows where that line should be placed in your table:

<table> <caption>How to Use Tables</caption> <tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> </tr>

Display a Border

By now you probably are thinking that your table would be easier to work with if it had borders and lines defining the separate cells. To tell the browser to display a border, simply add the border=" " attribute to the opening <table> tag. To add a border that is three pixels wide, go back to your code and modify the table tag to read like this: <table border="3">. Now look at how your table has changed. It should resemble the illustration at the left.

You can change the thickness of your border by altering the number in the quotation marks. Thus, border="10" produces a 10-pixel–wide border, and border="20" makes it 20 pixels wide. Try experimenting with some different border sizes to see what you like best.

Tip

Although it is easier to work with tables that have borders, you might prefer to have borderless tables for your final layout. In this case specify border="0", or simply remove the border attribute altogether.

Position Your Content

As soon as the border appears, you will notice that all the Xs in your table are aligned to the left sides of their cells. That’s because the default alignment in tables is to the left. If you want the content to be centered or right justified, there are a couple of options for controlling its position.

Position Content Horizontally with the align Attribute

Although the align attribute has been deprecated for most other purposes in XHTML, it has not been deprecated for use in table cells. To use align to position cell content, you must include the align attribute in each cell where you want to specify the position. For example, to center text you would modify a <td> tag to read <td align="center">. The align attribute will take several different values:

  • Left Aligns cell contents to the left. This is the default alignment.

  • Right Aligns cell contents to the right.

  • Center Aligns cell contents to the center.

  • Justify Also aligns the cell’s contents to the left.

Control Vertical Alignment with the valign Attribute

You can determine whether your content aligns at the top, middle, or bottom of a cell by using the valign attribute. valign (vertical align) enables you to specify the vertical positioning for individual cells (<td valign="top">), entire rows (<tr valign="middle">), or a complete table (<tbody valign="bottom">). The values you can supply with the valign attribute are as follows:

  • Top Aligns cell contents with the top of the cell.

  • Middle Aligns cell contents with the middle of the cell; middle is the default value.

  • Bottom Aligns cell contents with the bottom of the cell.

  • Baseline Aligns with a baseline shared by all the cells in a given row.

The following code and illustration demonstrate how the align and valign attributes affect cell contents:

<table border"3" height"200" width"200"> <tr> <td align="left">Left</td> <td align="center">Cent.</td>      <td align="right">Right</td> </tr> <tr> <td valign="top">Top</td> <td valign="middle">Mid.</td>      <td valign="bottom">Bottom</td> </tr> <tr> <td valign="baseline">Baseline</td>      <td align="justify">Justify</td>      <td>Default</td> </tr> </table>

Shortcut

Setting the characteristics of each element of a large table can become tedious and time consuming. Fortunately, CSS provide a way to set table properties that control the entire table. Whenever possible, consider using CSS to develop your tables.

Use CSS for Alignment

Cascading Style Sheets give you more options for cell content alignment. By using an inline style sheet, you can align the contents of individual cells, much as you did with the align attribute. However, you also can use CSS to align the text in all of your table cells at once by embedding a style sheet in the head portion of your XHTML page.

CSS use the same four alignment properties: left, center, right, and justify:

  • Center alignment with an inline stylesheet: <td style="text-align: center;"> This controls an individual cell.

  • Center alignment with an embedded stylesheet: <style type="text/css"> td {text-align: center;} </style> This controls all the cells in your table.

    Note

    The justify property works differently with CSS from the way it works with the align attribute. With CSS it causes text to be justified to both the left and right margins. The align="justify" attribute justifies only to the left.

Try centering the contents of the sample table by adding these lines inside the <head> portion of your HTML page; then compare your results with the following illustration:

<style type"text/css"> td  {text-align: center;} </style>

After you’ve typed in the style element, save your page and display it in your browser. Now the Xs in each cell will be centered, instead of just those in the first row. As you can see, CSS can be quite a timesaver.

Add Background Colors

Setting background colors for your table is easy. The background color attribute, bgcolor=" ", which has been deprecated for use with the <body> element, is still a legitimate attribute for tables. You can set the color for individual cells, for individual rows, or for the whole table. If you would like to set the color for more than one table at once, try using CSS.

Set Table Colors with bgcolor

The bgcolor=" " attribute controls the portion of the table in which it is placed. This attribute, used with a table, is great for creating navigation bars in your Web pages. By setting the colors for individual table cells and putting your links inside the cells, you can create an attractive and quick loading navigational system. To specify colors for your table, use the following:

  • Place bgcolor in the <table> element to control the color of the entire table.

  • Place bgcolor in the <tr> element to control the color of a row.

  • Place bgcolor in <td> or <th> element to control the color of individual cells.

Experiment with the colors of your table by setting the overall table color to magenta, the color of the heading row to yellow, and the color of the center cell to aqua. Compare your results with the following illustration:

<html>   <head>     <title>Table Exercise</title>     <style type"text/css">       td {text-align: center}     </style>   </head>   <body>     <table border="3" bgcolor="magenta">       <caption>How to Use Tables</caption>         <tr bgcolor="yellow">             <th>Col 1</th>             <th>Col 2</th>             <th>Col 3</th>         </tr>         <tr>             <td>X</td>             <td>X</td>             <td>X</td>          </tr>         <tr>             <td>X</td>             <td bgcolor="aqua">X</td>             <td>X</td>          </tr>         <tr>             <td>X</td>             <td>X</td>             <td>X</td>          </tr>     </table>   </body> </html>

Set Table Colors with CSS

You also can use style sheets to control table colors. The advantage here is that you can set the style for all the tables in a page or even an entire Web site with just one set of commands. You also can control individual cells with CSS.

  • Set cell, row, or table colors with an inline style sheet:

    <td style="background-color: blue;">
    Note

    To set row colors, the style attribute goes in the <tr> tag. To set table colors, put it in the <table> tag.

  • Set cell, row, or table colors with an embedded style sheet:

    <style> td {background-color: red;} </style>
Note

In the preceding examples, an individual cell was set to the color blue, whereas the overall table style was set for red cells. Which one takes precedence? In CSS the inline style has priority over the embedded style.

Try putting the following style sheet into the head portion of your tables.htm page. It should change your table background to blue, with white text (that’s what color: white does). All captions will have a red background with yellow text. The heading cells will be yellow with navy text; the center cell will be white with black text.

Caution

In this style sheet, to select the colors for the center cell, a class has been created. In this case it is named td.center. To apply that style to the center cell of your table (or any other cell, for that matter), modify the <td> tag for that cell to read <td class="center">. If you do not insert the class attribute into the <td> element, the style will not be applied. For more about classes in style sheets, read Chapter 10.

<style type"text/css"> table  {background-color: blue; color: white;} caption {background-color: red; color: yellow;} th {background-color: yellow; color: navy} td.center {background-color: white; color: black;} </style>
Tip

When you modify your page to add the preceding style, leave the bgcolor attributes alone. You’ll see when you display your page that the style sheet overrides any colors you set with HTML attributes.

To really see how style sheets work, try creating another table of any size in your page. It will take on the characteristics of the style sheet. For a simple example, here’s a one-celled table with a header and caption. Copy it into your page just after the closing <table> tag for your first table. Your results should resemble the following illustration. To see it in color, visit the color insert in the center of this book.

<br /><table><caption>Table 2</caption> <tr><th>Heading</th></tr> <tr><td>Content</td></tr</table>

Adjust Space In and Between Cells

So far you have learned how to construct a table and change its colors, but what about controlling the position, size, and spacing of cells? HTML provides attributes to control these aspects of a table’s appearance. With cellspacing and cellpadding, you can manipulate the overall size of your tables and cells.

Use cellspacing to Adjust the Space Between Cells

The cellspacing attribute allows you to add space between the cells in your table as measured in pixels. This attribute must go inside the <table> tag. To add a 10-pixel–wide space between the cells in your table, modify the opening <table> tag to read:

<table border="3" bgcolor="magenta" cellspacing="10">

Use cellpadding to Add Space Inside Cells

Just as cellspacing adds space around the outside of your cells, cellpadding adds space inside them. It also adds a layer of padding (defined in pixels) around the contents of the cell. Add a 10-pixel “pad” around the content of your table cells by modifying the <table> tag to read as follows:

<table border="3" bgcolor="magenta" cellpadding="10"  cellspacing="10">

Use CSS for More Padding Options

This is where CSS really shine. With the cellpadding attribute you are able to add padding for the entire cell only; by using CSS’ cellpadding properties, you have many more options. CSS enable you to place the padding only where you want it. It also enables you to use measurements other than pixels. For example, if you want a quarter-inch padding added to the bottom of each cell, you can add a style rule in the head portion of the page that reads td {padding-bottom: .25in}.

CSS padding properties include padding, padding-right, padding-left, padding-top, and padding-bottom. CSS measurement units include, among others, inches (#in), percentages (#%), pixels (#), and ems (#em).

Shortcut

If you use the padding property (as opposed to padding-right and so forth), you simply put the value to the right of the property. The more values you supply, the greater the difference in how they are applied. For example, padding: 10 adds a 10-pixel pad around the cell contents; padding: 10, 15 puts a 10-pixel pad on top and bottom and a 15-pixel pad on the sides. Three values control the top, left-right, and bottom padding. Four values control the top, right, bottom, and left sides, respectively.

Note

An em is a unit that is relative to the font size. For example, a padding of 1.5 ems would be one-and-one-half times the size of the font in use in the table cell.

To apply padding to individual cells, use an inline style sheet. The HTML for the cell you want to modify might look something like this:

<td style="padding-right: 15">X</td>

To set the default cellpadding for the table with an embedded style sheet, you might write your code this way:

<style type="text/css"> td  {padding: 1em, 2em} </style>

Make Cells Span Multiple Columns and Rows

Another way to modify the appearance of your table is to make one cell span two or more rows or columns. This is especially useful when you are using tables for layout purposes and wish to have an image in one large cell accompanied by a navigation bar made up of several cells.

To make a cell span multiple rows, insert the rowspan=" " attribute in the cell’s opening <td> tag. For example, to make the top left cell in your table span two rows, modify its <td> tag to read <td rowspan="2">. Your modified code will look like this:

<tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> </tr> <tr> <td rowspan="2">X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> </tr> 

Caution

Don’t forget that if you are going to make one cell take the space of two, you must remove the cell it is going to replace. Otherwise, your table will be unbalanced. When you add the rowspan attribute to the code for your table, be sure to remove one of the cells (<td>X</td>) in the second row.

To make a cell span more than one column, use the colspan=" " attribute. If you remove one of the cells from the bottom row of your table and modify the last cell’s opening <td> tag to read <td colspan="2">, it causes the browser to display the cell across two column widths.

The code for the table rows now will resemble this:

<tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> </tr> <tr> <td rowspan="2">X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td colspan="2">X</td> </tr>

Adjust Height and Width

With HTML you can adjust both the height and the width of your tables and cells. This can be very important when you are using tables for a page’s layout, as you can specify how much of a page you want the table to use. By using percentages to describe table dimensions, you can enable a browser to adjust your table to fit a monitor’s display, no matter what its resolution.

Set Table Width with Fixed or Dynamic Design

Fixed design involves specifying a table’s dimensions in concrete terms. For example, if you want to stretch the sample table horizontally, you could specify that the sample table you’ve been constructing should be 500 pixels wide by changing the opening table tag to read <table width="500">. When you display the page in a browser now, it will look quite different from the table you originally designed. The disadvantage of this approach is that your table will always be 500 pixels wide, regardless of the size of the browser window. A better approach is dynamic design. Try making the change in tables.htm and compare your results with the following illustration:

Tip

Both the height and width attributes can be used define the size of individual cells. However, this usage has been deprecated in favor of style sheets.

click to expand

Dynamic design is when you describe a table’s dimensions using percentages. Perhaps you want a table to take up a full screen, no matter what screen resolution your visitors’ systems are set to. In this case you would describe your table’s width with a percentage: <table width="100%">. This creates a table that will adjust dynamically to fill the browser window. Your table will adjust in size, larger or smaller, depending on the size of the browser window.

click to expand

Position Tables on a Page

Until now, the table you have been working on has been aligned to the left margin of the page; this is XHTML’s default alignment for tables. However, there are several ways for you to influence the positioning of tables relative to other items on a Web page. Cascading Style Sheets provide an option for table alignment with float and clear properties. Elements such as <div>, and <center> provide a quick and easy solution for alignment. You also can position tables with the deprecated align attribute.

Position Tables with CSS

Cascading Style Sheets use the float property for positioning objects on a page. To use this property you would write float: right (other options are left or none). There is no center value for the float property. If you want to center a table with CSS, you’ll have to do it with margins or with absolute positioning. (For more about CSS and positioning, see Chapter 10.)

To left-align a single table with CSS, use an inline style sheet:

<table style"float: left;">

To right-align all the tables on a page, use an embedded style sheet:

<style type="text/css"> table {float: left;} </style> 

click to expand

Tip

The difference between the left, right, and none options for float is that text does not wrap with the none option. Any text or other content comes after the table. With left or right, the text wraps on the opposite side of the table.

Position Tables with Elements (Deprecated)

If you enclose your table inside the <div> element along with the align=" " attribute, you can position the table to the left, center, or right. Any text or page content coming after the table will start immediately below it. For example, to right-align a table using <div>, you would write your code as follows:

<div align="right"> <table><tr><td>X</td></tr></table> </div> 

click to expand

If you want to center your table, you can bypass the align attribute by using the <center> element instead. The center element is the basic equivalent of <div align="center">. However, <center> is also numbered among the deprecated elements. So, if you are trying to write an XHTML page that will validate, you need to avoid this element.

Position Tables with Attributes (Deprecated)

By using the align attribute inside the <table> tag, you also can position a table in the center or on the right side of the page. An added advantage of using the align attribute is that, just like with images, it influences text wrapping. If you set your table to align="right", any text outside the table will wrap to the left. To right-align the sample table, modify the opening <table> tag to read <table align="right">. The next illustration shows what the page looks like with some text added.

click to expand

Modify Borders and Cell Divisions

Earlier in the chapter you learned how easy it is to create a border for your table. Simply use the border attribute with a value of one or more pixels. Sometimes, though, you might want only a partial border or just rule lines drawn between the cells. How do you do that? There are ways to accomplish this using both HTML and CSS.

Use the HTML frame Attribute to Adjust Table Borders

If you want to make changes to how the outer border of a table displays, the HTML frame=" " attribute gives you quite a few options. By inserting the following attributes, you can select portions of the table border to display, while others remain invisible:

  • To display only the top frame="above"

  • To display only the bottom frame="below"

  • To display only the left side frame="lhs"

  • To display only the right side frame="rhs"

  • To display both the left and right sides frame="vsides"

  • To display both the top and bottom sides frame="hsides"

  • To display no outside border at all frame="void"

For example, if you display a simple table with the frame="void" attribute, it might look like the following illustration:

<table frame="void"> <tr> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> </tr> </table>

Note

The values “box” and “border” both display a border all the way around the table.

Use the rules Attribute to Adjust Interior Borders

Just as frame enables you to control the outer borders of a table, rules gives you control over the interior borders, or rules, between the cells. With the rules attribute you can remove all the interior borders, just the horizontal ones, or just the vertical ones:

  • To display vertical rules rules="cols"

  • To display horizontal rules rules="rows"

  • To display no rules rules="none"

  • To display rules between table groups rules="groups"

Use CSS Border Properties for Tables

Borders are another area where HTML cannot hold a candle to CSS. In fact, the possibilities for creating attractive borders for your tables are so many and varied, it would be impractical to try to deal with them all in this chapter. Chapter 10 goes into detail about how to create borders with CSS; for a sample, use the following code to create a simple four-celled table using CSS’ border properties. This code also is a good test for how well your browser supports CSS. If your display does not resemble the following example, your browser’s CSS support is weak:

<html>    <head>      <title>CSS Table Border</title>      <style type="text/css"> table  { border-width: medium;           border-color: navy;          border-style: groove; } td     { text-align: center;          background-color: yellow; }       </style>    </head>    <body>      <table>        <tr><td>CSS</td><td>IS</td></tr>        <tr><td>VERY</td><td>COOL</td></tr>      </table>    <body> </html>

Add Images and Links

If you’ve read the chapters on graphics and links, you know almost all you need to know about adding them to tables. Of course, if you are using tables to create your layout, you will need to choose the cells where you place your images or links carefully. It may help you to sketch out what your table will look like before you write the markup. That way you can visualize the results you hope to achieve.

Add Images with <img />

You add images to a table the same way you place them anywhere else in your page: with the <img /> element. The only difference is that <img /> must go between a set of <td> or <th> tags. To put an image into a table cell:

<td><image src="/books/4/238/1/html/2/picture.gif" height="#" width="#" alt=" "></td>

Although it is not required, be sure to specify the height and width of the picture, just as you would any other time you place an image on a page. If an image seems too large for your layout, remember that you can reduce the image’s display size by reducing the values in height and width. Another (and better) option is to use your image-editing software to create a smaller version of the graphic. That way, it will take less time to load, and it will generally be a clearer picture.

Add Links with <a> </a>

To add links to your table, use the anchor, the <a> element with a URL, the same way you create any other link. The anchor tag and its URL are cell contents; thus, they go between the <td> or <th> tags on your table. You also can use the <img /> element if you want to create a graphical link.

To put a text link inside a table cell:

<td><a href="cj.htm">Visit CJ's Page</a></td>

To put a graphical link inside a table cell:

<td><a href="cj.htm"><img src="/books/4/238/1/html/2/cjhat.jpg></a></td>
Note

In the preceding example, the different elements are nested inside each other. Nesting is very important when working with tables because if tags overlap, your entire table structure could become confused. If you’re not sure what nesting is, see Chapter 1.

This code creates a four-celled “Family Album” table with both text and graphical links, as shown in the following illustration. Try typing the code yourself and substituting your own pictures and filenames. As you type the code, try to think about what each element is doing and why it is there. Comment lines have been added so you can easily identify the different parts of the code. If you don’t want to type the code, you can download it from the author’s Web site at www.jamespence.com.

<table border="3" cellpadding="10" bgcolor="gold"> <!-- This is the table caption -->      <caption>FAMILY ALBUM</caption> <!-- This is the top row and first cell -->        <tr>           <td align="center"><a href="cj.htm">             <img src="/books/4/238/1/html/2/cjhat.jpg" height="110"                width="90" alt="CJ" />             </a><br /> CJ           </td> <!-- This is the top row and second cell -->           <td><a href="cj.htm">Visit CJ's Page</a>           </td>        </tr> <!-- This is the second row and first cell -->        <tr>            <td align="center"> <a href="cm.htm">             <img src="/books/4/238/1/html/2/cm1.jpg" height="100"               width="100" alt="CM" />             </a><br />CM           </td> <!-- This is the second text link cell -->           <td> <a href="cm.htm">Visit CM's Page</a>           </td>        </tr> </table>

Use Tables for Faster Image Loading

Suppose you have a very large image that you don’t want to reduce. How can you avoid having your visitors view a blank screen while the picture loads? You use a table. Just use a graphics editor to slice the image up into some smaller pieces. Then place one part of the image in each cell and put it back together, just as you would a jigsaw puzzle. To make the image appear seamless, you must specify the following attributes in the opening table tag:

<table border="0" cellpadding="0" cellspacing="0">.

In the illustration that follows, the cellpadding and cellspacing attributes are left at their default sizes of one pixel, so you can see how each cell holds part of the picture.

Miscellaneous Table Features

Several features of tables are worth noting, but at this writing do not enjoy very broad browser support. Attributes such as summary and bordercolor and the <thead>, <tfoot>, and <tbody> elements can be useful. As you would with CSS, however, be cautious in using them.

Summarize Tables with the summary Attribute

The summary attribute goes in the opening table tag and is supposed to contain a description of the table for nonvisual browsers. This will help people who visit your site with Braille or aural browsers to get an idea of what your table contains. For example, for the preceding family album table, you could write a summary that reads as follows:

<table summary="This is my online family album with pictures and links to my children's pages.  CJ's picture and link is  first and CM's picture and link is second">

Summary promises to be an important aspect of tables in the future, but it is not yet well supported. Still, it won’t hurt to take advantage of it now. It will save you the trouble of going back and modifying your pages later.

Set Border Colors with the bordercolor Attribute

The bordercolor attribute is an Internet Explorer extension to HTML. In other words, it is not part of the XHTML recommendation and should be considered a deprecated attribute. Bordercolor enables you to use HTML to set a color for your table borders. The bordercolorlight and bordercolordark attributes are also IE Extensions. They enable you to create a 3-D effect by choosing two different colors to apply to the border. These attributes are safe to use as long as you remember that your XHTML pages will not validate when you use them, and some of your visitors will not see the colored border. To see bordercolor in action, modify the code for the family album table by changing the opening table tag to read as follows:

<table border="3" cellpadding="10" bgcolor="yellow"        bordercolor="red">

If your browser supports this attribute, you should see a red border around the table. if you’re using IE, you can give the border a 3-D look by trying the bordercolorlight and bordercolordark attributes. See how it works by changing the preceding attributes to read as follows:

bordercolorlight="red" bordercolordark="maroon" 
Note

As of this writing, the bordercolorlight and bordercolordark attributes are supported only by Internet Explorer. However, Netscape 7 has added support for the bordercolor attribute.

Group rows with <thead>, <tfoot>, and <tbody>

Some useful (although not well supported) elements are the <thead>, <tfoot>, and <tbody> elements. These elements enable you to display a large table with a permanent or static header and footer. If you have a lot of data on a page, the header and footer will remain stationary while the table data scrolls. You have to set up this type of table a little differently, with the <thead> and <tfoot> elements at the top, followed by the <tbody> element. A simple construction is given in the following. Notice how the browser puts the footer cell at the bottom, even though in the code it comes second:

<table>   <thead><tr><td>Header</td><tr></thead>   <tfoot><tr><td>Footer</td></tr></tfoot>   <tbody><tr><td>Body</td></tr></tbody> </table>

Group Columns with <colgroup> and <col />

The <colgroup> and <col /> elements make it possible for you to form groups of table columns and set their attributes collectively. For example, say you used a table to create a five-column spreadsheet. You have decided that you would like to have the first two columns display with a red background, but the next three columns to remain white. By adding the following two lines of markup, you can control the background colors of these columns as if they were two groups rather than five individual columns:

<table> <colgroup span="2" bgcolor="red" /> <colgroup span="3" /> <tr>(Beginning of first row)
Caution

Notice that <colgroup /> is written as an empty element.

If you look at the following illustration you will see that the first two columns have been colored red while the next three are white. This is because the span attribute in the first <colgroup> is set to a value of 2, which means that this element controls two columns. The second <colgroup /> has span set to 3, giving it control over three columns.

click to expand

As you can see, the <colgroup /> element is useful in applying attributes to groups of columns, but what if you want to modify the contents of just one column? Perhaps you would like to have the contents of columns C, D, and E centered, and give D background color of yellow, but you want the other two columns (C and E) to retain a white background. To accomplish this, you use the <col /> element with <colgroup>.

The <col /> element performs the same function as does span. It specifies the number of columns in a group. However, the difference is that you have individual control over each column. You would write your markup this way:

<table>    <colgroup span="2" bgcolor="red" />    <colgroup>      <col  align="center" />      <col bgcolor="yellow" align="center" />      <col  align="center" />    </colgroup>    <tr>(Beginning of first row)

In place of the span attribute, you use the <col /> element one time for each column to be represented. Then, in each of the <col /> tags, you can add the attributes you need. If you try this with a simple table, your results should look something like the following illustration:

click to expand

When used with the span attribute, the <colgroup> element is written as an empty element: <colgroup span="#" />. However, when you are using the <col /> element instead of span, then you must use opening and closing tags for colgroup, as in the following:

<colgroup>    <col />    <col /> </colgroup>

Project 12: Create a Table-Based Web Page Layout

In this chapter, you have learned how to create tables and use them for data structure or page layout. In this project, you will apply what you have learned about XHTML and about tables as you create a simple table-based page layout. To complete this project you will need a banner graphic for your page’s logo. If you’d rather not create your own, or don’t have the necessary software, you can download the banner directly from the author’s Web site at www.jamespence.com. When you have worked through the steps that follow, your page should resemble Figure 8-1.

click to expand
Figure 8-1: A Table-based Web Page Layout

Tip

The complete code for this exercise is included in the “Quick Reference” section that follows. If you get stuck, check the code.

  1. Open index.htm or create a new XHTML document named index.htm. If you create a new file, remember to save it in a different directory or you will overwrite your existing index.htm

  2. Add a !DOCTYPE line identifying the document as XHTML 1.0 Transitional DTD. If you need to refresh your memory on how to do this, go back to Chapter 7 or check the code in the next section.

  3. Set the <title> for the page to Using Tables for Page Layout.

  4. Add a <style> element between the <head> tags and use the CSS background-color property to set the page background to white.

  5. After the opening <body> tag insert an opening <div> tag and include a style attribute with the CSS text-align property set to center.

  6. Next, add an opening <table> tag. Set the width to 100 percent, the border to 1 pixel, the cellpadding and cellspacing to 0 pixels, and add a summary that says Page Layout.

  7. Now, set the dimensions of your vertical columns by using the <colgroup> element. Below the opening <colgroup> tag, add two <col /> elements. Set the width of the first to 15 percent and the second to 85 percent.

  8. In the next few steps, you will define the header of your table and page with the <thead> element. First insert an opening <thead> tag.

  9. Now, begin a row by adding an opening <tr> tag.

  10. Because this row will have only one cell, add an opening <td> tag. Use the align attribute to center its contents, and set the colspan attribute to 2.

  11. Add an <img /> element pointing to your banner. If you are using the banner file that is found in Figure 8-1, the file name is banner.gif. Don’t forget to set the height and width attributes and to add a description with the alt attribute.

  12. Now supply closing </td>, </tr>, and </thead> tags.

  13. Your table footer will come next. You will use the <tfoot> element for this. For the footer you are going to write a brief copyright notice. This would also be a great place to put a list of text-based links on a graphics heavy page. Begin by adding an opening <tfoot> element and follow it with a new opening <tr>.

  14. Insert an opening <td> element and set the colspan attribute to 2. You might also try giving the footer a slightly different appearance from the rest of the text on the page. In this example, the style element has been used to set the font-family to Arial (or sansserif) and to reduce the size to .75em. The align attribute has been used to center the content. You might want to make some other changes, perhaps some different colors.

  15. After the opening <td> element, add your copyright line. Don’t forget to use the entity for the copyright symbol: &copy;.

  16. Now, add closing </td>, </tr>, and </tfoot> tags to finish off this section of your page.

  17. The body of your table is next, and you begin by adding an opening <tbody> tag, followed by opening <tr> and <td> tags. In the opening <td> tag, use the bgcolor attribute to set the cell color to aqua and the align attribute to set the alignment to left.

  18. Now copy and paste the entire list of links from your original index.htm into your page, just past the opening <td> tag. Be sure to get the entire list, including the <ul> </ul> tags. After the closing </ul> tag, add a closing </td> tag to finish off that cell.

  19. Begin a new cell by adding a new opening <td> tag. Use the valign attribute and a value of "middle" to vertically align the cell contents in the center of the cell.

  20. Next, add an opening paragraph <p> tag. Apply the style attribute to set the font-size property to a value of 2em.

  21. Add some text after the paragraph tag and then close the paragraph out with a closing </p> tag.

  22. Finally, close out the rest of your tags by adding in this order: </td>, </tr>, </tbody>, </table>, </div>, and, if you need to, </body> and </html>.

  23. Now save your page and view it in your browser. It should look something like Figure 8-1. If it doesn’t, compare your code with the code in the next section to see if you can spot any mistakes.




How to Do Everything with HTML & XHTML
How to Do Everything with HTML & XHTML
ISBN: 0072231297
EAN: 2147483647
Year: 2003
Pages: 126

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net