Now that you have added paragraph and hyperlink textual elements to your HTML documents, you can add the tables, graphs and images. This page describes how to add data and text tables to your HTML spreadsheets.
In the sample spreadsheet, you will find tables on the first and third page. The first page contains two data tables, and the third page contains a text table.
Similar to the paragraphs you added previously, you should place these tables into the "contents" section of your HTML documents.
When tables are used in an accessible HTML document, they must contain CAPTION, THEAD and TBODY tags and use TH and TD tags appropriately. Here is the basic template that tables should follow:
<p>
<table summary="SUMMARY HERE">
<caption>
CAPTION TO ASSOCIATE WITH THE DATA TABLE </caption>
<thead> HEADER INFORMATION
HERE ABOUT TABLE COLUMNS </thead>
<tbody> DATA CONTAINED HERE WITH TR AND
TD TAGS </tbody>
</table>
</p>
Examine how the contents of the table are placed into the HTML document. In the summary section, place a brief description of the the table's intent. In the caption section, place the title you would like to appear above the table.
The "thead" section is used to place the column headers that will describe what each column in the data table contains. In this section, use "th" tags to mark each column. This is important to help screen navigation tools to more easily represent the table to users using assistive technology.
Once you have entered the summary, caption, and "thead" information, you are ready to insert the contents of the table into the "tbody" section of the table. You can do this by using the "th" and "td" tags.
The example for the data tables appears in the page1.htm page listed at the bottom of this document.
The sample Excel spreadsheet contains formulas to calculate overall grades and also calculates the number of students who earned each letter grade. While calculation is a primary purpose for a spreadsheet program, it is important to note that the Web pages you are authoring here are static in nature and cannot perform calculations.
As a result, formulas will not be present in the accessible HTML version of the spreadsheet. If you are interested in preserving the formulas embedded in the Excel spreadsheet, you can add them as comments to the HTML page. For example, examine the "formula comment" below:
<!--
overall grade = 0.15 * assignment1 + 0.15 * assignment2 + 0.15 * assignment3
+ 0.25 * midterm + 0.30 * final_exam
-->
This comment code would be useful if you wanted to remember later how the overall grade column was calculated.
Again, you should place your text tables in the "contents" section of your HTML documents. You can use the same table template listed above in the "Adding Data Tables" section of this page; this template still applies to textual tables, allowing you to simply fill in the contents of the tables in the appropriate area.
Fill in the summary section with a caption that you want to see above the table in the caption section, as well as column header information describing each column, using the "th" tag. Once you have established the structure of the table, you can place the contents of the table into the HTML page.
The content of the tables is taken directly from the Excel spreadsheet; it is recommended that you "cut and paste" the information into your the HTML editor of your choice and then mark the rows and columns using the "tr" and "td" tags.
After following the above guidelines, you will have achieved an accessible HTML table of your spreadsheet data, but the borders are not present. In the calendar example (page 3 of the spreadsheet), you should make certain that borders appear to mark the weeks and the columns.
You may apply any border and style formatting you like to your tables, as long as any style is applied externally in an external style sheet.
Here is a sample of the page3.htm HTML code for creating borders for the table
columns. (notice the "border" and "rules" tags):
<table summary="The is the calendar for ENG101" border
rules="cols">
You may look to the suggested HTML pages below for an example on how to achieve your desired look and feel.
Add the two data tables to page1.htm and the text table to page3.htm of your HTML spreadsheet. When you are finished, check your work against the example solutions listed below (note that page2.htm has not been changed yet).
Proceed to the next page in this module to find out how to add images and graphs to your document.
College of Architecture (COA)
Fax: 404-894-9320
Phone: 404-894-4960 (v/tty)
User Agreement
Excel
Tables
,
2 KB)
Previous Page
