Basic structure of an HTML table
Creating an table in html is fairly simple. In the example below, I have created a sample course schedule for two GMU students:
| Monday | Tuesday | Wednesday | Thursday | Friday | |
| Eric | FREN 100, 9:00am-10:15am | MATH 100,1:30pm-2:45pm | No class | MATH 100, 1:30pm-2:45pm | BIOL 100, 3:30pm-4:45pm |
| Jessica | ENGL LAB 200, 9:00am-11:00am | No class | ENGL LAB 200, 9:00am-11:00am | No class | ENGL LAB 200, 9:00am-11:00am |
I have also added some classes (i.e., firstrow and firstcol) that allow me to style the background color of those header cells grey and change the text to white. Visually, it is easy to identify what the actual header cells are.
Unfortunately, the underlying code identifies every table cell the same way using the td tag. See the code snippet below:
HTML code snippet:
<table>
<tr class="firstrow">
<td></td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
</tr>
<tr>
<td class="firstcol">Eric</td>
<td>FREN 100, 9:00am-10:15am</td>
<td>MATH 100,1:30pm-2:45pm</td>
<td>No class</td>
<td>MATH 100, 1:30pm-2:45pm</td>
<td>BIOL 100, 3:30pm-4:45pm</td>
</tr>
<tr>
<td class="firstcol">Jessica</td>
<td>ENGL LAB 200, 9:00am-11:00am</td>
<td>No class</td>
<td>ENGL LAB 200, 9:00am-11:00am</td>
<td>No class</td>
<td>ENGL LAB 200, 9:00am-11:00am</td>
</tr>
</table>
To understand why this is a problem, it is important to consider how screen reading applications present information to a user with a visual impairment...