6

WEEK

COMP1223
Web Development Fundamentals

L E C T U R E

N O T E

Book: Murach's HTML5 and CSS3

Week: 6
Chapters: 9
Author/s: Maziar Masoudi

2015
External Sources:

http://www.w3.org/wiki/HTML_tables

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

http://www.w3schools.com/css/css_pseudo_classes.asp

https://css-tricks.com/how-nth-child-works/

COURSE NAME: Web Development Fundamentals

COURSE CODE: COMP 1223

PAGE: 1

Table of Contents
Contents
Objectives ..................................................................................................................................................... 3
An Introduction to tables .............................................................................................................................. 4
Summary ................................................................................................................................................... 4
How to create a table.................................................................................................................................... 5
Common elements for coding tables ........................................................................................................ 5
Summary ............................................................................................................................................... 5
How to use CSS to format a table ................................................................................................................. 5
Sample CSS ................................................................................................................................................ 6
How to add a header and footer .................................................................................................................. 7
Example ..................................................................................................................................................... 7
HTML ..................................................................................................................................................... 7
CSS ......................................................................................................................................................... 8
How to merge cells in a column or row ........................................................................................................ 8
Example ..................................................................................................................................................... 8

COURSE NAME: Web Development Fundamentals

COURSE CODE: COMP 1223

PAGE: 2

Objectives
Applied
1. Use HTML to create tables with merged cells, captions, headers, and footers.
2. Use CSS and the CSS3 structural pseudo-classes to format the tables that you create.
3. Use the HTML5 figure and figcaption elements to treat a table as a figure.
4. Use HTML to provide accessibility for tables.
Knowledge
1. Describe these components of a table: rows, columns, cells, header cells, data cells, table header, table
footer, and table body.
2. Describe the proper use of tables, now that CSS should be used for page layout.
3. Describe the use of nesting and wrapping with tables.
4. Describe the use of the table attributes for accessibility.

COURSE NAME: Web Development Fundamentals

COURSE CODE: COMP 1223

PAGE: 3

An Introduction to tables
The HTML Table Element (<table>) represents data in two dimensions or more. A table consists of one
or more rows and columns.
-

Each table row can contain one to many cells (<td>/<th>).

There are two different kinds of cells. Table header (<th>) and data cell (<td>)

A table can start with a header section then body section and last footer section which provides
summary.

Note: Prior to the creation of CSS, HTML <table> elements were often used as a method for page layout.
This usage has been discouraged since HTML 4, and the <table> element should not be used for layout
purposes. However, HTML emails are an exception, where tables are still commonly used for layout
purposes.

Summary

COURSE NAME: Web Development Fundamentals

COURSE CODE: COMP 1223

PAGE: 4

How to create a table

Table is a container that contains one to many rows and each row contains one to many columns. To
start a table you need to start with <table> </table> tag. Next you need to allocate space with each row
by adding <tr></tr> inside table tag. Each <tr></tr> represents a row which will be used as a container
to held one to many columns. Based on number of columns you need in each row you start adding table
cell <td></td> or table header <th></td>. Table with one row and one column.

Common elements for coding tables

Summary

Note: Number of columns must be the same for all the tables rows in the same table.

How to use CSS to format a table

You may use many of the CSS properties you have learn to format a table. There are common CSS
properties for formating a table , tr, td, th elements.

COURSE NAME: Web Development Fundamentals

COURSE CODE: COMP 1223

PAGE: 5

Sample CSS

The table without collapsed borders

COURSE NAME: Web Development Fundamentals

COURSE CODE: COMP 1223

PAGE: 6

How to add a header and footer

You may group rows in a table in three groups.
-

Header: <thead></thead> Groups one or more rows into a table header

Body: <tbody></tbody> Groups the rows between the header and footer into a table body.
Footer: <tfoot></tfoot> Groups oen or more rows into a table footer.

Example
HTML

COURSE NAME: Web Development Fundamentals

COURSE CODE: COMP 1223

PAGE: 7

CSS

Note: The thead, tbody, tfoot elements make it easier to style a table with CSS

How to merge cells in a column or row

For complicated tables, it often makes sense to merge some of the cells. To merge cells, you use the
two attributes of the th and td elements.
-

To merge cells so a cell in a row spans two or more coluns, you use the colspan attibute.
To merge cells so a cell in a columnspans two or more rows, you use the rowspan attibute.

Example

COURSE NAME: Web Development Fundamentals

COURSE CODE: COMP 1223

PAGE: 8

The CSS for the merged cells:

COURSE NAME: Web Development Fundamentals

COURSE CODE: COMP 1223

PAGE: 9

Table and Accessibility

Because tables are difficult for visually-impaired users to decipher, HTML provides a few attibutes that
can improve accessiblity.

HTML5 Figure and Figcaption with tables

By default figcaption element is an inline element, not a block element. As a result, you will usually want
to use the CSS display property to change it to a block element.

COURSE NAME: Web Development Fundamentals

COURSE CODE: COMP 1223

PAGE: 10

Summary

COURSE NAME: Web Development Fundamentals

COURSE CODE: COMP 1223

PAGE: 11

Table CSS3 structureal pseudo-classes

A pseudo-class is used to define a special state of an element.

COURSE NAME: Web Development Fundamentals

COURSE CODE: COMP 1223

PAGE: 12

Specify a background color for every <p> element that is the second child of its parent, counting from
the last child

The syntax for the CSS3 structural pseudo-class selectors

COURSE NAME: Web Development Fundamentals

COURSE CODE: COMP 1223

PAGE: 13