Data Tables in FrontPage

Genealogists use Excel spreadsheets or Word tables to organize information - census records, vital records, indexes, etc.  Pasting table data from Excel and Word was covered in earlier tutorial. A table of data is constructed to show relationships between data in a way that is easy to see and understand. One look is usually enough and we know what is what and what it relates to. This tutorial will cover the steps necessary to create a data table in FrontPage and move the styling to an external style sheet.

The sighted viewer will look at your table and give it a quick overview to see what the table is about and if it may have information he is looking for. The viewer should be able to easily find detailed information from the table. A glance at the title (caption) and the headings should tell him what he needs to know.

But, what if your viewer has impaired vision and relies on a screen reader to use the Internet and obtain information from data tables? The viewer who uses a screen reader can still get the information, if the table is well made and complies with the Web Content Accessibility Guidelines.

When you see a data table on the web, the title or label identifies what the table is about and the heading cells will tell you how to find the information. HTML provides two tags that can help screen reader users and enhance the accessibility of data tables.

<caption> for the table title - By default, <caption> will place the title in the center immediately above the table. However, CSS can be used to change the style and on screen position of the caption element. The caption should come immediately after the <table> element and before anything else.

<summary> for the tables purpose and structure - <Summary> is an attribute contained within the table element and is never displayed by a visual browser. Screen readers and speech browsers use this attribute to help users understand the table. The <summary> attribute should be used to describe the primary purpose of the table and give an indication of its overall structure. It would be read immediately before the caption.

The <th> tag should be used for column and row headings. The <td> tags indicate actual data within the cell.

Create a Data Table in FrontPage

Step 1: Create a table with the number of rows and columns you need Table | Insert | Table or choose the table icon from the toolbar. The example uses 8 columns and 15 rows.

Step 2: Choose the number of rows and columns you want (you can always add more later) and the width of the table. It is not necessary to specify height. Make your choices for cell padding and spacing, borders and background colors. All of this formatting will be moved to the style sheet.

Step 3: Highlight the first row of cells | Right click | Cell Properties | Check Header Cell
This will change the <td> </td> to <th></th>

Step 4: To add a caption to the table, place the cursor within the table -  Table | Insert | Caption

Step 5: In Design View, highlight the text just before the table. Click on Code View and look for your selected text. After that, you should see the code for your table <table border="1" width="100%" cellpadding="5"> After the word table, hit the space bar and type the word summary="....." 

Styling the Table in FrontPage

Create a style sheet. File | New | More Page Templates | Style Sheets | Normal Style Sheet | Save As | census.css (or whatever name you want.) NOTE: You can download the free Top Style Lite to use with Front Page.

You can then move the styling from the html code to the new style sheet you just created. You can also change the default styling and add additional styles. I normally add comments to the style sheet so that I know what the styles are for.

The same table shown above with styling applied in external style sheet

External style sheet