The Web Wizards Guide to XML by Cheryl

CHAPTER 5 XHTML Tables Copyright © 2003 Pearson Education, Inc. 2

Overview of Tables n n XHTML tables are sets of elements used to format content, or even an entire document, into rows and columns Tables can contain any type of content, including text, links, images, and multimedia Tables in XHTML work much the way they do in a spreadsheet or word processing application and resemble a grid Tables can be used to format blocks of content or they can also be used to providing formatting for an entire document Copyright © 2003 Pearson Education, Inc. 3

Table Elements n n n <table> - Encloses the rest of the table elements <caption> - Optional element. Used to describe the data in the table. <tr> - Table Row – Used to designate the beginning and ending of a row of data <th> - Table Heading – Used to label the heading cells in a table row <td> - Table Data – Used to label data cells in a table row Table section labels – These elements are optional in a table but when used they must appear in the following order: n <thead> - Used to label the header section of a table. The contents are displayed at the top of the table n <tfoot> - Used to label the footer section of a table. The contents are displayed at the bottom of the table n <tbody> - Used to label the body section of a table Copyright © 2003 Pearson Education, Inc. 4

Simple Table Example- XHTML Code 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <? xml version="1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 strict. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml" > <head> <title>Table Example in XHTML</title> </head> <body> <div style=“align: center"><h 1>Our First Table</h 1></div>  <table border="1"> <caption>A Simple Table of Columns and Rows</caption>  <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr>  Copyright © 2003 Pearson Education, Inc. 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36  <tr> <td>Column 1 Row 2</td> <td>Column 2 Row 2</td> <td>Column 3 Row 2</td> </tr>   <tr> <td>Column 1 Row 3</td> <td>Column 2 Row 3</td> <td>Column 3 Row 3</td> </tr>  </table>  </body> </html> 5

Simple Table Example – Web Browser Copyright © 2003 Pearson Education, Inc. 6

<table> Element Attributes Name Description and Values summary Text description of the table. Useful for nonvisual browsers. width Sets the width of the table. Values: Percentage or pixels border Sets the width of the border around the table. Values: A value of 0 makes the border invisible. An integer value greater than 0 will result in a border of that number of pixels. cellpadding Sets the amount of space between the border of the table cell and the data contained in the cell. Values: Percentage or pixels cellspacing Sets the amount of space between cells. Values: Percentage or pixels frame Defines which sides of the table will be displayed. Values: above, below, border, box, lhs, bsides, rhs, vsides, void rules Defines which rule lines will be displayed. Values: all, cols, groups, none, rows Copyright © 2003 Pearson Education, Inc. 7

<td> and <th> Element Attributes Name Description and Values align Horizontal alignment of data in a cell Values: left, center, right, justified valign Vertical alignment of data in a cell Values: top, middle, bottom rowspan Number of rows a cell span Values: integer greater than 1 and less than or equal to the total number of rows in the table colspan Number of columns a cell span Values: integer greater than 1 and less than or equal to the total number of columns in the table abbr Used for an abbreviated version of the content of the cell axis Used to assign a cell to a category group headers List of cells that provide header information for the current cell based on the values of the id attributes of the header cells. This list is space delimited. scope Provides information about which cells the current header cell provides header information for Values: col, colspan, rowspan Copyright © 2003 Pearson Education, Inc. 8

<tr> Element Attributes Name Description and Values align Horizontal alignment of data in all cells in a row Values: left, center, right, justified valign Vertical alignment of data in all cells in a row Values: top, middle, bottom Copyright © 2003 Pearson Education, Inc. 9

More About Tables n n Spanning several rows or columns n Tables can be used to format content by creating content than span several rows and/or columns n Use the colspan and rowspan attributes for the <td> and <th> elements Nested tables – A “nested table” is a table that is completely contained within the cell of another table n All of the elements of a nested table , including <table> and </table>, are contained within a single cell n Nesting tables can provide the ability to create complex layouts, but they also add a level of complexity to the XHTML code which can make the document download slower over a slow internet connection Copyright © 2003 Pearson Education, Inc. 10