HTML TABLES / COMPLETE EXAMPLE
Complete commented example
The whole example, with its explanation kept in the code.
The standalone HTML file includes the caption, column headers, row headers, and row groups. It uses browser-default presentation and needs no stylesheet or script. The complete source is also available below for copying into your own editor.
The finished example
Both workshops take place at the community center. Times are local.
This reference preview includes the header relationships and caption explained across the chapters.
| Workshop | Day | Time |
|---|---|---|
| Introduction to accessible documents | Tuesday | 10:00 a.m. |
| Creating accessible tables | Thursday | 2:00 p.m. |
Read the complete commented HTML
<!doctype html> <!-- Project: Common Ground Accessibility Author: Laurie Kamrowski-Fick Last updated: November 1, 2026 Copyright © 2026 Common Ground Accessibility --> <html lang="en"> <!-- DOCUMENT SETTINGS: Identify the example and allow zoom on small screens. --> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="Laurie Kamrowski-Fick"> <title>Workshop schedule example | Common Ground Accessibility</title> </head> <body> <!-- MAIN CONTENT: A standalone semantic example; presentation is left to browser defaults. --> <main> <h1>Community workshops</h1> <p>Both workshops take place at the community center. Times are local.</p> <!-- TABLE IDENTITY: Caption names this informational table without adding redundant ARIA roles. --> <table class="workshop-table"> <caption>Community workshop schedule</caption> <!-- COLUMN HEADERS: Each th describes the cells below it in this simple column. --> <thead> <tr> <th scope="col">Workshop</th> <th scope="col">Day</th> <th scope="col">Time</th> </tr> </thead> <!-- DATA ROWS: Workshop names are row headers; day and time are data cells. --> <tbody> <tr> <th scope="row">Introduction to accessible documents</th> <td>Tuesday</td> <td>10:00 a.m.</td> </tr> <tr> <th scope="row">Creating accessible tables</th> <td>Thursday</td> <td>2:00 p.m.</td> </tr> </tbody> </table> </main> <!-- AUTHORSHIP: Retain attribution when reusing or adapting this learning example. --> <footer> <p>© 2026 Common Ground Accessibility. Educational example.</p> </footer> </body> </html>Change the example content to fit your actual data. If the structure becomes more complex, reassess the header associations instead of copying the original scope values without review.