Design a valid and accessible Table?

**WoodiE55** · Jun 21, 2006 08:20

I'm wanting to re-create the table you see above using vaild xHTML 1.0 strict code while making it accessible as possible. Currently the table is designed using nothing but tr and td tags - no header or caption tags and all styling is done within the table and not CSS.

What's really causing me problems is the fact that header info is displayed both on the top and side (spur gear and clutch bell). When most tables only have headers across the top.

Anyone care to give me pointers on how to better re-create this table?

-Michael

**c2uk** · Jun 21, 2006 09:05

As far as I know you can apply <th> in both rows and columns at the same time, and you can use <thead> <tbody> and <tfoot> as well as <colgroup> together with <col> to improve the markup.

With regards to accessibility, you can add a summary attribute to the table and a caption:

Code:

<table summary="just what you need">
<caption>The Results of our recent survey</caption>

More info can be found at htmldog and w3org: http://www.htmldog.com/guides/htmladvanced/tables/ | http://www.w3.org/TR/html4/struct/tables.html

Some more tutorials:
http://icant.co.uk/articles/tables/
http://veerle.duoh.com/index.php/blo..._styled_table/
http://www.snook.ca/archives/000164.php
http://www.snook.ca/archives/000167.php
http://fluidmind.org/test/css/tables.html

Sorry for the many links, I'm not good at explaining stuff, so I hope that helps.

**e-man** · Jun 21, 2006 10:26

Still one of the best articles on coding good tables is
Bring on the tables over at Berea street.

**all4nerds** · Jun 21, 2006 10:47

Hello

Table with CSS

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>An example of tables with CSS</title>
	<style type="text/css">
	<!-- 
	html,body{/*html for FF Moz NS7 OP */
	text-align:center; /*IE 5 IE 5.5*/
	margin:0;/* no margins body */
	padding:0;/* no padding body */
	height:100%;
	width:100%;
	}
	
	body{background:#ccccff;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:.75em;}
	
	.tbla caption,.tbla,.tbla th,.tbla td{
	border-color:#0099cc;
	border-style:solid;
	font-size:1em;
	}
	
	.tbla th,.tbla td{padding:.5em;}
	
	.tbla caption{background:#9999ff;border-width:.1em .1em 0 .1em;font-weight:600;padding-top:.7em;padding-bottom:.3em;}
	
	.tbla th{text-align:center;font-weight:600;font-style:italic;}
	
	.tbla {width:64em;border-width:.1em 0 .1em .1em;}
	.tbla td{border-width:.1em .1em 0 0;font-style:normal;}
	.tbla th{border-width:0px .1em 0 0;color:#000000;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;}
	
	.tbla col.a{background:#ffccff;text-align:right;width:33.3%;}
	.tbla col.b{background:#99ccff;text-align:left;width:33.3%;}
	.tbla col.c{background:#ccffff;text-align:center;width:33.3%;color:#ff0000;font-family:"Comic Sans MS", sans-serif;}
	
	head+body .tbla tr td {background:#ffccff;text-align:right;}
	head+body .tbla tr td + td {background:#99ccff;text-align:left;}
	head+body .tbla tr td + td + td {background:#ccffff;text-align:center;color:#ff0000;font-family: "Comic Sans MS", Geneva, sans-serif;}
	
	.x{float:left;position:relative;top:0;left:50%;width:64em;margin-left:-32em;margin-top:1em;}
	 -->
	</style>
	<!--[if IE]>
	<style type="text/css">
	.x{display:inline;}
	</style>
	<![endif]-->
</head>
<body>
<div class="x">

<table cellspacing="0" summary="aa" class="tbla">
<caption>table</caption>
<col class="a"><col class="b"><col class="c">
<thead>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
<tbody>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</tbody>
</table>
</div>

</body>
</html>

**WoodiE55** · Jun 21, 2006 11:06

Hey guys thanks for the link and the source code, however all the links I'm seeing is showing how to make a standard table where the headings go across the top. None of them have headings going down the side and top as well. I'm worried screen readers won't be able to pick up on the headings going down the side.

Any suggestions?

-Michael

**all4nerds** · Jun 21, 2006 11:10

Hello

headings down the side and top ? explane please

**WoodiE55** · Jun 21, 2006 11:24

Just as the image above shows..

Clutch Bell size is the heading at top with 16 - 24 being it's sizes

Spur Gear is the heading down the side with 62 - 78 being it's sizes

The rest of the table should show the gear ratio's between each clutch bell gear and a spur gear.

-Michael

**all4nerds** · Jun 21, 2006 12:01

Hello

horizontal (table heading?), i am not sure if you can use H tags in it
<caption>table</caption>

vertical(table heading?), also not sure if you can use a H tag in it
<th>one</th>

**c2uk** · Jun 21, 2006 15:51

Originally Posted by WoodiE55

Hey guys thanks for the link and the source code, however all the links I'm seeing is showing how to make a standard table where the headings go across the top. None of them have headings going down the side and top as well. I'm worried screen readers won't be able to pick up on the headings going down the side.

Any suggestions?

-Michael

Sorry to disappoint you, but almost all links provided point you exactly in this direction, just look closely at the source code of them, especially watch out for this tag: <th>, and as I pointed it out above, you can use it in a row at the same time as you might want to use it for a column, ie you can use it across the top at the same time as downwards. You can add the scope attribute to the th-tag to identify exactly for what it is (as I found out while reading the articles I mention now further down), ie:

Code:

<tr>
    <th scope="col">This is a heading for a column</th>
    <th scope="col">This is a heading for a column</th>
    <th scope="col">This is a heading for a column</th>
    <th scope="col">This is a heading for a column</th>
</tr>
<tr>
    <th scope="row">This is a heading for a row</th>
    <td>ordinary cell</td>
    <td>ordinary cell</td>
    <td>ordinary cell</td>
</tr>

If you use colgroups/rowgroups you need to use the values colgroup/rowgroup in scope.

And as far as I know screenreaders are able to identify it, but after a short amount of time spend on google looking for "accessible tables" I found these articles on the subject:

http://www.jimthatcher.com/webcourse9.htm
http://www.ferg.org/section508/accessible_tables.html
http://www.yourhtmlsource.com/tables...ssibility.html

Now which one of these techniques works best in a screenread, I can't tell you, all I can say is they are surely better than using just a simple table.

**WoodiE55** · Jun 21, 2006 19:18

Ohh ok, so by using scope I can tell the screen reader which way the info is flowing. Now that makes sense. Thanks guys!

-Michael

User Tag List

Thread: Design a valid and accessible Table?

Thread Tools

Display

Design a valid and accessible Table?

Bookmarks

Bookmarks

Posting Permissions