website

Nobody

week_9_tables1.pptx

Home >Computer Science homework help >website

Tables

Their place on the Web

Basic Table Markup

Tables and CSS

Tables

Introduced early in HTML history

Used initially to present certain types of data: numeric data, related data – pictures/description

Used as the fundamental structure for visual features of page –

presentation and content linked

Initially, there was no css, so tables were used to help layout the elements of a webpage.

Today css exists and has fully replaced tables for layout purposes.

The only purpose for tables is for true tabulated data.

Web Accessibility Review

HTML for CONTENT

CSS for PRESENTATION

JAVASCRIPT for BEHAVIOUR

Accessibility 101:

There should be no use of any presentation features in the html document.

These should be all transferred to the CSS file.

The table’s place on today’s Web

Tabulated data

As a way to lay out elements on a page

Tables should NEVER be used as a means of laying out elements on a webpage –

Eg multiple columns, image galleries, lists etc

All layout should be done by CSS

Parts of a Table

Table Data Cells

Table

Table Header Cells

Table

Row

Table tags

Contains the entire table

Signifies a table header row

Contains an entire row of a table

A general table data cell

Table cells

<th>

By default, data in a header is bold and centred

<td>

By default, table data will left align and render normal

Caption

It describes the content of the table

A visual element

Must follow the <table> start tag:

<table>

<caption>A Simple Table</caption>

<tr>

</tr>

</table>

Can only be one caption per table

Text appears outside the table and centred

The caption element is read by assistive software.

Getting Started

<table>

<tr>

</tr>

<tr>

</tr>

</table>

Where do they all fit together?

table – this is the wrapping element; everything to do with the table goes inside the start and end table tags

caption – this comes next after the start tag of the table element (note: does not go inside a tr element); this sits outside the table visually

tr – all data in a table must be held in rows, so the <tr> element starts and ends each table row

th – this is for headings; either column or row

td – a normal data cell

Create Some Tabular Information

Download vegetablePrices.txt

Copy and paste the text from vegetablePrices.txt into the html file

Markup the text as a table

Validate

Before you choose which table elements to put your text in, have a look at the text itself.

What would be the text that describes the table? – that’s what goes into the caption

Are there any row or column headings? – these go inside th elements

What looks like regular data? – put this inside td elements

More table tags

Allows a grouping of header rows

Allows a grouping of body rows

Allows a grouping of footer rows

<thead> <tr> <th>January</th> <th>February</th> </tr></thead>

These elements give more meaning to a table.

Summary attribute

summaries the table’s purpose and structure

may be read by screen-reading software

Is obselete in HTML5

<caption>Space TV</caption>

<tr><td>Buffy the Vampire Slayer </td> <td>19:00</td> </tr>

<tr><td>Stargate SG-1</td>

<tr><td>Angel </td>

</table>

Much of what you will work with in web development will be existing, older site, you will still have to know how and why to use the summary attribute of the table element.

But be aware when developing anything in html5 that it is obselete in that iteration and will cause invalidation of your html5 pages.

Merging Table Cells: colspan

Allows a cell to span several columns

A <th> or <td> attribute

<table>

<tr>

<td colspan=“6”>Numbers</td>

</tr>

<tr>

</tr>

</table>

Merging table Cells: rowspan

Allows a cell to span several rows

A <th> or <td> attribute

<tr><td rowspan=“6”> Colours</td> <td>Blue</td>

</tr>

<tr><td> Green </td></tr>

<tr><td> Yellow </td></tr>

<tr><td> Brown </td></tr>

</table>

Table border

Activates border around cells

Syntax:

<table border=“n” > where “n” is a value in pixels which controls the “thickness” of the border

Note: Will validate in XHTML Strict but better to use CSS border styles and colours instead

It’s often a good idea when first building a table to set the border to 1px thickness (border =“1”) in the html file, so that you can see if you’re building the table properly. Later style with CSS and remove the border attribute from the html file.

Table width

May be set in pixels or as a % of the screen size:

Note: Will validate in XHTML Strict but better to use CSS width instead

Cellpadding & Cellspacing

cellpadding

<table> attribute

Amount of space in pixels between the contents of the cells and the cell walls

Syntax

cellspacing

<table> attribute

Amount of space between cells

Syntax

Note: Will validate in XHTML Strict but better to use CSS padding and for spacing

Height & Width

May be set in pixels or as a percentage

Certain rules apply to width

<table> values will override <td> values

Specify width at cell level when specification is necessary

Note: For XHTML Strict use CSS properties:

th, td { height: 100px; width: 200px; }

Accessible Tables

How does a screen reader read a table?

Most screen readers read the underlying code

