Simple Data Tables

Illustration of a simple table with a header row in gray, and the grid is a 4 x 4

Tables with a header row

Checklist for an accessible simple data table:

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

Creating the Table Caption

Select the Table icon in Drupal's editing palette. Select the 3rd table style that includes the caption.

Screen shot of table builder in Drupal 10

Screen shot of different table builder modes

Screen shot of table builder with caption embed option

Screen shot of a simple table sample with DMV data in a 3 column wide, 3 column high table

Creating the Table Header

<thead> after caption code.

</thead> before tbody code.

Screen shot of HTML code of a table with a highlight on <thead> at the beginning and the closing tag at the end.

Screen shot example of the completed 3 x 3 DMV simple table.

Advanced Tip: Creating Responsive Tables with a Scroll Bar (Mobile)

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>

Page updated

Report abuse