Introduction to Tables | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

In its simplest form, a table places information inside the cells formed by dividing a rectangle into rows and columns . Most cells contain data; some cells, usually on the table's top or side, contain headings. HTML and XHTML represent a basic table using four elements. In markup, a table tag pair, <table> </table> , contains an optional caption element, followed by one or more rows, <tr> </tr> . Each row contains cells holding a heading, <th> </th> , or data, <td> </td> . However, for most purposes, the following example illustrates a basic table. Note that the only attribute used in this example is border , which is used to specify a 1-pixel border so it is clear what the table looks like. The rendering for the simple table under various browsers is shown in Figure 7-1.

Figure 7-1: Browser renderings of a simple example

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Simple Table Example  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <table border="1">   <caption>  Basic Fruit Comparison Chart  </caption>   <tr>   <th>  Fruit  </th>   <th>  Color  </th>   </tr>   <tr>   <td>  Apple  </td>   <td>  Red  </td>   </tr>   <tr>   <td>  Kiwi  </td>   <td>  Green  </td>   </tr>   <tr>   <td>  Watermelon  </td>   <td>  Pink  </td>   </tr>   </table>   </body>   </html>

A table is made up of rows enclosed within <tr> </tr> . The number of rows in the table is determined by the number of occurrences of the tr element. What about columns? Generally , the number of columns in a table is determined by the maximum number of data cells in one row indicated by <td> </td> , or headings indicated by <th> </th> within the table. The headings for the table are set using the th element. Generally, the browser renders the style of headings differently, usually centering the contents of the heading and placing the text in bold style. The actual cells of the table are indicated by the td element. Both the td and th elements can enclose an arbitrary amount of data of just about any type. In the previous example, a full paragraph of text could be enclosed in a table cell along with an image, lists, and links. The table might also have a caption enclosed within <caption> </caption> , whose contents generally are rendered above or below the table, indicating what the table contains.

Note	Under Internet Explorer 4 or better, it is possible to hint to the browser the number of columns used in the table by setting the cols attribute. This is used to improve rendering speed, but is nonstandard.

Technically speaking, under HTML 4 transitional, the closing tags for the <tr> , <th> , and <td> tags are optional. Although this might make for cleaner-looking code in your HTML documents, HTML writers are still encouraged to use the closing tags, as well as indentation. This ensures that table cells and rows are clearly defined, particularly for nested tables. It also helps to avoid problems with versions of Netscape that often "break" tables that don't use closing tags for these elements. And because XHTML, which requires closing tags for all nonempty elements, is the new standard, you should always close table tags.

The rowspan and colspan Attributes

Whereas the preceding example shows that it is possible to create a table with a simple structure, what about when the table cells need to be larger or smaller? The following markup creates tables that are somewhat more complicated. By adding the rowspan and colspan attributes to the table elements, it is possible to create data cells that span a given number of rows or columns. The rendering of this code appears in Figure 7-2.

Figure 7-2: Rendering of rowspan and colspan

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  ROWSPAN and COLSPAN  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <table border="1">   <caption>  ROWSPAN Example  </caption>   <tr>   <td rowspan="2">  Element 1  </td>   <td>  Element 2  </td>   </tr>   <tr>   <td>  Element 3  </td>   </tr>   </table>   <br /><br />   <table border="1">   <caption>  COLSPAN Example  </caption>   <tr>   <td colspan="3">  Element 1  </td>   </tr>   <tr>   <td>  Element 2  </td>   <td>  Element 3  </td>   <td>  Element 4  </td>   </tr>   </table>   </body>   </html>

The basic idea of the rowspan and colspan attributes for <td> and <th> is to extend the size of the cells across two or more rows or columns, respectively. To set a cell to span three rows, use <td rowspan="3">; to set a heading to span two columns, use <th colspan="2"> . Setting the value of colspan or rowspan to more than the number of columns or rows in the table should not extend the size of the table. Be aware, however, that some browsers require precise use of these span attributes. Consider the following markup:

  <table border="1">   <tr>   <td>  Element 1  </td>   <td>  Element 2  </td>   <td rowspan="2">  Element 3  </td>   </tr>   <tr>   <td>  Element 4  </td>   <td>  Element 5  </td>   <td>  Element 6  </td>   </tr>   </table>

Most browsers will render this code something like this:

The reason is quite simple: The last data cell in the second row should have been removed to account for the rowspan in cell 3 of the first row, like this:

  <table border="1">   <tr>   <td>  Element 1  </td>   <td>  Element 2  </td>   <td rowspan="2">  Element 3  </td>   </tr>   <tr>   <td>  Element 4  </td>   <td>  Element 5  </td>   </tr>   </table>

The rendering of the improved markup now works properly:

Full Table Example

Aside from being able to span rows and columns, the table element, and its enclosed elements td , th , and caption , support a variety of attributes for alignment ( align and valign ), sizing ( width ), presentation ( bgcolor and background ), and layout ( cellpadding and cellspacing ). These attributes will be explained in the next section, but you can probably infer their use by looking at the following example, which shows a more complex kind of table:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Complex Table Example  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <table align="left" border="1" width="300" cellspacing="0">   <caption align="bottom">  The Super Widget  </caption>   <tr>   <td rowspan="2">   <img src="widget.gif" alt="super widget" width="100" height="120" />   </td>   <th bgcolor="lightgreen">  Specifications  </th>   </tr>   <tr>   <td valign="middle" align="left">   <ul>   <li>  Diameter: 10 cm  </li>   <li>  Composition: Kryptonite  </li>   <li>  Color: Green  </li>   </ul>   </td>   </tr>   </table>   <p>  Notice how the text of a paragraph can flow around a table  just as it would any other embedded object form. Notice how  the text of a paragraph can flow around a table just as it  would any other embedded object form. Notice how the text  of a paragraph can flow around a table just as it would  any other embedded object form. Notice how the text  of a paragraph can flow around a table just as it would  any other embedded object form. Notice how the text  of a paragraph can flow around a table just as it would  any other embedded object form. Notice how the text  of a paragraph can flow around a table just as it would  any other embedded object form. Notice how the text  of a paragraph can flow around a table just as it would  any other embedded object form. Notice how the text  of a paragraph can flow around a table just as it would  any other embedded object form.  </p>   </body>   </html>

The rendering of the previous example, as shown in Figure 7-3, suggests that it is possible to place any form of content in a cell including even other tables, although this is not recommended if it can be avoided. Furthermore, it appears we have full control over the individual size of the cells and the table itself. With these features, we now have the facilities required to control layout using a <table> tag to create a grid on the page.

Figure 7-3: Advanced table hints at layout possibilities

< Day Day Up >