Home > Chapter Review and Exercises > Ch 8 - Tables > Tables In-Class Exercise

Creating a Data Table

Overview

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 lesson you'll create a simple data table.

Learner Outcomes

At the completion of this exercise:

• you will be able to create a simple data table that includes <table> <caption>, <thead>, <tbody>, <tr>, <th> and <td> elements as well as scope attributes.

How to Create an HTML Table

1. HTML tables begin with <table> and end with </table>.

2. Inside the table element, you can optionally include a caption element, which contains a brief title or description of the table's content. Most browsers display the caption above the table.

3. Like HTML documents, tables include a head and body.  In tables, these are specified using the <thead> and <tbody> elements respectively.  These tags are optional, but they should be included on long tables.  If long tables are printed and span multiple pages, browsers will repeat the content of the <thead> element (usually the top row(s) of the table) at the top of every printed page.

4. Each row in a table begins and ends with table row (tr) elements: <tr></tr>

5. 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.

6. If a cell contains headers, it begins and ends with th elements: <th></th>

7. If a cell contains data (not headers), it begins and ends with td elements: <td></td>

8. 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 figuring out which headers apply to the cell they're in.

Compare the following table with the code that was used to create it:

<table>

  <caption>School Lunch Menu</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>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">Carnivores</th>

      <td>Sausage pizza</td>

      <td>Corn dogs</td>

      <td>Sloppy Joe</td>

      <td>Beef taco</td>

      <td>Chicken and dumplings</td>

    </tr>

    <tr>

      <th scope="row">Herbivores</th>

      <td>Veggie pizza</td>

      <td>Veggie dogs</td>

      <td>BBQ tempeh</td>

      <td>Bean burrito</td>

      <td>Tofu teriyaki</td>

    </tr>

  </tbody>

</table>

Be sure you understand the above markup before proceeding to the activity.

Activities

1. Certain web design strategies and techniques can create barriers for people with disabilities and others.  In this 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.

2. Open the file table.html that is in the Table Exercise folder in your Google Drive Classroom folder.  At this point, this file should include nothing but "bare bones" HTML.

3. Use the following instructions to add a table to the body of your web page.  Consult the above example table markup as a model.  Note that the School Lunch Menu table has three rows and six columns, whereas this Web Accessibility Checklist table will have two columns and seven rows.  The table you're creating should look something like this:

4.  Save your work, and check it in your web browser to be sure it looks like you expect it to.  If it doesn't, that's normal - tables can be tricky!  It sometimes takes several trials to get all the tags just right.  Don't worry about spacing between and within cells:  We'll be addressing that in a future lesson.

Instructions for Creating Your Table

The caption of the table should be "Web Accessibility Checklist"

The table should have two columns, with the following headers:

1. User characteristic

2. 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.

1. Unable to see

2. Unable to perceive colors

3. Unable to use mouse

4. Unable to hear

5. Prone to having seizures

6. Easily distractible

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.

1. Code all images with ALT text

2. Avoid using color alone to convey information

3. Be sure all website features can be accessed using keyboard

4. Add captions to multimedia

5. Avoid content that flashes

6. Keep the design simple

Resources/Online documents

• Data Tables in Modern Web Design

• Common HTML Tags

• HTML Element Reference from W3Schools

• HTML5 Draft Specification

All done?

Have your instructor view the code for your table and see how it looks in a browser.