Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 6: HTML Tables

Lesson 6 Objectives Describe HTML table tags and attributes Use table and data alignment options Change the height and width of table elements Specify column and row spanning Format content in tables

Introduction to HTML Tables Present data that lends itself to tabular format In XHTML, do not use to structure entire pages Offers many formatting options

Table Element Tags ElementTagDescription Table … Required to create a table; contains all other table elements. Table caption … Optional; adds a caption or title, which appear above the table by default. Table row … Required; contains all data for a table row. Table header … Optional; typically designates the top row or left column. By default, text in a header cell will appear bold and centered. Table data … Required, unless is being used; designates table cell contents.

The Tag Table tag creates the table structure encloses all other table elements Attributes include: – align – border – cellpadding – cellspacing – width – summary

The Tag Table row tag creates a row within a table Attributes include: – align – valign – bgcolor – style

The Tag Table data tag designates table cell contents Attributes include: – align – valign – colspan – rowspan – bgcolor – height – width

Differences between HTML and XHTML Tables The align and bgcolor attributes for the tag are deprecated in HTML 4.01 Both attributes for the tag can be used in XHTML 1.0 Transitional, but not in XHTML 1.0 Strict

Table and Data Alignment Options Defaults for table data: – Content in table header cells is aligned both horizontally and vertically to the center of the cell – Content in table data cells is aligned horizontally to the left and vertically to the center You can customize these defaults by using: valign="top" This will make text appear in the top of a cell or row

Working with Table Data Changing height and width of table elements Configuring table cells to span multiple columns or rows Formatting content in tables

Lesson 6 Summary Describe HTML table tags and attributes Use table and data alignment options Change the height and width of table elements Specify column and row spanning Format content in tables