Accessible Table Markup Demonstration

Posted January 11, 2008 @ 4:03 AM, by Marc, in HTML — 0

Here is a quick demonstration of an average table written with accessibility in mind. While tables can be much more complex than this, I feel that this example represents a lower level of complexity that is commonly used today. For more complex table demonstrations a quick search in Google should yield decent examples.

Note: The CSS used for this website will render certain spacing, padding, borders, and fonts that you may not see when this table markup is used in your own website.

The Demonstration Table

This is where you write a short description of the table contents
	Monday	Tuesday	Wednesday	Thursday	Friday
Person	Bob	Sue	Harry	Stan	Kris
Place	London	New York	Hollywood	Paris	Madrid
Time	3:00	11:00	2:30	8:00	5:45

The Source of the Demonstration Table

<table cellspacing="0" summary="This is where you write a long description of the table contents">
    <caption>This is where you write a short description of the table contents</caption>
    <thead>
        <tr>
            <td></td>
            <th scope="col">Monday</th>
            <th scope="col">Tuesday</th>
            <th scope="col">Wednesday</th>
            <th scope="col">Thursday</th>
            <th scope="col">Friday</th>
            <th scope="col">Saturday</th>
            <th scope="col">Sunday</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Person</th>
            <td>Bob</td>
            <td>Sue</td>
            <td>Harry</td>
            <td>Stan</td>
            <td>Kris</td>
            <td>Beth</td>
            <td>Frank</td>
        </tr>
        <tr>
            <th scope="row">Place</th>
            <td>London</td>
            <td>New York</td>
            <td>Hollywood</td>
            <td>Paris</td>
            <td>Madrid</td>
            <td>Boston</td>
            <td>Sydney</td>
        </tr>
        <tr>
            <th scope="row">Time</th>
            <td>3:00</td>
            <td>11:00</td>
            <td>2:30</td>
            <td>8:00</td>
            <td>5:45</td>
            <td>9:15</td>
            <td>1:30</td>
        </tr>
    </tbody>
</table> 

What Did You Think?

Like Dislike Liking or disliking this entry is now disabled Score 0

Comments

Would you look at that; there aren’t any comments. If you’re not afraid of being first, breaking the ice, and “going where no (wo)man has gone before,” fill out the simple form below ↓

Blog entries about web design & development, our clients, our projects, our company, and more