Skip to Page Content | Navigation for Module


Navigation for Module 3: Powerpoint
Page 15 of 25

  1. *Introduction
  2. *Tools You Need
  3. *Methods to Put Online
  4. *Make Webpage Method
  5. *Save Slides as Images
  6. *Template of Webpage
  7. *Title Slide
  8. *Bullet-List Slide
  9. *Multiple Column Slide
  10. *Embedded Video Slide
  11. * Table Slide
  12. *Image Slide
  13. *Drawing Shapes Slide
  14. *Notes Slide
  15. *Chart Slide
  16. *Non-Outline Text Slide
  17. *Sound Slide
  18. *Animation Slide
  19. *Publish to Blackboard
  20. *Publish to WebCT
  21. *Resources

Adding Table Slide to Webpage Template

Tables are quite prevalent in PowerPoint slides; many presentations contain tables to convey data to the viewer. Within the context of on-line education, many presentations use tables to show everything from course grading policies, statistical data, and course schedules.

This page focuses on two elements:

There are two slides in the original sample PowerPoint presentation that contain tables: slide 6 and slide 9. Work with slide 9 first since it is a simpler table, and then focus on slide 6.

To create accessible HTML tables:

  1. Go into the BODY section at the location where this slides should be inserted; in this case, insert the new HTML slide just after slide 5 (at the end of the BODY section).

    From the sample "Human-Computer Interaction" presentation, (see Image 21) is the original PowerPoint slide 9.


    Description of Image 21: Original PowerPoint Slide

    Note: This is a simple slide that contains a title and one table. The purpose of this table is to define which letter grades are associated with numeric grades in a course. The table contains two columns and six rows; one row is the "header" row that specifies what each column contains, and the later five rows provide the data of the table.

  2. Begin by providing the slide's image and title:
    <!-- Slide 9 -->
    <img src="Slide9.jpg" alt="Slide 9">
    <H1>Grading Policy</H1>
  3. Now look at the basic structure of accessible tables.

    Most Web page authors are familiar with creating tables using the TABLE tag, but many are not familiar with all of the accessibility guidelines when creating tables.  When creating tables, there are two main sections of the table:

    Note: There is also a "foot" section, but we are not concerned with this section right now.

    • The "head" section of the table is used to create the header row that defines the purpose of each column. In this case, the first row will be the "header" row because the "Grade" and "Score Range" information describes each of the columns' intent - display the letter grade of the corresponding numeric grade.
    • The "body" section contains the "data" or content of the table. Place the last five rows of the table in this section because these rows represent the data of the table, providing the letter and number grades.

    In addition to the "head" and "body" sections of the table, an accessible table should also contain:

    • The caption is used to display title/caption information on the top of the table.
    • The summary is used to provide a textual equivalent of the table for screen readers like Jaws; thus if you provide a summary, then someone who cannot see (or see well) can use the summary text to get an overall impression of the table without having to navigate through all the data in the table.

    The basic structure of an accessible HTML table looks like this:

    <table border="1" summary="This is a long
    description of the table, providing an overall view of the table for non-visual readers.">

      <caption>
        This is the caption of the table
      </caption>

      <thead>
        <tr>
          <th scope="col">First Column</th>
          <th scope="col">Second Column</th>
          <th scope="col">Third Column</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>Cell 1</td>
          <td>Cell 2</td>
          <td>Cell 3</td>
        </tr>
        <tr>
          <td>Cell 4</td>
          <td>Cell 5</td>
          <td>Cell 6</td>
        </tr>
      </tbody>
    </table>

    Note: The caption is marked with the "caption" tag, the table's head is marked with the "thead" tag, and the table's body is marked with the "tbody" tag. The summary is provided as an attribute of the "table" tag, and specifies a border to separate the cells of the table using the "border" attribute of the "table" tag.

    Within the table:

    • Specify a row of information using the TR tag.
    • Specify elements within a row using TH or TD tags; the TH tag is used to provide header information, and the TD tag is used to provide data information. Thus in the above example you have one row specified in the table's header section; this row contains three columns, each marked with the TH tag. You also have two rows specified in the table's body section. Each of these two rows contains three data elements (marked with the TD tag), making each row contain three columns of data.

    You might have also noticed the "scope" attribute of the TH tags. This is used to "connect" the columns of data to their header. In doing this, non-text readers will be able to effectively navigate through the data and read the table correctly to the user.

    • If you view this sample table in your Web browser, you should see something like (see Image 22).


    Description of Image 22: Tabular Grid

    Note: The header cells are already highlighted, the caption is displayed atop the table, and all of the data cells are filled in.

  4. Save your work as an HTML file. For this example, save as presentation.htm. The completed code for converting a Table Slide (i.e. Slide 9) of the PowerPoint presentation HCI.ppt should be as follows.

    Code Sample of Table Slide:

    <!-- Slide 9 -->
    <img src="Slide9.jpg" alt="Slide 9">
    <H1>Grading Policy</H1>

    <table border="1" summary="This table shows the relationship between numeric and letter grades for the course.">

      <caption>
        What grade you'll get for your numeric performance
      </caption>

      <thead>
        <tr>
          <th scope="col">Grade</th>
          <th scope="col">Score Range</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>A</td>
          <td>90+</td>
        </tr>
        <tr>
          <td>B</td>
          <td>80-89</td>
        </tr>
        <tr>
          <td>C</td>
          <td>70-79</td>
        </tr>
        <tr>
          <td>D</td>
          <td>60-69</td>
        </tr>
        <tr>
          <td>F</td>
          <td>0-59</td>
        </tr>
      </tbody>
    </table>
  1. Open your HTML file in a web browser. The file should display with the slide image, followed by the title and then the slide content (see Image 23).


    Description of Image 23: Converted PowerPoint Slide

    You can also view the context of the Table Slide in the complete conversion of the Sample PPT to HTML (, 520 KB).

    Note: The caption information is placed above the table, and the header information ("Grade" and "Score Range") are automatically highlighted by the Web browser.

