Category: table

Categories
data header podcast scope table web

Podcast #36: Complex Data Tables

In addition to a nice caption tag and summary attribute, you may know that a data table requires table header cells (TH) for the header rows and/or columns, and a scope attribute (see Web Axe episode 3, Data Tables). But what is there is more than one row of headers? This is called a complex table, and a different type of coding should be used.

Download Web Axe Episode 36 (Complex Data Tables)

A complex table:

  • can have any number of rows as a set of headers and/or the first column as a set of headers
  • can contain data rows in between the header rows
  • uses the id and headers attributes

Links:

Sample code (modified from WebAIM):

Shelly's Daughters
Name Age Birthday
by birth Jackie 5 April 5
Beth 8 January 14
by marriage Jenny 12 Feb 12

Categories
forms podcast table web

Accessible tableless forms

There are tables, there are forms, and there is accessibility. How should you use, or not use, these on a web page?

Download Web Axe Episode 14

Sample XHTML:


Sample CSS:
form div {
clear: left;
padding .5em 0 0;
margin: 0.5em 0px 0px;
}
form div label {
font-weight: bold;
float: left;
width: 10em;
margin-right: 1em;
}

Categories
caption code data header podcast scope table web

Data Tables

What you need to know to make your table accessible. This means your tabular data table, of course, since we’re no longer using tables for layout, right? Dennis covers summary, caption, th, scope and abbr.

Download Web Axe Episode 3

[transcript]

W3C techniques on row and column information

Sample code:

Average temperature and humidity for the United States
State Name Average Temperature Average Humidity
Alabama 50 50
Alaska 50 50