Scribd
Upload
0 views

week7-Ch8

Chapter 8 of 'Web Development & Design Foundations with HTML5' focuses on creating and styling HTML tables, including the use of elements like <table>, <tr>, <td>, and <th>. It emphasizes the importance of accessibility, proper use of CSS for styling, and attributes like colspan and rowspan for complex table structures. The chapter also discusses obsolete HTML attributes and encourages using CSS for table configuration to ensure modern standards compliance.

Uploaded by

Maroun Abi Assaf
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0 views

week7-Ch8

Chapter 8 of 'Web Development & Design Foundations with HTML5' focuses on creating and styling HTML tables, including the use of elements like <table>, <tr>, <td>, and <th>. It emphasizes the importance of accessibility, proper use of CSS for styling, and attributes like colspan and rowspan for complex table structures. The chapter also discusses obsolete HTML attributes and encourages using CSS for table configuration to ensure modern standards compliance.

Uploaded by

Maroun Abi Assaf
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

1

Web Development & Design


Foundations with HTML5

CHAPTER 8
TABLES

Copyright © Terry Felke-Morris http://terrymorris.net 2


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
◦ Configure table sections with the thead, tbody, and tfoot elements
◦ Increase the accessibility of a table
◦ Style an HTML table with CSS
◦ Describe the purpose of CSS structural pseudo-classes

Copyright © Terry Felke-Morris http://terrymorris.net 3


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


4
Copyright © Terry Felke-Morris http://terrymorris.net
HTML Table Elements
 <table>
Contains the table

 <tr>
Contains a table row

 <td>
Contains a table cell

 <caption>
Configures a description of the table
5
Copyright © Terry Felke-Morris http://terrymorris.net
<head> HTML
<style>
table, td { border: 1px solid black; }
</style>
Table Example
</head>
…
<table>
<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> DEMO
</table>

6
Copyright © Terry Felke-Morris http://terrymorris.net
<head>
<style>
table, td, th { border: 1px solid black; }
HTML
</style>
</head>
Table Example 2
…
<table>
<tr> Using the <th> Element
<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>

DEMO
7
Copyright © Terry Felke-Morris http://terrymorris.net
HTML Table Attributes
•align (obsolete)
•bgcolor (obsolete)
•border
•cellpadding (obsolete)
•cellspacing (obsolete)
•summary (obsolete but may be reinstated)
•width (obsolete)

Use CSS to configure table characteristics instead of


HTML attributes

8
Copyright © Terry Felke-Morris http://terrymorris.net
HTML Common Table Cell Attributes
•align (obsolete)
•bgcolor (obsolete)
•colspan
•rowspan
•valign (obsolete)
•height (deprecated)
•width (deprecated)

Use CSS to configure most table cell characteristics instead of


HTML attributes

9
Copyright © Terry Felke-Morris http://terrymorris.net
<head>
<style>
HTML colspan
table, td { border: 1px solid black; }
</style>
Attribute
</head>
…
<table>
<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> DEMO
</table>

10
Copyright © Terry Felke-Morris http://terrymorris.net
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>
</tr>
</table>

DEMO

11
Copyright © Terry Felke-Morris http://terrymorris.net
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

Copyright © Terry Felke-Morris http://terrymorris.net 12


Using CSS to Style a Table
HTML CSS
Attribute Property
Center align a table: table { width: 75%;
align margin: auto; }

Center align within a table cell: text-align: center;

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 DEMO

-- background-image

Copyright © Terry Felke-Morris http://terrymorris.net 13


CSS 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

Zebra Stripe a Table


tr:nth-of-type(even) { background-color: #eaeaea; }
DEMO

Copyright © Terry Felke-Morris http://terrymorris.net 14


<table> <caption>Time Sheet</caption>
<thead>
<tr>
Table Row
<th id="day">Day</th>
<th id="hours">Hours</th> Groups
</tr> <thead>
table head rows
</thead>
<tbody> <tbody >
<tr>
table body rows
<td headers="day">Monday</td> <tfoot> DEMO
<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>
Copyright © Terry Felke-Morris http://terrymorris.net 15
• Download and unpack the file examples.zip here ..
http://cs.franklin.edu/~crawforl/webd101/PPTS/WEEK7/

• Open the file examples/columnHeaders.html

• Open the file examples/rowHeaders.html

16
examples/columnHeaders.html

inline styles

17
examples/rowHeaders.html

18
• The padding property specifies the amount of
space between a cell's content and the border of
that cell.
• The border-spacing property specifies the
space between cells.
• Don't like the double lines that make up a cell's
border?

Try adding the following to your table rule:


border-spacing: 0px;

19
border-collapse
• Internet Explorer does not support the
border-spacing property
• Another solution is to use the border-
collapse property. We can set border-
collapse to collapse so that the browser
will not render any border spacing.
• In your table rule, replace the border-
spacing declaration with the following:

border-collapse: collapse;
• Now it will render properly in IE as well!

20
• At times, we might have data cells that will
need to span across more than one column
or row.

• To achieve this, we can use the rowspan or


colspan properties.

• The value of rowspan and colspan should


be an integer number that represents the
number of rows or columns a particular
<td> spans.

21
rowspan & colspan Examples

• To see an example of rowspan, see


examples/rowSpan.html

• To see an example of colspan, see


examples/colSpan.html

• To see an example of rowspan & colspan,


see examples/combinedSpan.html

22
examples/rowSpan.html

View the file


examples/rowSpan.html
for solution

23
examples/colSpan.html

View the file


examples/colSpan.html
for solution

24
examples/combinedSpan.html

View the file


examples/combinedSpan.html
for solution

25
SUMMARY ATTRIBUTE
(will not validate at W3C)
alternatives

“The summary attribute on the table element is obsolete. Consider


describing the structure of the table in a caption element or in a figure
element containing the table; or, simplify the structure of the table so that
no description is needed.”

NOTE: All examples in these slides include the summary attribute


… your tables should use one of these alternatives instead

(i.e., your files that use tables should validate using the W3C validator)!!!

You might also like