top of page Skip to Main Content

Accessible Web Sites: Tables

Accessibilitiy Checkers

Tables

When working on tables in Rich Text/HTML editor:

  • do not fill in anything on the Legacy tab (these are deprecated, i.e., no longer acceptable HTML)
  • identify table headers
  • give the table a caption (this will appear above the table)
  • Choose a class (either "table table-bordered" or "table table-striped")

Table edit screen

Table Sample

Tables should be set up to help screen readers identify key elements. A table head section identifies the column headings and a caption functions as the table title.

 

<table class="table table-striped"> <caption>Shelly&#39;s Daughters</caption> <tr> <th scope="col">Name</th> <th scope="col">Age</th> <th scope="col">Birthday</th> </tr> <tr> <th scope="row">Jackie</th> <td>5</td> <td>April 5</td> </tr> <tr> <th scope="row">Beth</th> <td>8</td> <td>January 14</td> </tr> </table>
Shelly's Daughters
Name Age Birthday
Jackie 5 April 5
Beth 8 January 14

DO NOT USE TABLES FOR LAYOUT

Discover. Create. Succeed.