Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP

8.2. Formatting Tables

Tables are one of the most versatile elements in XHTML. You can use them to simply align other elements or as layout control for a full document. Along with functionality usually comes complexity, and tables are no exception — you can use many options and attributes to format tables. The following sections detail the various formatting options available.

8.2.1. Table Width and Alignment

Typically, a table will expand to accommodate the data stored within its cells. For example, consider the two tables in the following code, whose output is shown in Figure 8-2:

<p>
  Short Text Table<br />
  <table border="1">
      <tr><td>Short Text 1</td><td>Short Text 2</td></tr>
  </table>
</p>

<p>
  Longer Text Table<br />
  <table border="1">
      <tr><td>Much Longer Text 1</td><td>Much Longer Text 2</td></tr>
  </table>
</p>

Figure 8-2. Figure 8-2

Once a table expands to the limits of the user agent's window, the content of its cells will wrap within their respective cells.

Note that both tables are left-aligned in the user agent window.

However, there are times when you want to explicitly define a table's width and possibly its alignment.

8.2.1.1. Controlling Table Width

Using the width attribute in the <table> tag, you can set a table's size by specifying the table width in pixels or as a percentage of the containing object. For example, consider the following table whose width is ...