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

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

Copyright © 2003 Pearson Education, Inc. Slide 5-3 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

Copyright © 2003 Pearson Education, Inc. Slide 5-4 Table Elements - Encloses the rest of the table elements - Optional element. Used to describe the data in the table. - Table Row – Used to designate the beginning and ending of a row of data - Table Heading – Used to label the heading cells in a table row - 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: - Used to label the header section of a table. The contents are displayed at the top of the table - Used to label the footer section of a table. The contents are displayed at the bottom of the table - Used to label the body section of a table

Copyright © 2003 Pearson Education, Inc. Slide 5-5 Simple Table Example- XHTML Code Table Example in XHTML Our First Table A Simple Table of Columns and Rows Column 1 15 Column 2 16 Column Column 1 Row 2 22 Column 2 Row 2 23 Column 3 Row Column 1 Row 3 29 Column 2 Row 3 30 Column 3 Row

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

Copyright © 2003 Pearson Education, Inc. Slide 5-7 Element Attributes NameDescription and Values summaryText description of the table. Useful for nonvisual browsers. widthSets the width of the table. Values: Percentage or pixels borderSets 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. cellpaddingSets the amount of space between the border of the table cell and the data contained in the cell. Values: Percentage or pixels cellspacingSets the amount of space between cells. Values: Percentage or pixels frameDefines which sides of the table will be displayed. Values: above, below, border, box, lhs, bsides, rhs, vsides, void rulesDefines which rule lines will be displayed. Values: all, cols, groups, none, rows

Copyright © 2003 Pearson Education, Inc. Slide 5-8 and Element Attributes NameDescription and Values alignHorizontal alignment of data in a cell Values: left, center, right, justified valignVertical alignment of data in a cell Values: top, middle, bottom rowspanNumber of rows a cell span Values: integer greater than 1 and less than or equal to the total number of rows in the table colspanNumber of columns a cell span Values: integer greater than 1 and less than or equal to the total number of columns in the table abbrUsed for an abbreviated version of the content of the cell axisUsed to assign a cell to a category group headersList 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. scopeProvides information about which cells the current header cell provides header information for Values: col, colspan, row, rowspan

Copyright © 2003 Pearson Education, Inc. Slide 5-9 Element Attributes NameDescription and Values alignHorizontal alignment of data in all cells in a row Values: left, center, right, justified valignVertical alignment of data in all cells in a row Values: top, middle, bottom

Copyright © 2003 Pearson Education, Inc. Slide 5-10 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 and 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 and, 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

Copyright © 2003 Pearson Education, Inc. Slide 5-11 Complex Table Example Outer table is Gray Nested tables are Pink