Copyright © 2003 Pearson Education, Inc. Slide 5-1 Created by Cheryl M. Hughes The Web Wizards...

Copyright © 2003 Pearson Education, Inc. Slide 5-1

Created by Cheryl M. Hughes

The Web Wizard’s Guide to XML by Cheryl M. Hughes


CHAPTER 5XHTML Tables


Overview of Tables

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


Table Elements

<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: <thead> - Used to label the header section of a table. The

contents are displayed at the top of the table <tfoot> - Used to label the footer section of a table. The

contents are displayed at the bottom of the table <tbody> - Used to label the body section of a table

Simple Table Example- XHTML Code

1 <?xml version="1.0"?>2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

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

3 <html xmlns="http://www.w3.org/1999/xhtml">4 <head>5 <title>Table Example in XHTML</title>6 </head>7 <body>8 <div style=“align:center"><h1>Our First

Table</h1></div>9 10 <table border="1">11 <caption>A Simple Table of

Columns and Rows</caption>12 13 <tr>14 <th>Column 1</th>15 <th>Column 2</th>16 <th>Column 3</th>17 </tr>18 

19 20 <tr>21 <td>Column 1 <br /> Row 2</td>22 <td>Column 2 <br /> Row 2</td>23 <td>Column 3 <br /> Row 2</td>24 </tr>25 26 27 <tr>28 <td>Column 1 <br /> Row 3</td>29 <td>Column 2 <br /> Row 3</td>30 <td>Column 3 <br /> Row 3</td>31 </tr>32 33 </table>34 35 </body>36 </html>


Simple Table Example – Web Browser


<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.


cellspacing Sets the amount of space between cells.


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


<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 cellValues: 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 spanValues: 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 forValues: col, colspan, row, rowspan


<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 rowValues: top, middle, bottom


More About Tables

Spanning several rows or columns Tables can be used to format content by creating

content than span several rows and/or columns 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 All of the elements of a nested table , including <table>

and </table>, are contained within a single cell 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


Complex Table Example

Outer table is Gray Nested tables are Pink

Copyright © 2003 Pearson Education, Inc. Slide 5-1 Created by Cheryl M. Hughes The Web Wizards...

Documents

Transcript of Copyright © 2003 Pearson Education, Inc. Slide 5-1 Created by Cheryl M. Hughes The Web Wizards...