Chapter 9

Table Basics
Key Concepts

1
 Learning Outcomes
 Describe the recommended use of a table on a web
page
 Configure a basic table with the table, table row, table
header, and table cell elements.
 Configure table sections with the thead, tbody, and tfoot
elements.
 Configure a table to provide for accessibility
 Use CSS to style an HTML table
 Describe the purpose of CSS3 structural pseudo-classes

2
 HTML Table
 Tables are used on web pages
to organize tabular information

 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

3
 HTML Table Elements
<table>
Contains the table

<tr>
Contains a table row

<td>
Contains a table cell

<caption>
Configures a description of the table

4
 The Table Element
<table>
 <table> Element
Contains the table
 <tr> Element
Contains a table row
 <td> Element
Contains a table data cell

<th> Element
Contains a table header cell

<caption> Element
Configures a description of the table

5
<table border="1">
<caption>Birthday List</caption>
HTML
Table Example
<tr>
<td>Name</td>
<td>Birthday</td>
</tr>
<tr>
<td>James</td>
<td>11/08</td>
</tr> Birthday List
<tr>
<td>Karen</td>
<td>4/17</td>
</tr>
<tr>
<td>Sparky</td>
<td>11/28</td>
</tr>
</table>

6
<table border="1">
<tr>
HTML
Table Example 2
<th>Name</th>
<th>Birthday</th>
</tr>
<tr>
<td>James</td>
<td>11/08</td> Using the <th> Element
</tr>
<tr>
<td>Karen</td>
<td>4/17</td>
</tr>
<tr>
<td>Sparky</td>
<td>11/28</td>
</tr>
</table>

7
 HTML border Attribute
 Indicates the table is specifically not
used for page layout
Optional
border=“1”
Visible browser default border

border=“”
No visible browser default border.

8
 HTML
colspan 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>
9
 HTML
rowspan
Attribute

<table border="1“>
<tr>
<td rowspan="2">This spans two rows</td>
<td>Row 1 Column 2</td>
</tr>
<tr>
<td>Row 2 Column 2</td>
</tr>
</table>
10
 Accessibility and Tables
 Use table header elements (<th> tags) to indicate column or row
headings.

 Use the summary attribute on the table element to provide an

overview of the purpose and organization of the table.

 Use the caption element to provide the title/caption for the table.

 Other attributes that provide for accessibility:

 headers & id
 scope
 Accessibility:
<table>
<caption> Word Schedule</caption> headers & id
<tr>
<th id="day">Day</th>
<th id="hours">Hours</th>
Attributes
</tr>
<tr>
<td headers="day">Monday</td>
<td headers="hours">4</td>
</tr>
<tr>
<td headers="day">Tuesday</td>
<td headers="hours">3</td>
</tr>
<tr>
<td headers="day">Total</td>
<td headers="hours">7</td>
</tr>
</table>
 Using CSS to Style a Table
HTML CSS Property
Attribute
align Align a table: table { width: 75%; margin: auto; }
Align within a table cell: text-align
bgcolor background-color

cellpadding padding

cellspacing border-spacing or border-collapse

height height

valign vertical-align

width width

border border, border-style, or border-spacing

--- background-image

--- caption--side
CSS3 Structural Pseudo-classes
Pseudo-class Purpose

:first-of-type Applies to the first element of the specified type.

:first-child Applies to the first child of an element. (CSS2 selector)

:last-of-type Applies to the last element of the specified type.

:last-child Applies to the last child of an element

:nth-of-type(n) Applies to the “nth” element of the specified type.

Values: a number, odd, or even

14
<table>
<caption>Work Schedule</caption>
<thead>
<tr>
Table Row
<th>Day</th>
<th>Hours</th>
Groups
</tr>  <thead>
</thead> table head rows
<tbody>  <tbody >
<tr> table body rows
<td>Monday</td>  <tfoot>
<td>4</td> table footer rows
</tr>
<tr>
<td>Tuesday</td>
<td>3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>7</td>
</tr>
</tfoot>
 Summary

 This chapter introduced coding techniques to

create and configure tables.
 You will use these skills over and over again
as you create web pages.

16