Tables with a header row
Keep it simple. Break complex data into multiple tables if necessary.
Structure the table with a header <th> so the elements are identified for screen readers.
Accessible tables need a <caption> for screen readers.
Use tables for data display only.
Tables should not be used for layout purposes
Select the Table icon in Drupal's editing palette. Select the 3rd table style that includes the caption.
<thead> after caption code.
</thead> before tbody code.
Advanced Tip - The Overflow Code:
Add overflow <div> code before the <table> tag in the source code.
Add closing the </div> code after the </table> tag.
<div style="overflow-x: auto;">
<table align="left" border="1" cellpadding="10" cellspacing="10" style="width: 80%;">
<caption>DMV Meetings in March 2024</caption>
<thead>
<tr>
<th scope="col">Meeting Name</th>
<th scope="col">Date</th>
<th scope="col">Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>New License Plates</td>
<td>March 10</td>
<td>1:00 p.m.</td>
</tr>
<tr>
<td>Electric Car Credits</td>
<td>March 24</td>
<td>9:00 a.m.</td>
</tr>
</tbody>
</table>
</div>