Scribd
Upload
45 views17 pages

Chapter 8

Uploaded by

202111238
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
45 views17 pages

Chapter 8

Uploaded by

202111238
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

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

You might also like