Category: header

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
header heading label podcast web

Hiding Labels and Sub-Headers

[Editor’s note: see more recent article by Dennis, When and How to Visually Hide Content]

There are certain instances when a label or header should be used, but wouldn’t necessarily need to be seen in the layout, such as a label for a phone number and a header for a menu. Dennis discusses when and how this would be done.

Download Web Axe Episode 22 (Hiding Labels and Sub-Headers)

[Transcript]

The CSS:

.hidden {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}

The XHTML:

Phone number:
(


)


-

Links:

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