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

2. Lesson 6: Tables

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

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

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

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

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

8. <td> Tag Table data tag designates table cell contents
Attributes include:
align
valign
colspan
rowspan
bgcolor
height
width

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

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

11. Working with Table Data
Changing height and width of table elements
Column and row spanning
Formatting content in tables

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