Table Size and Alignment

The sizes of cells in a table are governed by the size of the data within the cells. The table is as wide as the total of the widths of the widest cells. The table is as tall as the combined heights of the rows. In some cases, however, you may want to specify a width and/or height for a table irrespective of the data it contains.

Table Widths and Heights

The overall table width is supplied by the width property, and its height is given by the height property. Sizes can be measured in pixels -- to set exact sizes; or they can be expressed as percentages of the width and height of the browser window -- to vary the table size to correspond with the window size.

The table in Figure 8-23 is shown at its default width and height. It is sized no larger than is needed to display the data contained in its cells.

Cell 1.1 Cell 1.2 Cell 1.3

Cell 2.1 Cell 2.2 Cell 2.3

Cell 3.1 Cell 3.2 Cell 3.3

Figure 8-23. Table with default width and height.

This same table is redisplayed in Figure 8-24 with the specified width and height shown in the accompanying style sheet.

Cell 1.1 Cell 1.2 Cell 1.3

Cell 2.1 Cell 2.2 Cell 2.3

Cell 3.1 Cell 3.2 Cell 3.3

Figure 8-24. Table with specified width and height.

<style type="text/css">
  table    {border:outset 1; width:50%; height:100px;}
  table td {border:inset 1;}
</style>

Listing 8-23. Code for table with given width and height.

The table width is set to 50% of the page width. If you resize your browser window, you can see that the table width remains half as wide as the page. The height is specified as 100 pixels and remains at that height irrespective of the window size. Although it is common to specify table widths for visual design purposes, table heights are normally permitted to expand in size for as many rows as it contains.

Variable and Fixed Table Widths

A table's width can be set using percentages or pixels. A percentage width such as 50%, creates a variable-width table that the browser stretches to take up 50% of the browser window regardless of the screen resolution or window size. A table width of 100% can be used when you want the table to fill the entire browser window. Pixels can be used to set the width for a fixed-width table. This provides a more consistent look across different browsers. A table with a width of 500px will only take up 500 pixels of the browser window regardless of the screen resolution or window size. In many cases, fixed-width tables are centered on the page.

Column Widths

You can control column widths by specifying a size for any one cell in each column. This single cell width becomes the width to which all other cells in the column conform. The following table is sized to 50% of the width of the window. Subsequently, cells in the first row of the table (containing column headings in this case) are assigned width percentages. These percentages are of the width of the table, not of the page. Therefore, the sum of column widths should add up to 100%: the full width of the table.

Column 1 Column 2 Column 3

Cell 1.1 Cell 1.2 Cell 1.3

Cell 2.1 Cell 2.2 Cell 2.3

Cell 3.1 Cell 3.2 Cell 3.3

Figure 8-25. Table with specified column widths.

<style type="text/css">
  table          {border:outset 1; width:50%;}
  table td       {border:inset 1;}
  table tr#HEAD  {font-weight:bold;
                  text-align:center;
                  background-color:#F0F0F0;}
  table td#CELL1 {width:25%;}
  table td#CELL2 {width:50%;}
  table td#CELL3 {width:25%;}
</style>

<table>
  <tr id="HEAD">
    <td id="CELL1">Column 1</td>
    <td id="CELL2">Column 2</td>
    <td id="CELL3">Column 3</td>
  </tr>
  <tr>
    <td>Cell 1.1</td>
    <td>Cell 1.2</td>
    <td>Cell 1.3</td>
  </tr>
  <tr>
    <td>Cell 2.1</td>
    <td>Cell 2.2</td>
    <td>Cell 2.3</td>
  </tr>
  <tr>
    <td>Cell 3.1</td>
    <td>Cell 3.2</td>
    <td>Cell 3.3</td>
  </tr>
</table>

Listing 8-24. Code for table with specified column widths.

It is not necessary to provide width percentages for all cells across a row. Any remaining cells on a row are sized equally by the browser so that the widths of all cells along the row total 100% of the width of the table. If cell widths are not sized sufficiently to display their data, the browser increases the widths to the minimum needed.

Rather than using percentages, you can specify table widths in pixels. However, you should typically use percentages to give the browser sufficient latitude in sizing the table to fit within the available window width.

You can set rows heights in the same way you set column widths: specify the height for one cell along the row and the other cells expand to conform to that height. Unless you have a reason for expanding the height of a row, you should let the browser determine the necessary height to display the data in the table.

Table Alignment

A Table
Column 1	Column 2	Column 3
Cell 1.1	Cell 1.2	Cell 1.3
Cell 2.1	Cell 2.2	Cell 2.3
Cell 3.1	Cell 3.2	Cell 3.3

Figure 8-26. A right-floated table.

Tables can be aligned to the left or right of the page by applying the float property to the table selector. When the table is floated, word wrapping takes place around the table in a fashion similar to the way word wrapping occurs around floated images.

Code for a floated table appears immediately before the text to be wrapped around the table. Margins can be added to sides of the table to leave white space between the table and the wrapped text. The following partial style sheet applies to the floated table shown in Figure 8-26.

<style type="text/css">
  table {border:outset 1; float:right; margin-left:20px; margin-bottom:10px;}
  ...
</style>

Listing 8-25. Partial style sheet for a floated table.

A table can be aligned to the left, right, or centered on a line by itself by using margin-left and margin-right properties. The table in Figure 8-27 shows a table centered by using margin-left:auto; margin-right:auto;.

A Centered Table
Column 1 Column 2 Column 3

Cell 1.1 Cell 1.2 Cell 1.3

Cell 2.1 Cell 2.2 Cell 2.3

Cell 3.1 Cell 3.2 Cell 3.3

Figure 8-27. A centered table.

<style type="text/css"> 
  table         {border:outset 1; margin-left:auto; margin-right:auto;}
  table td      {border:inset 1; text-align:center;}
  table caption {font-weight:bold;}
  table tr#HEAD {font-weight:bold;
                 text-align:center;
                 background-color:#F0F0F0;}
</style>

<table>
  <caption>A Centered Table</caption>
    ...
</table>

Listing 8-26. Style sheet for a centered table.

Deprecated Table Attributes

The width of a table is given by the width="n" attribute of the <table> tag, where n is a pixel width value or a percentage of the width of the browser window.

Cell 1.1	Cell 1.2	Cell 1.3
Cell 2.1	Cell 2.2	Cell 2.3
Cell 3.1	Cell 3.2	Cell 3.3

Cell widths can be set to a pixel value or percentage with the width attribute coded in a <td> or <th> tag. Cell heights are given with the height="n" attribute.

A table can be aligned at the left or right of the page with the align="left|right" attribute of the <table> tag. Text is wrapped around the positioned table. White space surrounding the table must be added with style sheet margin settings. A table with align="center" appears centered on a line by itself.

<table border="1" align="center">
Cell 1.1	Cell 1.2	Cell 1.3
Cell 2.1	Cell 2.2	Cell 2.3
Cell 3.1	Cell 3.2	Cell 3.3

<table border="1" align="right">
Cell 1.1	Cell 1.2	Cell 1.3
Cell 2.1	Cell 2.2	Cell 2.3
Cell 3.1	Cell 3.2	Cell 3.3