Lesson 1: Creating a Data Table
Tables were introduced to the web with the original purpose of displaying data in rows and columns. In time they came to be used for an additional purpose: page layout. This lesson will focus on their original purpose. Page layout will be explored later in this course.
In this lesson you'll add a simple data table to your portfolio.
At the completion of this exercise:
- you will be able create a simple data table.
- Earlier in this course, in the lesson titled How People with Disabilities Access the Web, you learned how certain web design strategies and techniques can create barries for people with disabilities and others. In the current lesson, you will use an HTML table to create a web accessibility checklist that you can refer to later as you design websites, to assist you in ensuring that your web content doesn't needlessly exclude anyone. Before you begin to code your table, review the following section How to Create an HTML Table.
- Create a sketch of how your table will be organized, referring to the section below titled Instructions for Creating Your Table.
- Create a new web page consisting of all the essential tags.
- Save the new web page as table.htm.
- Using XHTML, create the table you have sketched.
The final table should have two columns and seven rows (including the top row, which contains the column headers).
- Be sure to include a summary and caption with your
table, as described below.
- Save your work, and check it in your web browser to be sure it looks like you expect it to. Don't worry about spacing between and within cells: We'll be addressing that in a future lesson.
How to Create an HTML Table
- HTML tables begin and end with table elements: <table></table>.
- The opening table element should include a summary attribute, which is read by screen readers in order to give
blind users an overview of what the table contains and how it's organized. Being informed of this information up front
helps blind users to more easily navigate the table and understand what they're hearing. Example:
<table summary="Your brief table description here">
- A table's caption (brief descriptive text, usually displayed above the table) begins and ends with caption elements:
- Each row in a table begins and ends with table row (tr) elements: <tr></tr>
- Each cell in the table begins and ends with either table header (th) elements or table data (td) elements, depending on what type of information the cell contains.
- If a cell contains headers, it begins and ends with th elements: <th></th>
- If a cell contains data (not headers), it begins and ends with td elements: <td></td>
- Table header elements (th) should also include a scope attribute, which is either scope="row" or scope="col". This instructs screen readers as to which headers apply to which cells. Screen readers read tables row by row from left to right, and without this extra markup blind users would have a difficult time
the header applies to the column
Compare the following table with the code that was used to create it:
School Lunch Menu
||Chicken and dumplings
summary="Two school lunch menu choices in two rows, with columns corresponding to school days Monday through Friday">
<caption>School Lunch Menu</caption>
<td>Chicken and dumplings</td>
Not sure how the HTML table markup works? Ask your instructor to walk you through it. Be sure you understand the above markup before proceeding to the next section.
Instructions for Creating Your Table
The table should have two columns, with the following headers:
- User characteristic
- Accessible design tip
In the first column (the column with header "User characteristic"), list the following user characteristics related to web accessibility, in the order in which they're presented below.
- Unable to see
- Unable to perceive colors
- Unable to use mouse
- Unable to hear
- Prone to having seizures
In the second column (the column with header "Accessible design tip"), the following web design issues correspond with the same-numbered user characteristic from the first column.
- Code all images with ALT text
- Avoid using color alone to convey information
- Be sure all website features can be accessed using keyboard
- Add captions to multimedia
- Avoid content that "flashes"
- Keep the design simple
Have your instructor view the code for your table and see how it
looks in a browser. You are now ready for the next unit.
Copyright © 2005-2008 by University of Washington.
Permission is granted to use these materials in whole or in part for
educational, noncommercial purposes provided the source is acknowledged.
This product was created with support from the National
Institute on Disability and
Rehabilitation Research of the U.S. Department of Education (grant
#H133D010306), and is maintained with support from
the National Science Foundation (grant #CNS-0540615). The contents do not
necessarily represent the policies of the U.S. federal government, and you
should not assume their endorsement.