Layout Tables

Now that you know how to generate a table, look at slide 6 from the original PowerPoint presentation. It is a table-based slide as well; the only thing that is added to this slide is the hyperlink (see Image 24).


Description of Image 24: Original PowerPoint Slide

To edit the image and title:

<!-- Slide 6 -->
<img src="Slide6.jpg" alt="Slide 6">
<H1>Instructor Contact Information</H1>

To edit the content of the table:

Just because the original PowerPoint slide contains a table does not mean that the accessible HTML slide should contain a table. The above slide (slide 6 in the original PowerPoint presentation) demonstrates a good example of a situation where the material is placed in a table only for organization effects.

There are not good titles for each column because this table is merely providing information, conveying the name, office, phone, etc. of the instructor. Of course, if you had many instructors for the course (as in a "team taught" situation), then perhaps it would be good to keep the table layout; but as this example stands, it would be best to have the accessible HTML version of this slide to not have a table. Separate the information using colons (":"). Still providing all of the necessary information, but will not have to construct the table and provide extraneous headers for the columns.

  1. Save your work as an HTML file. For this example, save as presentation.htm. The completed code for converting a Layout Table Slide (i.e. Slide 6) of the PowerPoint presentation HCI.ppt should be as follows.

    Code Sample of Layout Table Slide:

    <!-- Slide 6 -->
    <img src="Slide6.jpg" alt="Slide 6">
    <H1>Instructor Contact Information</H1>

    <p>Name: Jon A. Preston</p>
    <p>Office: T-109</p>
    <p>Office Hours: Tues & Thurs, 3-6pm</p>
    <p>Phone: 770 960 4354</p>
    <p>E-mail:
       <a href="mailto:jonpreston@mail.clayton.edu">jonpreston@mail.clayton.edu</a>
    </p>

    Each of the rows in the table has been made into paragraphs. This still conveys the important information but without the unnecessary table.

    Note: The hyperlink is created using the "A" tag in HTML. In this case, the hypertext reference is a "mailto" which tells the Web browser that if the user selects this link that the browser should allow the user to send an e-mail message to the intended recipient (in this case, "jonpreston@mail.clayton.edu").

  1. Open your HTML file in a web browser. The file should display with the slide image, followed by the title and then the slide content (see Image 25 ).


    Description of Image 25: Converted PowerPoint Slide

    You can also view the context of the Layout Table Slide in the complete conversion of the Sample PPT to HTML (, 520 KB).

For a complete, detailed discussion and guidelines for making more complex tables accessible, point your Web browser to http://www.w3.org/TR/WCAG10-HTML-TECHS/#table-summary-info.

The next page will discuss how to convert slides with images.

Top of Page arrow up
       Page 15
Next Page Next
Page 16:
Image Slide


 
-- END OF PAGE