Web Development & Design Foundations

with HTML5
Tenth Edition

Chapter 8
Tables

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 8-1
Learning Outcomes
In this chapter, you will learn how to ...
• Create a basic table with the table, table row, table
header, and table cell elements
• Style an HTML table with CSS

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 8-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

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 8-3
Figure 8.1 Table with three rows and three
columns

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 8-4
HTML Table Elements
• <table>
Contains the table
• <tr>
Contains a table row
• <td>
Contains a table cell Figure 8.2 The caption for this table
is “Bird Sightings”
• <caption>
Configures a description of the table

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 8-5
HTML Table Example (1 of 2)
<table>
<caption>Bird Sightings</caption>
<tr>
<td>Name</td>
<td>Date</td>
</tr>
<tr>
<td>Bobolink</td>
<td>5/25/20</td>
</tr>

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 8-6
HTML Table Example (2 of 2)
<tr>
<td>Upland Sandpiper</td>
<td>6/03/20</td>
</tr>
</table>

Figure 8.2 The caption for this table is

“Bird Sightings”

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 8-7
Table Borders
Obsolete Method: HTML border attribute
Modern Method: CSS border Property
table, td, th { border: 1px solid #000; }

Figure 8.2 The caption for this table is

“Bird Sightings”

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 8-8
HTML Table Example 2 (1 of 2)
<table>
<tr>
<th>Name</th>
<th>Birthday</th>
</tr>
<tr>
<td>James</td>
<td>11/08</td>
</tr>

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 8-9
HTML Table Example 2 (2 of 2)
<tr> Using the <th> Element
<td>Karen</td>
<td>4/17</td>
</tr>
<tr>
<td>Sparky</td>
<td>11/28</td>
</tr>
</table>

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 8 - 10
HTML Table Attributes
• align (obsolete)
• bgcolor (obsolete)
• border (obsolete)
• width (obsolete)
• cellpadding (obsolete)
• cellspacing (obsolete)
• summary (obsolete)
Use CSS to configure table characteristics instead of
HTML attributes

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 8 - 11
HTML Common Table Cell Attributes
• bgcolor (obsolete)
• colspan
• rowspan
• height (deprecated)
• width (deprecated)
• align (obsolete)
Use CSS to configure most table cell characteristics
instead of HTML attributes

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 8 - 12
HTML colspan Attribute (1 of 2)
<table>
<tr>
<td colspan=“2”>
Birthday List</td>
</tr>
<tr>
<td>James</td>
<td>11/08</td>
</tr>
Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 8 - 13
HTML colspan Attribute (2 of 2)
<tr>
<td>Karen</td>
<td>4/17</td>
</tr>
</table>

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 8 - 14
HTML rowspan Attribute
<table>
<tr>
<td rowspan="2">This spans two rows</td>
<td>Row 1 Column 2</td>
</tr>
<tr>
<td>Row 2 Column 2</td> Figure 8.6 Table with a column that spans
two rows
</tr>
</table>

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 8 - 15
 Using CSS to Style a Table
HTML Attribute CSS Property
Center align a table: table { width: 75%; margin: auto; }
align Center align within a table cell: text-align: center;

bgcolor background-color

cellpadding padding

cellspacing border-spacing

height height

width width

border border

-- background-image

Excerpted from Table 8.4

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 8 - 16
Summary
This chapter introduced the HTML and CSS techniques
used to create and configure tables on web pages.

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 8 - 17