By the Way
There are actually width and height attributes that were deprecated in the move to XHTML. They still work in web browsers but you should focus on using the width and height style properties instead, because they represent the appropriate approach to use in XHTML.
To make the first cell of the table 20% of the total table width and the second cell 80% of the table width, you would type the following:
<table style="width:100%"> <tr> <td style="width:20%">skinny cell</td> <td style="width:80%">fat cell</td> </tr> </table>
Notice that the table is
Alignment and Spanning Within Tables
By default, anything you place inside a table
You can apply these attributes to any
tag. Alignment attributes assigned to a
tag apply to all cells in that row. Depending on the
Figure 11.2. The
attribute in Listing 11.2 allows the
Did you Know?
Following are some of the more commonly used vertical-align style property values: top , middle , bottom , text-top , text-bottom , and baseline (for text). These property values give you plenty of flexibility in aligning table data vertically.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Things to Fear</title> </head> <body> <table border="2" cellpadding="4" cellspacing="2"> <tr style="background-color:silver"> <th colspan="2">Description</th> <th>Size</th> <th>Weight</th> <th>Speed</th> </tr> <tr style="vertical-align:top"> <td><img src="handgun.gif" alt=".38 Special"/></td> <td><h2>.38 Special</h2></td> <td>Five-inch barrel.</td> <td>Twenty ounces.</td> <td>Six rounds in four seconds.</td> </tr> <tr style="vertical-align:top"> <td><img src="rhino.gif" alt="Rhinoceros" /></td> <td><h2>Rhinoceros</h2></td> <td>Twelve feet, horn to tail.</td> <td>Up to two tons.</td> <td>Thirty-five miles per hour in bursts.</td> </tr> <tr style="vertical-align:top"> <td><img src="axeman.gif" alt="Broad Axe " /></td> <td><h2>Broad Axe</h2></td> <td>Thirty-inch blade.</td> <td>Twelve pounds.</td> <td>Sixty miles per hour on impact.</td> </tr> </table> </body> </html>
At the top of Figure 11.2, a single cell (Description)
Spanning is the process of forcing a cell to stretch across more than one row or column of a table. The colspan attribute causes a cell to span across multiple columns; rowspan has the same effect on rows.
Did you Know?
Keeping the structure of rows and columns organized in your mind can be the most difficult part of creating tables with cells that span multiple columns or rows. The tiniest error can often throw the whole thing into disarray. You'll save yourself time and frustration by sketching your tables on paper before you start writing the HTML to implement them.
You can also use visual web design software to arrange the rows and columns in your table. This can make table design much easier, as long as you choose a program (such as Microsoft FrontPage or Macromedia Dreamweaver) that creates well-formatted HTML that you can edit by hand when you choose.