Chapter: Internet & World Wide Web HOW TO PROGRAM - The Ajax Client - Introduction to XHTML

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

Tables - XHTML

Tables are frequently used to organize data into rows and columns. Our first example (Fig. 4.10) creates a table with six rows and two columns to display price information for fruit.

Tables

 

Tables are frequently used to organize data into rows and columns. Our first example (Fig. 4.10) creates a table with six rows and two columns to display price information for fruit.

 

Tables are defined with the table element (lines 15–62). Lines 15–17 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 the value "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. Try resizing the browser window to see how the width of the window affects the width of the table.

 

As its name implies, attribute summary (lines 16–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 21) describes the table’s content and helps text

        <?xml version = "1.0" encoding = "utf-8"?>

 

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

        <!-- Fig. 4.10: table1.html -->

 

        <!-- Creating a basic table. -->

 

        <html xmlns = "http://www.w3.org/1999/xhtml">

 

              <head>

 

                     <title>A simple XHTML table</title>

 

                </head>

         <body>

 

                       <!-- the <table> tag opens a table -->

 

                       <table border = "1" width = "40%"

 

                             summary = "This table provides information about the price of fruit">

 

                             <!-- the <caption> tag summarizes the table's -->

 

                             <!-- contents (this helps the visually impaired) -->

 

                             <caption><strong>Price of Fruit</strong></caption>

 

 

                             <!-- the <thead> section appears first in the table -->

 

                             <!-- it formats the table header area -->

 

                             <thead>

                             <tr> <!-- <tr> inserts     a table row -->

                             <th>Fruit</th>     <!--    insert a heading cell -->

                             <th>Price</th>             

                                    </tr>

 

                             </thead>

 

                             <!-- the <tfoot> section appears last in the table -->

 

                             <!-- it formats the table footer -->

 

                             <tfoot>

<tr>

<th>Total</th>

<th>$3.75</th>

                                    </tr>

 

                             </tfoot>

 

                             <!-- all table content is enclosed -->

 

                             <!-- within the <tbody> -->

 

                             <tbody>

<tr>         

<td>Apple</td> <!-- insert a data cell -->

<td>$0.25</td> 

</tr>        

<tr>

<td>Orange</td>

<td>$0.50</td>

</tr>

<tr>

<td>Banana</td>

<td>$1.00</td>

</tr>

<tr>

<td>Pineapple</td>

<td>$2.00</td>

                                    </tr>

 

                             </tbody>

 

                       </table>

                </body>

 

</html>


Fig. 4.10 | Creating a basic table.

 

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 the many XHTML features that make web pages more accessible to users with disabilities.

A table has three distinct sections—head, body and foot. The head section (or header cell) is defined with a thead element (lines 25–30), which contains header information such as column names. Each tr element (lines 26–29) 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 them in bold. Table header elements are nested inside table row elements (lines 27–28).

 

The body section, or table body, contains the table’s primary data. The table body (lines 43–60) is defined in a tbody element. In the body, each tr element specifies one row. Data cells contain individual pieces of data and are defined with td (table data) ele-ments in each row.

 

The foot section (lines 34–39) is defined with a tfoot (table foot) element. The text placed in the footer commonly includes calculation results and footnotes. Like other sec-tions, the foot section can contain table rows, and each row can contain cells. As in the head section, cells in the foot section are created using th elements, instead of the td ele-ments used in the table body. Note that the table foot section must be above the body sec-tion in the code, but the table foot displays at the bottom of the table.

Using rowspan and colspan

 

Figure 4.10 explored a basic table’s structure. Figure 4.11 presents another table example and introduces two new attributes that allow you to build more complex tables.

The table begins in line 15. Table cells are sized to fit the data they contain. Docu-ment authors can create larger data cells using the attributes rowspan and colspan. The values assigned to these attributes specify the number of rows or columns occupied by a cell. The th element at lines 23–26 uses the attribute rowspan = "2" to allow the cell con-taining the picture of the camel to use two vertically adjacent cells (thus the cell spans two rows). The th element in lines 29–32 uses the attribute colspan = "4" to widen the header cell (containing Camelid comparison and Approximate as of 6/2007) to span four cells.

 

        <?xml version = "1.0" encoding = "utf-8"?>

 

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

        <!-- Fig. 4.11: table2.html -->

 

        <!-- Complex XHTML table. -->

 

        <html xmlns = "http://www.w3.org/1999/xhtml">

 

              <head>

 

                     <title>Tables</title>

 

                </head>

 

                <body>

 

                       <h1>Table Example Page</h1>

 

                       <table border = "1">

 

<caption>Here is a more complex sample table.</caption>

<thead>

<!-- rowspans and colspans merge the specified -->

<!-- number of cells vertically or horizontally -->

<tr>

<!-- merge two rows -->

<th rowspan = "2">

                 <img src = "camel.gif" width = "205"

                 height = "167" alt = "Picture of a camel" />

</th>

                  

<!-- merge four columns -->

                 <th colspan = "4">     

                 <h1>Camelid comparison</h1> 

                 <p>Approximate as of 6/2007</p>       

                 </th> 

</tr>

<tr>

<th># of Humps</th>

<th>Indigenous region</th>

<th>Spits?</th>

<th>Produces Wool?</th>

                                    </tr>

 

                             </thead>

 

<tbody>

<tr>

<th>Camels (bactrian)</th>

<td>2</td>

<td>Africa/Asia</td>

<td>Yes</td>

<td>Yes</td>

</tr>

<tr>

<th>Llamas</th>

<td>1</td>

<td>Andes Mountains</td>

<td>Yes</td>

<td>Yes</td>

                                    </tr>

 

                             </tbody>

 

                       </table>

 

                </body>

 

</html>


 

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.