Accessible HTML Tables

You can add a caption with a brief description of the table's contents - this is especially helpful if the table is complicated.  The example table above includes the following caption:

<table>
  <caption>
    Courses that UW-Madison students must take to be admitted into the UW-Madison PharmD Program
  </caption>
  <!-- … -->
</table>

Including column and row headers helps viewers understand exactly which headers / categories the data in a specific cell corresponds to.

1. In the example table above, each of the 3 headings in the top row should indicate that they are headings that apply to the data in the columns that sit below them.
   Simply add the code scope="col" or scope="column" into the <th> tag:

       <tr style="background-color: #c5050c; color: white;">
         <th class="col" scope="column" width="38%"><strong>Prerequisite</strong></th>
         <th class="col" scope="column" width="26%"><strong>Requirement</strong></th>
         <th class="col" scope="column" width="36%"><strong>Approved </strong>Courses</th>
       </tr>

2. Similarly, the first cell in each row should be designated as a header.  In the table above, the second row should have "Calculus" set as the row header - simply add the code scope="row":

       <tr>
         <th class="row" scope="row" style="text-align: left;"><strong>Calculus</strong></th>
         <td>1 course</td>
         <td>MATH 221<br>MATH 211<br>MATH 171 &amp; 217</td>
       </tr>

In cases where you have a table that absolutely requires multi-level header cells, you can assign each header cell a unique id, and then link the relevant data cells with affiliated headers. 

In the example table below, each data cell has 3 headers affiliated with it.  For example, the cell that lists the Rural Pharmacy Practice course (in yellow), we can see that it's affiliated with (1) Course Title; (2) that it's a Pharmacy course with the course number prefix of 726; and (3) the course number is 630.

To connect the Rural Pharmacy Practice data cell with its 3 related headers, you'll need to do the following to each column header:
(1) assign a unique id to each <th> and (2) set the scope to column.  

  <table class="stripe" style="width: 90%; height: 297.733px;" cellspacing="0" cellpadding="5">
    <tbody>
      <tr class="black" style="height: 47.3667px;">
        <th width="9%" scope="col" id="cnumber">Course Number</th>
        <th width="40%" scope="col" id="ctitle">Course Title</th>
        <th width="8%" scope="col" id="credits">Credits</th>
        <th width="27%" scope="col" id="reqs">Requisite</th>
        <th width="8%" scope="col" id="sem">Semester Offered</th>
        <th width="7%" scope="col" id="csize">Class Size</th>
      </tr>

In the header row for Pharmacy (726) courses that spans 6 columns, you'll need to:
(1) assign a unique id and(2) set the scope to colgroup.

<tr class="dark-gray" style="height: 29px;">
        <td colspan="6" id="pharmacy" scope="colgroup"><strong>Pharmacy (726)</strong></td>
</tr>
    

And finally, in the data cell that lists the Rural Pharmacy Practice course, you'll need to list the 3 affiliated header id's. 
In this case, you'd use headers="pharmacy p630 ctitle"

  <tr style="height: 29px;">
        <th headers="pharmacy" id="p630" style="text-align: right;" >630</th>
        <td headers="pharmacy p630 ctitle"><a href="#rural-health">Rural Pharmacy Practice</a></td>
        <td headers="pharmacy p630 credits" style="text-align: center;" >2</td>
        <td headers="pharmacy p630 reqs">DPH-3 students in Rural Health program</td>
        <td headers="pharmacy p630 sem">Fall</td>
        <td headers="pharmacy p630 csize">Small seminar</td>
  </tr>