Web Development & Design Foundations wtih HTML5, 8th Edition

1

Web Development & Design

Foundations with HTML5

CHAPTER 8

TABLES

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

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

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

HTML

Table Example

<head>

<style>

table, td { border: 1px solid black; }

</style>

</head>

…

<table>

<caption>Bird Sightings</caption>

<tr>

</tr>

<tr>

<td>Bobolink</td>

</tr>

<tr>

<td>Upland Sandpiper</td>

</tr>

</table>

6

DEMO

HTML

Table Example 2

<head>

<style>

table, td, th { border: 1px solid black; }

</style>

</head>

…

<table>

<tr>

<th>Birthday</th>

</tr>

<tr>

<td>James</td>

</tr>

<tr>

<td>Karen</td>

</tr>

<tr>

<td>Sparky</td>

</tr>

</table>

7

Using the <th> Element

DEMO

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

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

HTML colspan

Attribute

<head>

<style>

table, td { border: 1px solid black; }

</style>

</head>

…

<table>

<tr>

Birthday List</td>

</tr>

<tr>

<td>James</td>

</tr>

<tr>

<td>Karen</td>

</tr>

</table>

10

DEMO

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>

11

DEMO

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

Using CSS to Style a Table

HTML

Attribute

CSS

Property

align

Center align

a table: table { width: 75%;

margin: auto; }

Center align

within a table cell: text-align: center;

bgcolor

background

-color

cellpadding

padding

cellspacing

border

-spacing or border-collapse

height

valign

vertical

-align

width

border

border,

border-style, or border-spacing

--

background

-image

13

DEMO

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

14

Zebra Stripe a Table

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

DEMO

Table Row

Groups

<thead>

table head rows

table body rows

<tfoot>

table footer rows

15

<table> <caption>Time Sheet</caption>

<thead>

<tr>

<th id="hours">Hours</th>

</tr>

</thead>

<tbody>

<tr>

<td headers="day">Monday</td>

</tr>

…

<tr>

<td headers="day">Friday</td>

</tr>

</tbody>

<tfoot>

<tr>

<td headers="day">Total</td>

</tr>

</tfoot> </table>

DEMO

• 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)!!!