Step 2: Making Row and/or Column Headers

  • Headers show the meaning of the information in a table’s rows and columns. People who are unable to see the table, however, cannot make the visual associations. Properly created headers will help those who use screen readers to navigate through data tables one cell at a time, and they will hear the column and row headers spoken to them.

    A well-made table includes headers so that the cells in each column and row are associated with the correct headers. Do not italicize the text in order to make a header—this is artificial and will not create a real header. The procedure below will automatically italicize the headers.

    Format Table Header iconColumn Headers

    1. Click once in the vertical grey bar on the left side of the table, just to the left of the top row. This will highlight the entire row of column headers.
    2. The formatting toolbar will now show several table icons. Click on the icon with the horizontal blue bar at the top—hovering over it will display "Format row as table header" (see image).
    3. The column headers will become italicized, and their code will be updated to mark them as column headers.

    Row Headers

    1. Click once in the horizontal grey bar at the top of the table, just above the first column. This will highlight the entire column of row headers.
    2. The formatting toolbar will now show several table icons. Click on the icon with the vertical blue bar on the side—hovering over it will display "Format column as table header" (see image above).
    3. The row headers will become italicized, and their code will be updated to mark them as row headers.

    The table will now look like this:

    Course Name
    Course Number
    Location
    Webology 101
    WBLG101 Delaney G-41
    Webology 201
    WBLG201
    Delaney G-41

    Add Display Class

    At this point, the table is accessible. But we can make it look better by adding the display class.

    1. Inspector icon in the formatting toolbarOpen the Inspector by clicking the far-left icon on the Review tab of the formatting toolbar. 
    2. Click anywhere within the table (you may need to click once or twice). The Inspector will now show the table elements at the top of the window.
      Inspector table elements
    3. Table style selectorClick on “Table.” The Style Selector will now appear (see image at right). Click on one of these to choose the width of your table in relation to the rest of the text on the page. (Be sure that only ONE style is selected. If you select more than one, you will need to unselect them all and start over.)

    When you choose one of the styles, your table will now look like this:

    Course Name
    Course Number
    Location
    Webology 101
    WBLG101 Delaney G-41
    Webology 201
    WBLG201
    Delaney G-41

    Note: No matter which style you choose, the table will always appear to be full-width in the web editor. However, previewing the page will show the selected width.

    Step 3: Adding Captions