DDW Topic 6

Topic 6 HTML Tables Designing and Developing a Website
V1.0 Visuals Handout Page 1

Designingand Developing a
NCC Education Limited V1.0
Designing and Developing a
Website
Topic 6:
HTML Tables
HTML Tables Topic 6 - 6.2
Scope and Coverage
This topic will cover:
The structure of HTML tables
Column and row spanning
CSS and tables
CSS and tables
Accessibility and tables
Tables as a page layout devices
Learning Outcomes
By the end of this topic, students will be able to:
Create HTML pages that structure tabular data
Describe techniques for making HTML tables
accessible to users with visual disabilities
accessible to users with visual disabilities
Style HTML tables using Cascading Style Sheet
properties
Explain the disadvantages of using HTML tables
for page layout
Table Structure - 1
<table>
<tr>
<td>Stage</td><td>Winner</td>
</tr>
<tr>
<td>Paris to Lyon</td><td>Maurice Garin</td>
</tr>
HTML elements can be used to describe tabular data
This is a very simple HTML table
</tr>
</table>
Table Structure - 2
<table>
<tr>
</tr>
<tr>
</tr>
The <table>element defines the start and end of
the table
</tr>
</table>
Table Structure - 3
<table>
<tr>
</tr>
<tr>
</tr>
The <tr>element defines the start and end of a
row in the table
</tr>
</table>
Table Structure - 4
<table>
<tr>
</tr>
<tr>
</tr>
The <td>element defines a table cell
</tr>
</table>
<table>
<tr>
<td>Stage</td><td>Distance</td><td>Stage Winner</td><td>Overall Leader</td>
</tr>
<tr>
<td>Paris to Lyon</td><td>467km</td><td>Maurice Garin</td><td>Maurice Garin</td>
</tr>
<tr>
<td>Lyon to Marseille</td><td>374km</td><td>Hippolyte Aucouturier</td><td>Maurice
Garin</td>
Table Structure - 5
</tr>
<tr>
<td>Marseille to Toulouse</td><td>423km</td><td>Hippolyte Aucouturier</td><td>Maurice
Garin</td>
</tr>
</table>
We can define many rows and columns
Add more <tr>and <td>elements
Table Structure - 6
<table>
<tr>
<td>Stage</td><td>Distance</td><td>Stage Winner</td><td>Overall
Leader</td>
</tr>
<tr>
<td>Paris to Lyon</td><td>467km</td><td colspan=" 2" >Maurice Garin</td>
</tr>
<tr>
The colspan Attribute - 1
<tr>
<td>Lyon to Marseille</td><td>374km</td><td>Hippolyte
Aucouturier</td><td>Maurice Garin</td>
</tr>
<tr>
<td>Marseille to Toulouse</td><td>423km</td><td>Hippolyte
Aucouturier</td><td>Maurice Garin</td>
</tr>
</table>
The colspan Attribute - 2
<td colspan="2">Maurice Garin</td>
The colspan attribute can be used to stretch a
table cell across multiple columns.
<table>
<tr>
<td>Stage</td><td>Distance</td><td>Stage Winner</td><td>Overall
Leader</td>
</tr>
<tr>
<td>Paris to Lyon</td><td>467km</td><td>Maurice Garin</td><td>Maurice
Garin</td>
/
The rowspan Attribute - 1
</tr>
<tr>
<td>Lyon to Marseille</td><td>374km</td>
<td rowspan=" 2" >Hippolyte Aucouturier</td><td>Maurice Garin</td>
</tr>
<tr>
<td>Marseille to Toulouse</td><td>423km</td><td>Maurice Garin</td>
</tr>
</table>
The rowspan Attribute - 2
<td rowspan="2">Hippolyte Aucouturier</td>
The rowspan attribute can be used to stretch a
table cell across multiple rows.
The <thead>, <tbody>and <tfoot>
Elements - 1
header
body
We can specify rows as being part of the table
header, the table body or the table footer.
footer
y
<thead>
<tr>
<td>Stage</td><td>Distance</td><td>Stage Winner</td><td>Overall Leader</td>
</tr>
</thead>
The <thead>, <tbody>and <tfoot>
Elements - 2
We nest rows inside the <thead>,
<tbody>and <tfoot>elements
<tfoot>
<tr>
<td>Total Distance</td><td>2,428 km</td>
</tr>
</tfoot>
<tbody>
<tr>
The <tfoot>element should be added

