©NCC Education LimitedV1.0
Designing and Developing a
Website
Topic 6:
HTML Tables
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Guidelines and tips
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Internet Application Programming notes, Slides of Web Application Development
Basic notes on Hypertext Markup Language and Cascading Style Sheets
Typology: Slides
2017/2018
1 / 30
This page cannot be seen from the preview
Don't miss anything!
Related documents
Partial preview of the text
Download Internet Application Programming notes and more Slides Web Application Development in PDF only on Docsity!
Designing and Developing a
Website
Topic 6:
HTML Tables
Scope and Coverage
This topic will cover:
• The structure of HTML tables
• Column and row spanning
• CSS and tables
• Accessibility and tables
• Tables as a page layout devices
• HTML elements can be used to describe tabular data
– This is a very simple HTML table
Table Structure - 1
| Stage | Winner |
| Paris to Lyon | Maurice Garin |
• The
| Stage | Winner |
| Paris to Lyon | Maurice Garin |
• The element defines a table cell Table Structure - 4
Stage Winner
Paris to Lyon Maurice Garin
Stage Distance Stage Winner Overall Leader
Paris to Lyon 467km Maurice Garin Maurice Garin
Lyon to Marseille 374km Hippolyte Aucouturier Maurice Garin
Marseille to Toulouse 423km Hippolyte Aucouturier Maurice Garin
• We can define many rows and columns
– Add more and elements Table Structure - 5
Stage Distance Stage Winner Overall Leader Paris to Lyon 467km **Maurice Garin ** Lyon to Marseille 374km Hippolyte Aucouturier Maurice Garin Marseille to Toulouse 423km Hippolyte Aucouturier Maurice Garin
The colspan Attribute - 1
• The colspan attribute can be used to stretch a
table cell across multiple columns.
The colspan Attribute - 2
Maurice Garin
• The rowspan attribute can be used to stretch a
table cell across multiple rows.
The rowspan Attribute - 2
Hippolyte Aucouturier
The ,
and Elements - 1 - (^) We can specify rows as being part of the table header, the table body or the table footer. footer header body
• Screen readers linearise tables.
– Read out the contents in order
– From left to right, top to bottom
• In this example, the screen reader would read
– Stage, Distance, Stage Winner, Overall Leader,
Paris to Lyon, 467km, Maurice Garin etc.
Accessible Tables - 1
• There are a number of HTML features which can
be used to enhance the accessibility of tables.
– The element
– The summary attribute
– The element Accessible Tables - 2
• The element specifies that the cell contains table header information.
– Describes the data
– Distinguishes the headers from data
• Screen readers use this header data
– We should always use elements when they are appropriate.
The Element Stage winners in the 1903 Tour de France **Stage Distance Stage Winner Overall Leader ** Paris to Lyon 467km … - (^) The
elements are used to label columns - (^) The
- (^) The span attribute can be used to identify a series of columns.
- (^) Useful for CSS
- (^)
is used to group columns with related content. The and
Stage winners in the 1903 Tour de France ** ** Route …
Table Structure - 4
| Stage | Winner |
| Paris to Lyon | Maurice Garin |
| Stage | Distance | Stage Winner | Overall Leader |
| Paris to Lyon | 467km | Maurice Garin | Maurice Garin |
| Lyon to Marseille | 374km | Hippolyte Aucouturier | Maurice Garin |
| Marseille to Toulouse | 423km | Hippolyte Aucouturier | Maurice Garin |
• We can define many rows and columns
– Add more and elements Table Structure - 5
Stage Distance Stage Winner Overall Leader Paris to Lyon 467km **Maurice Garin ** Lyon to Marseille 374km Hippolyte Aucouturier Maurice Garin Marseille to Toulouse 423km Hippolyte Aucouturier Maurice Garin
The colspan Attribute - 1
• The colspan attribute can be used to stretch a
table cell across multiple columns.
The colspan Attribute - 2
Maurice Garin
• The rowspan attribute can be used to stretch a
table cell across multiple rows.
The rowspan Attribute - 2
Hippolyte Aucouturier
The ,
and Elements - 1 - (^) We can specify rows as being part of the table header, the table body or the table footer. footer header body
• Screen readers linearise tables.
– Read out the contents in order
– From left to right, top to bottom
• In this example, the screen reader would read
– Stage, Distance, Stage Winner, Overall Leader,
Paris to Lyon, 467km, Maurice Garin etc.
Accessible Tables - 1
• There are a number of HTML features which can
be used to enhance the accessibility of tables.
– The element
– The summary attribute
– The element Accessible Tables - 2
• The element specifies that the cell contains table header information.
– Describes the data
– Distinguishes the headers from data
• Screen readers use this header data
– We should always use elements when they are appropriate.
The Element Stage winners in the 1903 Tour de France **Stage Distance Stage Winner Overall Leader ** Paris to Lyon 467km … - (^) The
elements are used to label columns - (^) The
- (^) The span attribute can be used to identify a series of columns.
- (^) Useful for CSS
- (^)
is used to group columns with related content. The and
Stage winners in the 1903 Tour de France ** ** Route …
Table Structure - 5
| Stage | Distance | Stage Winner | Overall Leader |
| Paris to Lyon | 467km | **Maurice Garin | **|
| Lyon to Marseille | 374km | Hippolyte Aucouturier | Maurice Garin |
| Marseille to Toulouse | 423km | Hippolyte Aucouturier | Maurice Garin |
The colspan Attribute - 1
• The colspan attribute can be used to stretch a
table cell across multiple columns.
The colspan Attribute - 2
Maurice Garin
• The rowspan attribute can be used to stretch a
table cell across multiple rows.
The rowspan Attribute - 2
Hippolyte Aucouturier
The ,
Accessible Tables - 2
• The element specifies that the cell contains table header information.
– Describes the data
– Distinguishes the headers from data
• Screen readers use this header data
– We should always use elements when they are appropriate.
The Element Stage winners in the 1903 Tour de France **Stage Distance Stage Winner Overall Leader ** Paris to Lyon 467km … - (^) The
elements are used to label columns - (^) The
- (^) The span attribute can be used to identify a series of columns.
- (^) Useful for CSS
- (^)
is used to group columns with related content. The and
Stage winners in the 1903 Tour de France ** ** Route …
table header information.
– Describes the data
– Distinguishes the headers from data
• Screen readers use this header data
– We should always use elements when they are appropriate.
The Element Stage winners in the 1903 Tour de France **Stage Distance Stage Winner Overall Leader ** Paris to Lyon 467km … - (^) The
elements are used to label columns - (^) The
- (^) The span attribute can be used to identify a series of columns.
- (^) Useful for CSS
- (^)
is used to group columns with related content. The and
Stage winners in the 1903 Tour de France ** ** Route …
appropriate.
The Element Stage winners in the 1903 Tour de France **Stage Distance Stage Winner Overall Leader ** Paris to Lyon 467km … - (^) The
elements are used to label columns - (^) The
- (^) The span attribute can be used to identify a series of columns.
- (^) Useful for CSS
- (^)
is used to group columns with related content. The and
Stage winners in the 1903 Tour de France ** ** Route …
| Stage | Distance | Stage Winner | Overall Leader | **
|---|---|---|---|
| Paris to Lyon | 467km | …
| Route | …
|---|