Site Development Foundations Lesson 6 © 2004 ProsoftTraining All rights reserved ITD 110 Web Page Design I Instructors: Carlotta Eaton & John Sledd

Lesson 6: Tables

Objectives Create simple and complex tables in HTML and XHTML Add or remove table border lines Format table rows and cells using attributes Use tables when appropriate

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

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

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

<tr> Tag Table row tag creates a row within a table Attributes include: align valign bgcolor style

<td> 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 attribute for the <table> tag is deprecated in HTML 4.01 The align attribute for the <table> tag is deprecated in XHTML 1.0 Transitional 1.0 The bgcolor attribute has also been deprecated

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 Column and row spanning Formatting content in tables

Lesson 6 Summary Lesson 6 Tables See Skills Review page 6-18 Hands On Time