before the <tbody>.
<tbody>and <tfoot>elements.
Screenreaders linearise tables
Accessible Tables - 1
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.
There are a number of HTML features which can
be used to enhance the accessibility of tables.
The <caption>element
The summary attribute
Accessible Tables - 2
y
The <th>element
The <caption>Element
<table summary="This table is structured as four columns stage,
distance, the winner of the stage and the overall race leader at the end
of the stage">
<caption>Stage winners in the 1903 Tour de France</caption>
<thead>
<tr>
<td>Stage</td>
The caption element provides a title for the table.
The summary element can be used to describe the
structure of the table.
Useful for complex tabular structures
<td>Stage</td>

The <th>element specifies that the cell contains
The <th>Element
<table>
<tr>
<th>Stage</th><th>Distance</th><th>Stage Winner</th><th>Overall Leader</th>
</tr>
<tr>
<td>Paris to Lyon</td><td>467km</td>
The <th>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 <th>elements when they are
appropriate.
The <colgroup>and <col>Elements
<table>
<colgroup>
<col span=" 3" />
<col span=" 1" class=" overall_winner" />
</colgroup>
<tr>
<th>Route</th>

The <col>and <colgroup>elements are used to label columns
The <col>element is used to identify a column.
The span attribute can be used to identify a series of
columns.
Useful for CSS
<colgroup>is used to group columns with related content.

Tables and CSS - 1
td, th {
padding: 5px;
border: 1px solid #000000;
}
We can use CSS properties with tables.
By default, browsers add little styling to HTML
tables.
It is usual to specify borders and padding for table
cells.
Tables and CSS - 2
table {
border-collapse: collapse;
}
caption{
font-size:1.2em;
margin:10px;
The border-collapse property is specific to tables.
Specifies if the cell borders are merged
The default value is separate.
We can also style the <caption>elements.
}
Highlighting Specific Cells
<tr>
<td>Bordeaux to Nantes</td><td>425km</td><td>Maurice Garin</td><td>Maurice
Garin</td>
</tr>
<tr id=" longest_stage" >
<td>Nantes to Paris</td><td>471km</td><td>Maurice Garin</td><td>Maurice
Garin</td>
</tr>
#longest_stage{
background-color:#ff00ff;
}
We can style individual cells, rows and columns
using class and id attributes.
The <col>and <colgroup>elements allow us to
target columns.
</tr>

Before widespread browser support for CSS, tables
were often used for page layout.
With borders not visible, the table acts as a grid
setting out the page contents.
Using Tables for Page Layout - 1
The following slide is a screen shot of the Amazon
website from August 2004.
Tables are used to design the page.
Amazon now have a CSS driven design.
Amazon - August 2004
http://www.amazon.com/
The red lines show the table borders.
Complex tables
Tables inside tables - nested tables
http://www.amazon.com/
Goes against web standards
CSS should be used for presentation
For page layout, we often need complex tables.
Time consuming to code
Using Tables for Page Layout - 2
Time consuming to code
Difficult for screen readers to linearise
Difficult to maintain
With a CSS driven design, we only change the
external CSS file.
Tables do not work well on small screen sizes.
User has to scroll horizontally to view contents
Displaying complex tables can be computationally
intensive
Tables and Mobile Devices
intensive.
Mobile devices have limited processing power
Chisholm, W. and May, M. (2008). Universal
Design for Web Applications: Web Applications
That Reach Everyone. O'Reilly Media.
References
Duckett, J . (2010). Beginning HTML, XHTML, CSS,
and JavaScript. J ohn Wiley and Sons.
Kennedy, B. and Musciano,C. (2006). HTML &
XHTML: The Definitive Guide. O'Reilly Media.
Topic 6 HTML Tables
Any Questions?

DDW Topic 6

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

DDW Topic 6

Hochgeladen von

Copyright:

Verfügbare Formate

Topic 6 HTML Tables Designing and Developing a Website

V1.0 Visuals Handout Page 1

The <tfoot>element should be added

Topic 6 HTML Tables Designing and Developing a Website

NCC Education Limited V1.0

HTML Tables Topic 6 - 6.21

HTML Tables Topic 6 - 6.24

Das könnte Ihnen auch gefallen