Tabulated data can cause confusion or misunderstanding in interpretation if not used semantically

What’s all this talk about visual impairment?

How many people are blind or have visual impairment?

US statistics –

2008

approx 500,000 under age 18

Approx 25.2 million over age 18

Population 2009 – 300 million

Percentage who would benefit from assistive readers – approx 8.5%

When we are sighted and so are all our acquaintances it can be hard to realise big an issue accessibility is.

The above statistics come from the following site –

http://www.afb.org/Section.asp?SectionID=15

These statistics include people who are visually impaired enough to receive social benefits for their impairment.

Adult Definition and scope: The term vision loss refers to individuals who reported that they have trouble seeing, even when wearing glasses or contact lenses, as well as to individuals who reported that they are blind or unable to see at all. This estimate pertains to a nationally representative sample of the noninstitutionalized civilian population 18 years of age and over.

Australian statistics

2004

Total Australian population

20,328,609

Total Blind Australia (CERA Report 2004)

50,000

Total Vision Impaired (CERA Report 2004)

480,000

Equals – approx 1 in 40 people or 2.5%

http://www.bca.org.au/natpol/2005_Blind_Stats_num_and_perc_by_State_Territory_CERA.htm

Review - how does a Reader read?

Linear – across the page, line by line

Or by using the TAB key, jumping across or down

A good explanation can be read on the page listed below

Resource: http://www.webaim.org/techniques/screenreader/

Making a table accessible

Correct coding should result in the following:

Whole table can be read line by line, continuously or with sections selected manually.

Using keyboard commands, the user can move along rows and JAWS reads out the heading of the actual column plus the content of the cell.

Users can also read up and down columns in a similar way.

Users can select a cell and JAWS will present the information relating to the selected cell. That is, the cell content and, if the table has been coded correctly, the associated row and column headings.

Example with basic markup

	Lemons	Pears
Wholesale	$1.00	$1.50
Retail	$2.00	$2.50

<caption> Prices for lemons and pears in Sydney </caption>

<tr>

<th>Lemons</th>

<th>Pears</th>

</tr>

<tr>

<th>Wholesale</th>

</tr>

<tr>

<th>Retail</th>

</tr>

</table>

Prices for lemons and pears in Sydney

Make sure you include table structure

Allows grouping of header rows

Allows grouping of body rows

Allows grouping of footer rows

<caption>Prices for lemons and pears in Sydney</caption>

<thead>

<tr>

<th>Lemons</th>

<th>Pears</th>

</tr>

<thead>

<tbody>

<tr>

<th>Wholesale</th>

</tr>

<tr>

<th>Retail</th>

</tr>

<tbody>

</table>

	Lemons	Pears
Wholesale	$1.00	$1.50
Retail	$2.00	$2.50

Prices for lemons and pears in Sydney

Add id and headers attributes

The final addition to your markup is to add the id and headers attributes

This ensures the that data cells are linked with the appropriate headings.

Use this when you have extra levels of headings

And this makes table content easier to understand

id and headers attributes

the id attribute is used with the <th> element

AND used in conjunction with

the headers attribute within a <td> element

These attributes associate a cell with it’s heading

<tr>

<th id="beans">Beans</th>

<th id="carrots">Carrots</th>

<th id="tomatoes">Tomatoes</th>

</tr>

<tr>

<th id="darwin" colspan="5">Darwin</th>

</tr>

<tr>

<th headers="darwin" id="wholesale-darwin">Wholesale</th>

</tr>

Identify the different categories in your table

Link the column ids with the section you are in.

Try reading this out loud and see if it makes sense.

This is what it looks like.

Reference

http://www.usability.com.au/resources/tables.cfm

Table test page

Usability.com.au is an excellent, easy to read web site that offers solid, practical help for web developers in the Australian context.

Tables and CSS

CSS table properties

table-layout specifies the layout algorithm for a table element

Fixed – can be preset

Auto – cell content determines width

border-collapse specifies the border model for a table element

Separate – cell borders are spaced apart

Collapse – border collapsed into single border

Default is separate (detached)

border-spacing

sets the cell spacing between borders ONLY for a table element that uses the separated borders model

CSS table properties

empty-cells

only when using separated borders

Hides or shows empty cells

caption-side

specifies the position of the caption box relative to the table box

Top bottom left right

table

{

border-collapse: separate;

border-spacing: 1em 0.5em;

background-color: #ddd;

}

table

{

border-collapse: collapse;

}

row groups, column groups, rows, columns, and cells can have borders

Cells can also have padding

table {

border-collapse: collapse;

border: 1px solid black;

}

th{

text-align: left;

background: gray;

color: white;

padding: 0.2em;

}

td {

padding: 0.2em;

}