Category list

Controlling the Size of Tables

Ordinarily, the size of a table and its individual cells automatically expand to fit the data you place into it. However, you can choose to control the exact size of the entire table by putting width and/or height styles in the <table> tag. You can also control the size of each cell by putting width and height styles in the individual <td> tags. The width and height styles can be specified as either pixels or percentages. For example, the following code creates a table 500 pixels wide and 400 pixels high:

<table style="width:500px; height:400px">

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 sized to 100%, which makes sure that the table fills the entire width of the browser window. When you use percentages instead of fixed pixel sizes, the table will resize automatically to fit any size browser window, while maintaining the aesthetic balance you're after. In this case, the two cells within the table are automatically resized to 20% and 80% of the total table width, respectively.

Alignment and Spanning Within Tables

By default, anything you place inside a table cell is aligned to the left and vertically centered. You can align the contents of table cells both horizontally and vertically with the text-align and vertical-align style properties.

You can apply these attributes to any <tr> , <td> , or <th> tag. Alignment attributes assigned to a <tr> tag apply to all cells in that row. Depending on the size of your table, you can save yourself a considerable amount of time and effort by applying these attributes at the <tr> level and not in each individual <td> or <th> tag. The HTML code in Listing 11.2 uses style="vertical-align:top" to bring the text to the top of each cell. Figure 11.2 shows the result.

Figure 11.2. The `colspan` attribute in Listing 11.2 allows the upper-left cell to span multiple columns .

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.

Listing 11.2. Alignment, Cell Spacing, Borders, and Background Colors in Tables

<?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) spans two columns. This is accomplished with the colspan="2" attribute in the <th> tag for that cell. As you might guess, you can also use the rowspan attribute to create a cell that spans more than one row.

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.

Buy on amazon.com >>

Oliver D., Morrison M

<< Previous page

Table of contents

Next page >>