Web Development & Design

Foundations with HTML5

Chapter 8
Tables

1
Copyright © Terry Felke-Morris
 HTML Table
• Tables are used on web pages
to organize tabular information

• Composed of rows and columns.

• Each individual table cell is at the intersection of a

specific row and column.

• Configured with table, tr, and td elements

2
Copyright © Terry Felke-Morris
 HTML Table Elements
 <table> </table
Contains the table

 <tr></tr>
Contains a table row

 <td></td>
Contains a table cell

 <caption></caption>
Configures a description of the table

3
Copyright © Terry Felke-Morris
 HTML
<table border="1"> Table Example
<caption>Bird Sightings</caption>
<tr>
<td>Name</td>
<td>Date</td>
</tr>
<tr>
<td>Bobolink</td>
<td>5/25/10</td>
</tr>
<tr>
<td>Upland Sandpiper</td>
<td>6/03/10</td>
</tr>
</table>

4
Copyright © Terry Felke-Morris
 <table border="1"> HTML
<tr>
<th>Name</th> Table Header Element
<th>Birthday</th>
</tr> Using the <th></th> Element
<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>

5
Copyright © Terry Felke-Morris
 HTML Common Table Attributes
• align (left, right, center)
• bgcolor (valid color)
• border
• cellpadding (padding)
• cellspacing (cellspacing)
• summary
• width

• Use CSS to configure table characteristics instead

of HTML attributes

6
Copyright © Terry Felke-Morris
 HTML Common Table Attributes
Example
• <table align="center" bgcolor="lightblue"
border="1" cellpadding="10" cellspacing="5"
summary="This is a simple table demonstrating
table summary attribute" width="50%">

7
Copyright © Terry Felke-Morris
 HTML Common Table Cell Attributes
• align (text-align)
• bgcolor
• colspan
• rowspan
• valign
• height
• width

• Use CSS to configure most table cell characteristics

instead of HTML attributes

8
Copyright © Terry Felke-Morris
 HTML Common Table Cell
Attributes Example
• <tr align="center"
bgcolor="red“width="100px" height="200px">
• valign
top, middle, bottom

9
Copyright © Terry Felke-Morris
 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>

10
Copyright © Terry Felke-Morris
 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>

11
Copyright © Terry Felke-Morris
 Accessibility and Tables
• Use table header elements (<th> tags) to
indicate column or row headings.
• •Use the caption element to provide a text
title or caption for the table.
• Complex tables:
– Associate table cell values with their
corresponding headers
– ◦<th> tag id attribute
– ◦<td> tag headers attribute
12
Copyright © Terry Felke-Morris
 <table border="1">
<caption>Bird Sightings</caption>
<tr>
<th id="name">Name</th>
<th id="date">Date</th>
</tr>
<tr>
<td headers="name">Bobolink</td>
<td headers="date">5/25/10</td>
</tr>
<tr>
<td headers="name">Upland
Sandpiper</td>
<td headers="date">6/03/10</td>
</tr>
</table>
13
Copyright © Terry Felke-Morris
 Using CSS to Style a Table
HTML CSS Property
Attribute
Align a table: table { width: 75%;
align margin: auto; }

Align within a table cell: text-align

bgcolor background-color

cellpadding padding
border-spacing or border-collapse
cellspacing

height height

valign vertical-align

width width

border border, border-style, or border-spacing

-- background-image
14
Copyright © Terry Felke-Morris
<table> <caption>Time Sheet</caption>
<thead>
<tr>
Table Row
<th id="day">Day</th>
<th id="hours">Hours</th>
• <thead>
Groups
</tr>
</thead> table head rows
<tbody> • <tbody >
<tr> table body rows
<td headers="day">Monday</td> • <tfoot>
<td headers="hours">4</td> table footer rows
</tr>
…
<tr>
<td headers="day">Friday</td>
<td headers="hours">3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td headers="day">Total</td>
<td headers="hours">18</td>
</tr>
</tfoot> </table> 15
Copyright © Terry Felke-Morris