G.3. Intermediate XHTML Tables and Formatting

In the preceding section, we explored the structure of a basic table. In Fig. G.2, we enhance our discussion of tables by introducing elements and attributes that allow the document author to build more complex tables.

Figure G.2. Complex XHTML table.

 1  "1.0"?>
 2  "-//W3C//DTD XHTML 1.1//EN"
 3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
"http://www.w3.org/1999/xhtml"> 9 10 Internet and WWW How to Program - Tables 11 12 13 14 15

Table Example Page

16 17 "1">181920212223 242526 "right"span ="1"/>27 282930313233343536404142464748"bottom">49505152535455565758596061626364656667686970717273747576 77
Here is a more complex sample table.
"2"> 37 "camel.gif" width = "205" 38 height = "167" alt = "Picture of a camel" /> 39 "4" valign = "top"> 43

Camelid comparison


Approximate as of 9/2002

# of Humps Indigenous region Spits? Produces Wool?
Camels (bactrian) 2 Africa/Asia Yes Yes
Llamas 1 Andes Mountains Yes Yes
78 79 80

The table begins in line 17. Element colgroup (lines 2227) groups and formats columns. The col element (line 26) specifies two attributes in this example. The align attribute determines the alignment of text in the column. The span attribute determines how many columns the col element formats. In this case, we set align's value to "right" and span's value to "1" to right align text in the first column (the column containing the picture of the camel in the sample screen capture).

Table cells are sized to fit the data they contain. Document authors can create larger data cells by 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 3639 uses the attribute rowspan = "2" to allow the cell containing the picture of the camel to use two vertically adjacent cells (thus the cell spans two rows). The th element in lines 4245 uses the attribute colspan = "4" to widen the header cell (containing Camelid comparison and Approximate as of 9/2002) to span four cells.

Common Programming Error G 1

When using colspan and rowspan to adjust the size of table data cells, keep in mind that the modified cells will occupy more than one column or row. Other rows or columns of the table must compensate for the extra rows or columns spanned by individual cells. If they do not, the formatting of your table will be distorted and you may inadvertently create more columns and rows than you originally intended.


Line 42 introduces the attribute valign, which aligns data vertically and may be assigned one of four values"top" aligns data with the top of the cell, "middle" vertically centers data (the default for all data and header cells), "bottom" aligns data with the bottom of the cell and "baseline" ignores the fonts used for the row data and sets the bottom of all text in the row on a common baseline (i.e., the horizontal line at which each character in a word is aligned).



    Introduction to Computers, the Internet and Visual C#

    Introduction to the Visual C# 2005 Express Edition IDE

    Introduction to C# Applications

    Introduction to Classes and Objects

    Control Statements: Part 1

    Control Statements: Part 2

    Methods: A Deeper Look


    Classes and Objects: A Deeper Look

    Object-Oriented Programming: Inheritance

    Polymorphism, Interfaces & Operator Overloading

    Exception Handling

    Graphical User Interface Concepts: Part 1

    Graphical User Interface Concepts: Part 2


    Strings, Characters and Regular Expressions

    Graphics and Multimedia

    Files and Streams

    Extensible Markup Language (XML)

    Database, SQL and ADO.NET

    ASP.NET 2.0, Web Forms and Web Controls

    Web Services

    Networking: Streams-Based Sockets and Datagrams

    Searching and Sorting

    Data Structures



    Appendix A. Operator Precedence Chart

    Appendix B. Number Systems

    Appendix C. Using the Visual Studio 2005 Debugger

    Appendix D. ASCII Character Set

    Appendix E. Unicode®

    Appendix F. Introduction to XHTML: Part 1

    Appendix G. Introduction to XHTML: Part 2

    Appendix H. HTML/XHTML Special Characters

    Appendix I. HTML/XHTML Colors

    Appendix J. ATM Case Study Code

    Appendix K. UML 2: Additional Diagram Types

    Appendix L. Simple Types


    Visual C# How to Program
    Visual C# 2005 How to Program (2nd Edition)
    ISBN: 0131525239
    EAN: 2147483647
    Year: 2004
    Pages: 600

    Flylib.com © 2008-2020.
    If you may any questions please contact us: flylib@qtcs.net