Main Page

Previous Page
Next Page

[Page 1341 (continued)]

J.10. Basic XHTML Tables

This section presents the XHTML tablea frequently used feature that organizes data into rows and columns. Our first example (Fig. J.10) uses a table with six rows and two columns to display price information for fruit.

Figure J.10. XHTML table.
(This item is displayed on pages 1344 - 1345 in the print version)

 1  <?xml version = "1.0"?>
 2  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 3     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 5  <!-- Fig. J.10: table1.html  -->
 6  <!-- Creating a basic table. -->
 8  <html xmlns = "http://www.w3.org/1999/xhtml">
 9     <head>
10        <title>Creating a basic table</title>
11     </head>
13     <body>
15        <!-- the <table> tag begins table -->
16        <table border = "1" width = "40%"
17           summary = "This table provides information about
18              the price of fruit">
20           <!-- <caption> tag summarizes table's   -->
21           <!-- contents to help visually impaired -->
22           <caption><strong>Price of Fruit</strong></caption>
24           <!-- <thead> is first section of table -->
25           <!-- it formats table header area      -->
26           <thead>
27              <tr> <!-- <tr> inserts one table row -->
28                 <th>Fruit</th> <!-- insert heading cell -->
29                 <th>Price</th>
30              </tr>
31           </thead>
33           <!-- all table content is enclosed within <tbody> -->
34           <tbody>
35              <tr>
36                 <td>Apple</td> <!-- insert data cell -->
37                 <td>$0.25</td>
38              </tr>
40              <tr>
41                 <td>Orange</td>
42                 <td>$0.50</td>
43              </tr>
45              <tr>
46                 <td>Banana</td>
47                 <td>$1.00</td>
48              </tr>
50              <tr>
51                 <td>Pineapple</td>
52                 <td>$2.00</td>
53              </tr>
54           </tbody>
56           <!-- <tfoot> is last section of table -->
57           <!-- it formats table footer          -->
58           <tfoot>
59              <tr>
60                 <th>Total</th>
61                 <th>$3.75</th>
62              </tr>
63           </tfoot>
65        </table>
67     </body>
68  </html>

[Page 1343]

Tables are defined with the table element. Lines 1618 specify the start tag for a table element that has several attributes. The border attribute specifies the table's border width in pixels. To create a table without a border, set border to "0". This example assigns attribute width "40%", to set the table's width to 40 percent of the browser's width. A developer can also set attribute width to a specified number of pixels.

[Page 1344]

As its name implies, attribute summary (line 17) describes the table's contents. Speech devices use this attribute to make the table more accessible to users with visual impairments. The caption element (line 22) describes the table's content and helps text-based browsers interpret the table data. Text inside the <caption> tag is rendered above the table by most browsers. Attribute summary and element caption are two of many XHTML features that make Web pages more accessible to users with disabilities.

[Page 1345]

Error-Prevention Tip J.1

Try resizing the browser window to see how the width of the window affects the width of the table.

A table has three distinct sectionshead, body and foot. The head section (or header cell) is defined with a thead element (lines 2631), which contains header information, such as column names. Each tr element (lines 2730) defines an individual table row. The columns in the head section are defined with th elements. Most browsers center text formatted by th (table header column) elements and display it in bold. Table header elements are nested inside table row elements.

[Page 1346]

The body section, or table body, contains the table's primary data. The table body (lines 3454) is defined in a tbody element. Data cells contain individual pieces of data and are defined with td (table data) elements.

The foot section (lines 5863) is defined with a tfoot (table foot) element and represents a footer. Text commonly placed in the footer includes calculation results and footnotes. Like other sections, the foot section can contain table rows and each row can contain columns.

Previous Page
Next Page