Web Development & Design Web Development & Design Foundations with XHTMLFoundations with XHTML

Chapter 8Key Concepts

Learning OutcomesLearning OutcomesIn this chapter, you will learn how

to:◦ Create a table on a web page◦ Apply attributes to format tables,

table rows, and table cells◦ Format the layout of a Web page with

a table◦ Use nested tables◦ Use CSS to configure an XHTML table

2

TableTableTables are commonly used

on Web pages in two ways:

◦ To organize information◦ To format the layout of an entire

Web page

XHTMLXHTMLUsing TablesUsing Tables

Composed of rows and columns – similar to a spreadsheet.

Each individual table cell is at the intersection of a specific row and column.

Configured with <table>, <tr>, and <td> elements

4

XHTMLXHTMLTable ElementsTable Elements

<table> ElementContains the table

Common attributes: border, width, align

<tr> ElementContains a table row

<td> ElementContains a table cell

<caption> Element◦ Configures a description of the table

5

XHTMLXHTMLTable ExampleTable Example

<table border="1"><caption>Birthday List</caption>

<tr>

<td>Name</td>

<td>Birthday</td>

</tr>

<tr>

<td>James</td>

<td>11/08</td>

</tr>

<tr>

<td>Karen</td>

<td>4/17</td>

</tr>

<tr>

<td>Sparky</td>

<td>11/28</td>

</tr>

</table>

6

Birthday List

XHTMLXHTMLTable Example 2Table Example 2

<table border="1">

<tr>

<th>Name</th>

<th>Birthday</th>

</tr>

<tr>

<td>James</td>

<td>11/08</td>

</tr>

<tr>

<td>Karen</td>

<td>4/17</td>

</tr>

<tr>

<td>Sparky</td>

<td>11/28</td>

</tr>

</table>

7

Using the <th> Element

Hands-On Practice 8.1Hands-On Practice 8.1Pages 314-5Chapter8/starters/services.htmlChapter8/8.1/services.html

XHTMLXHTMLCommon Table AttributesCommon Table Attributes

align (deprecated)bgcolor (deprecated)bordercellpaddingcellspacingsummarywidth

◦ Percentage or pixels?

9

XHTMLXHTMLCommon Table Cell AttributesCommon Table Cell Attributes

alignbgcolor (deprecated)colspanrowspanvalignheight (deprecated)width (deprecated)

10

XHTMLXHTMLcolspan Attributecolspan Attribute

<table border="1"> <tr> <td colspan=“2”>

Birthday List</td></tr> <tr> <td>James</td> <td>11/08</td> </tr> <tr> <td>Karen</td> <td>4/17</td> </tr></table>

11

XHTMLXHTMLrowspan Attributerowspan Attribute

<table border="1">

<tr>

<td rowspan=“2>

<img src=“cake.gif” alt=“cake” height=“100” width=“100” /></td>

<td>James</td>

</tr>

<tr>

<td>11/08</td>

</tr>

</table>

12

Hands-On Practice 8.2Hands-On Practice 8.2Pages 321-322Chapter8/8.2/services.html

Accessibility and TablesAccessibility and TablesUse <th> elements to indicate

column or row headings.

Table element summary attribute◦provide an overview of the table

contents

Complex tables:Associate table cell values with their corresponding headers◦<th> tag id attribute◦<td> tag headers attribute

<table border="1" width="75%" summary="This table lists my educational background. Each row describes educational experience at a specific school.">

<tr>

<th id="school">School Attended</th>

<th id="years">Years</th>

<th id="subject">Subject</th>

<th id="degree" >Degree Awarded</th>

</tr>

<tr>

<td headers="school">Schaumburg High School</td>

<td headers="years">2000 - 2005</td>

<td headers="subject">College Prep</td>

<td headers="degree">H.S. Diploma</td>

</tr>

</table>

Table Row Table Row GroupsGroups

<table border="1" width="75%" summary="This table lists my educational background."><thead> <tr> <th>School Attended</th> <th>Years</th></tr></thead><tbody> <tr> <td>Schaumburg High School</td> <td>2005 - 2009</td> </tr> <tr> <td>Harper College</td> <td>2009 - 2010</td> </tr></tbody></table>

<thead>table head rows

<tbody >table body rows

<tfoot> table footer rows

ExamplesExamplesChapter8/tables/table1.htmlChapter8/tables/table1a.html