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 ...

Get Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.