HTML Table Generator
Note: Do not make a table responsive by turning its rows into blocks. That removes the row and column relationships, so a screen reader stops announcing it as a table and reads a list of unrelated values. A scrollable wrapper keeps the semantics intact.
The scope attribute is the important one. A header cell with scope="col" applies to its column and scope="row" to its row, and this is what lets a screen reader announce "Revenue, Q3, £42,000" instead of reading out a bare number with no context. Without it, a reader navigating cell by cell hears a grid of values and has to remember the headers themselves. Adding one attribute per header cell is the entire fix.
The caption is the other. It names the table, is announced when the table is entered, and is what tells someone deciding whether to read it what it contains. A heading above the table is not equivalent, because it is not associated with it programmatically.
The structural elements matter for a practical reason too: thead and tbody let a browser repeat the header row across printed pages, and let a sticky header work with two lines of CSS instead of JavaScript.
The responsive question has one answer that works and several that do not. Turning a table into a stack of blocks with display: block destroys the row and column relationships entirely — a screen reader stops treating it as a table and announces a list of unrelated values. Wrapping the table in a scrollable container keeps the semantics intact and simply lets it scroll sideways. That container needs tabindex="0" and a role, or keyboard users cannot scroll it at all.
Use a table for data. Layout tables were abandoned for good reasons.
Frequently Asked Questions
Why does my table need scope attributes?
Because they associate each header with its column or row. With them, a screen reader announces "Revenue, Q3, £42,000"; without them it reads a bare number and the user has to hold the headers in their head. It is one attribute per header cell.
What is the right way to make a table responsive?
Wrap it in a container with overflow-x: auto, and give that container tabindex="0" and a role of region with a label — otherwise keyboard users cannot scroll it. Converting the rows to blocks with display: block destroys the table semantics and is worse than the scroll.
Do I need a caption?
For any data table, yes. It is announced when a screen reader enters the table and tells someone what it contains before they commit to reading it. A heading above the table looks the same but is not programmatically associated with it.
Can I use a table for layout?
You can, and you should not. Screen readers announce it as a data table with rows and columns, which is meaningless when the structure carries no data relationships. Grid and flexbox do the job without lying about the content. The one lingering exception is HTML email.
How do I make the header row sticky?
position: sticky with a top value, applied to the th cells rather than to the tr — a table row cannot itself be a positioning context in most browsers. It also requires the table to have a proper thead, which is one of the reasons to include one.
