WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tables with sortable columns

for

From: Joelle Tegwen
Date: Feb 16, 2005 12:41PM


Tables with sortable columns



<FONT
face="Comic Sans MS" color=#008080 size=2>I did a page *just like this* for
books.
<FONT
face="Comic Sans MS" color=#008080 size=2>I use a lot of include files when I
code, so I've copied information in that normally would be externalized (like
the stylesheet) for simplicity. I've left in includes links that are irrelevant.
This code will give a pale background to the column that has been sorted. This
table is not totally accessible since that was not a requirement for the project
I was working on. So you'll want to include things like scope, summary, caption,
etc.
<FONT
face="Comic Sans MS" color=#008080 size=2>&nbsp;
<FONT
face="Comic Sans MS" color=#008080 size=2>If you need help deciphering any of
this let me know. Database information is held in a class called clsbooks to
restrict the amount of time that the recordset object is
open.
<FONT
face="Comic Sans MS" color=#008080 size=2>&nbsp;
<FONT
face="Comic Sans MS" color=#008080 size=2>HTH
<FONT
face="Comic Sans MS" color=#008080 size=2>&nbsp;
<FONT
face="Comic Sans MS" color=#008080 size=2>Joelle Tegwen
<FONT
face="Comic Sans MS" color=#008080 size=2>&nbsp;
<FONT
face="Comic Sans MS" color=#008080 size=2>&nbsp;
<FONT
face="Comic Sans MS" color=#008080 size=2><% myDate = "August 3, 2004"
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"&nbsp;&nbsp; "<A
href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd"><html><head>&nbsp;<!--#include
file="StandardHTMLHeader.asp"-->&nbsp;<style
type="text/css">&nbsp;<!--&nbsp;&nbsp; ul.<%= page%>&nbsp;
li#<%= page%> a {&nbsp;&nbsp;&nbsp;text-decoration:
none;&nbsp;&nbsp;&nbsp;font-weight: bold;&nbsp;&nbsp;&nbsp;color:
#000000;&nbsp;&nbsp;}&nbsp;&nbsp;table.<%= response.("order")%>
td.<%= response.("order")%> {&nbsp;background:
#FFFFEE;}&nbsp;&nbsp;table.<%= response.("order")%> th.<%=
response.("order")%> {&nbsp;background: #FFFFEE;}&nbsp;&nbsp;td.author
(min-width: 25%;}&nbsp;&nbsp;td.title{min-width: 25%;)
&nbsp;
<FONT
face="Comic Sans MS" color=#008080
size=2>&nbsp;&nbsp;-->&nbsp;</style>
&nbsp;<FONT face="Comic Sans MS"
color=#008080 size=2>
&nbsp;</head>
&nbsp;
&nbsp;<body>&nbsp;<!--#include
file="../MenuSwitcher.asp"-->&nbsp;<h2><%=
thisUser.getCurrentYear() %> Books</h2>
&nbsp;
&nbsp;<p>There are <%= clsBooks.getRowCount
%> books.</p>
&nbsp;
&nbsp;<table class="bookLists <%=
response.("order") %>" cellspacing="0" cellpadding="2">&nbsp;&nbsp;
<tr>&nbsp;&nbsp;<th class="author"><a
href="BookLists.asp?page=current&amp;order=author">Author</a></th>&nbsp;&nbsp;<th
class="title"><a
href="BookLists.asp?page=current&amp;order=title">Title</a></th>&nbsp;&nbsp;<th
class="isbn" nowrap><a
href="BookLists.asp?page=current&amp;order=isbn">ISBN</a></th>&nbsp;&nbsp;<th
class="reviewer"><a
href="BookLists.asp?page=current&amp;order=reviewer">Reviewer<a/></a></th>&nbsp;&nbsp;
</tr>&nbsp;&nbsp; <% for i = 0 to clsBooks.getRowCount-1
%>&nbsp;&nbsp; &nbsp;<tr valign="top">&nbsp;&nbsp;
&nbsp;&nbsp;<td class="author"><%= clsBooks.getFieldData("Author",
i)%></td>&nbsp;&nbsp; &nbsp;&nbsp;<td class="title"><a
href="BookReview.asp?isbnNoHyph=<%= clsBooks.getFieldData("isbnNoHyph", i)
%>">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<%=&nbsp;
clsBooks.getFieldData("Title", i) %></a></td>&nbsp;&nbsp;
&nbsp;&nbsp;<td&nbsp; class="isbn" nowrap><%=&nbsp;
clsBooks.getFieldData("ISBN", i) %></td>&nbsp;&nbsp;
&nbsp;&nbsp;<td class="reviewer" nowrap><%=
clsBooks.getFieldData("ReviewerName",
i)%></td>&nbsp;&nbsp;</tr>&nbsp;&nbsp;<% next
%>&nbsp;</table>
&nbsp;
&nbsp;<!--#include
file="StandardHTMLFooter.asp"-->
&nbsp;
&nbsp;<SPAN
class=909311919-16022005>
&nbsp;
&nbsp;
&nbsp;


From: christopher.m.kelly.gm22
[mailto: <EMAIL REMOVED> ] Sent: Wednesday,
February 16, 2005 1:12 PMTo: WebAIM Discussion
ListSubject: [WebAIM] Tables with sortable
columns

Do any of you know of a way to code tables in which
the column headers can be clicked on to sort the table data?&nbsp; The data is
supplied via ASP.&nbsp; I'm working with an outside vendor who has created
search results tables that allow sorting by column header.&nbsp; However,
they've made each column it's own separate table!&nbsp; This, of course, is
inaccessible and plays heck with JAWS.&nbsp;
Christopher M.<FONT face=Arial
size=2> Kelly, Sr. State Farm Insurance
Companies - disAbility Support email:
<EMAIL REMOVED>