Internet Application Programming notes, Slides of Web Application Development

Basic notes on Hypertext Markup Language and Cascading Style Sheets

Typology: Slides

2017/2018

Uploaded on 02/11/2018

andrew-mukare
andrew-mukare 🇰🇪

4.6

(5)

2 documents

1 / 30

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
©NCC Education LimitedV1.0
Designing and Developing a
Website
Topic 6:
HTML Tables
pf3
pf4
pf5
pf8
pf9
pfa
pfd
pfe
pff
pf12
pf13
pf14
pf15
pf16
pf17
pf18
pf19
pf1a
pf1b
pf1c
pf1d
pf1e

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

StageWinner
Paris to LyonMaurice Garin

• The element defines the start and end of

the table

Table Structure - 2

StageWinner
Paris to LyonMaurice Garin

• The element defines a table cell

Table Structure - 4

Stage Winner
Paris to LyonMaurice Garin

StageDistanceStage WinnerOverall Leader
Paris to Lyon467kmMaurice GarinMaurice Garin
Lyon to Marseille374kmHippolyte AucouturierMaurice

Garin

Marseille to Toulouse423kmHippolyte AucouturierMaurice

Garin

• We can define many rows and columns

– Add more and elements

Table Structure - 5

****
StageDistanceStage WinnerOverall Leader
Paris to Lyon467kmMaurice Garin
Lyon to Marseille374kmHippolyte AucouturierMaurice Garin
Marseille to Toulouse423kmHippolyte AucouturierMaurice 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

**** …
  • (^) The
and elements are used to label columns
  • (^) The
element is used to identify a column.
  • (^) 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 Elements
    Stage winners in the 1903 Tour de France
    StageDistanceStage WinnerOverall Leader
    Paris to Lyon467km
    **** …
    Stage winners in the 1903 Tour de France
    Route