Of all the tags used with tables, including those for accessibility, perhaps the most neglected is the col element. The easiest way to describe col is by making a comparison to the div tag: col is an element that controls the appearance of other content, while the col tag does not appear on the page itself (or at least not without CSS applied). col allows us to avoid the need to repeatedly apply classes to induvidual table cells.
Build An Accessible HTML Table
The basic structure of an HTML table consists of a table tag, rows, and an equal number of table cells in each row. That’s where most developers leave things, but it’s not enough: a table on a web page should have several elements added in order to make it both accessible and far easier to style with CSS.
A correctly structured table should usually have at least one set of table header cells, indicating the meaning or interpretation of the data in the cells of the columns underneath. Much like a web page, a table should be divided into table head (<thead>) and table body (<tbody>) sections, with an optional <tfoot> section that (rather paradoxically) must immediately follow the <thead> if it’s included. (Despite the order of the code, a modern browser will display the <tfoot> section last in the table. Think of the <tfoot> section as an opportunity to display summed or summary data for each row.)
Basic HTML for Tables
First, and most important, remember the Golden Rule: tables are for the use they were intended for, representing tabular data (lists of figures, etc). They are not for layout of graphics and text!
That being said, tables are relatively easy to construct, so long as you remember that they are made up of rows, with each row of the table containing cells. It is vitally important that the cell count on each row is the same. If they are not, horrid results tend to happen.
Tables start very simply, with a <table> tag. Each row in the table is signified by a <tr> tag, and each cell inside this row is listed in order with a <td> tag. All of these tags are nested, so the result looks something like this: