SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist
    Join Date
    Apr 2003
    Location
    Lexington, KY
    Posts
    437
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Design a valid and accessible Table?



    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

  2. #2
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Dan G
    Marketing Strategist & Consultant

  3. #3
    SitePoint Member
    Join Date
    Mar 2006
    Location
    Antwerp, Belgium, Europe
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still one of the best articles on coding good tables is
    Bring on the tables over at Berea street.
    Peace,
    e-man

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  5. #5
    SitePoint Evangelist
    Join Date
    Apr 2003
    Location
    Lexington, KY
    Posts
    437
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    headings down the side and top ? explane please

  7. #7
    SitePoint Evangelist
    Join Date
    Apr 2003
    Location
    Lexington, KY
    Posts
    437
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  9. #9
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote 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.
    Dan G
    Marketing Strategist & Consultant

  10. #10
    SitePoint Evangelist
    Join Date
    Apr 2003
    Location
    Lexington, KY
    Posts
    437
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •