Table

Description: A table’s purpose is to display data for the user. There are two types of tables, simple and complex. A simple table is a table that contains one header to a row and/or column, and a complex table is a table that contains more than one header to a row and/or column.

508 Guidelines/ TIP: HTML5 does not allow the summary attribute, but a summary of the table is needed to pass 508; therefore, using a caption tag and adding the class .sr-only will hide it from the screen and it will only be avaiable through the screen reader. If the caption needs to be displayed on the screen, simply remove the .sr-class from the caption tag.

Simple Table

Description: A simple table is a table that has one header to a row or column.

Simple Table with Column Headers

508 Guidelines: For a simple table with only column headers to be 508 compliant, add the attribute of scope="col" to the <th>

This table represents data for …
Heading 1 Heading 2 Heading 3 Heading 4
Data Data Data Data
Data Data Data Data
Simple Table with Column and Row Headers

508 Guidelines: For a simple table with column and row headers to be 508 compliant, add the attribute of scope="col" to the <th> for column headers and add the attribute of scope="row" to the <th> for row headers.

This table represents data for …
  Heading 1 Heading 2 Heading 3
Row Heading 1 Data Data Data
Row Heading 2 Data Data Data

Complex Table

Description: A complex table is a table that has multiple headers to a row or column.

508 Guidelines: For a complex table to be 508 compliant, id's are given to each header, then the data cells are given the attribute of "headers" to the <td> tag, for example, <td headers=""> that need to be linked with the id's given in the headers. For example, based on the table below, Kate indicates "No" to "Do You Like This Ice Cream?" and "Chocolate"; the data cell would be "<td headers="ice-cream chocolate">No</td>"

This table represents Kate and Jackson's preferred ice cream and pass time
  Do You Like This Ice Cream? Do you like This Pass Time?
Name Chocolate Vanilla Watching Movies Reading
Kate No Yes Yes Yes
Jackson Yes Yes Yes No 
<table class="table ehmp-table-default table-bordered">
    <caption class="sr-only">This table represents data for …</caption>
    <thead>
    	<tr>
            <th scope="col">Heading 1</th>
            <th scope="col">Heading 2</th>
            <th scope="col">Heading 3</th>
            <th scope="col">Heading 4</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    	<tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>
Copy 
<table class="table ehmp-table-default table-bordered">
    <caption class="sr-only">This table represents data for …</caption>
    <thead>
    	<tr>
            <td> </td>
            <th scope="col">Heading 1</th>
            <th scope="col">Heading 2</th>
            <th scope="col">Heading 3</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
            <th scope="row">Row Heading 1</th>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    	<tr>
            <th scope="row">Row Heading 2</th>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>
Copy 
<table class="table ehmp-table-default table-bordered">
    <caption class="sr-only">This table represents Kate and Jackson's preferred ice cream and pass time</caption>
    <thead>
    	<tr>	
            <td id="main-heading-empty"> </td>
            <th colspan="2" id="ice-cream">Do You Like This Ice Cream?</th>
            <th colspan="2" id="pass-time">Do you like This Pass Time?</th>
        </tr>
    	<tr>
            <th id="name">Name</th>
            <th id="chocolate">Chocolate</th>
            <th id="vanilla">Vanilla</th>
            <th id="watching-movies">Watching Movies</th>
            <th id="reading">Reading</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
            <td headers="name">Kate</td>
            <td headers="ice-cream chocolate">No</td>
            <td headers="ice-cream vanilla">Yes</td>
            <td headers="pass-time watching-movies">Yes</td>
            <td headers="pass-time reading">Yes</td>
        </tr>
        
    	<tr>
            <td headers="name">Jackson</td>
            <td headers="ice-cream chocolate">Yes</td>
            <td headers="ice-cream vanilla">Yes</td>
            <td headers="pass-time watching-movies">Yes</td>
            <td headers="pass-time reading">No</td>
        </tr>
    </tbody>
</table>
Copy