|Compare Pet Insurance||Classic||Select Plus|
|Vet fees cover||£2000||£5000|
|Extra treatments||Not included||£750|
Have more rows than columns where possible. Longer, rather than wider, tables make it easier for people to read and understand.
Use a maximum of 4 columns. This is the amount that can be comfortably displayed on a smart phone.
This guidance is from the gov.uk design system.
A caption is the heading for a table. Most screen readers announce the content of captions. Captions help users to find a table and understand what it’s about and decide if they want to read it. The caption is provided by the <caption> element.
Headers and footers
Both columns and rows of a table can have headings. These are marked up as <th> (table heading). We also use the <thead>and <tbody> tags. Although these are not technically needed in all tables, they add some semantic value and are useful if a table needs to be printed as the <thead> element is repeated across all printed pages.
Table footers (<tfoot>) can be used if there is a lot of rows in a table. It will be displayed by a browser under the body content, but in the markup must be above it. If you have to support a very old browser test this display as in some older browsers it is displayed before the body. In this case move it to below the table content.
When a row needs a heading the <td> of that row should be marked up as a <th>. Make the heading descriptive.
When the data that relates to the headings is ambiguous the attribute scope=“col” or scope=“row” should be added. The scope attribute defines the direction of the header cells and associates them with the corresponding data cells. The scope attribute is also needed for larger tables with one header row or column. We recommend always defining the scope of your column or row headings.
Top left cell
The top left cell of a table is often blank as there is no overarching header for the row headings and the content of the table has been described by the <caption>. This cell can be left blank, but must be marked up as an empty <td></td>.