Fix table semantics

[selfthinker]

The table examples on http://govuk-elements.herokuapp.com/data/ have some semantic and therefore accessibility issues.

What problem does the pull request solve?

1. The "numeric tabular data" table should have the first column marked up as row headings (th). When I tried that, it didn't look right because there was too much bold. Adding more styling to remove that depending on types of tables would open a whole new can of worms, so I opted to change the content of the table instead. That should also make the table clearer out of context. (The data for that table was taken from https://www.gov.uk/vehicle-tax-rate-tables/other-vehicle-tax-rates)
2. The "data in a table" table uses thead wrongly. I moved that into a caption instead. And as we didn't have any styling for captions yet, I've added that as well. Hopefully this will also make it easier for services to use captions. (I noticed the vast majority of tables on gov.uk don't have any.)

I wasn't sure if to style caption directly or give it a class .table-caption as tables are one of the few elements within Elements which are styled globally. I'm happy to change to a class instead.

How has this been tested?

I have mostly tested the caption styling in various browsers via BrowserStack. All was fine except some older browsers showed double the spacing: Android 4 (but 4.4 was fine) and iOS 4 and 5. As we're not officially supporting those anymore and the styling on them is not really bad, I'd suggest to just ignore those issue.

Screenshots

Numeric tabular data - before

Numeric tabular data - after

Data in a table - before

Data in a table - after

What type of change is it?

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)

[gemmaleigh]

Thanks @selfthinker, the tables were copied from the maternity pay calculator, they use headings rather than table captions - so that would be a mistake I introduced in copying them over.

https://www.gov.uk/pay-leave-for-parents/y/yes/2020-05-02/employee/employee/yes/yes/30.0-week/yes/yes/yes/10.0-week/yes

Thanks for the fix!

As for the numeric tabular data, that looks good too.

@edwardhorsford mentioned they shouldn't have padding on the right of the table cell, to ensure the content is right aligned with no spacing - could you please remove that as part of this PR too.

[selfthinker]

I've sat with @edwardhorsford yesterday and we played around with various caption stylings and decided to do two things to it:

• Add a global text-align: left; to the element to reset the browser default to centre align it. I wonder if I should move that into _reset.scss instead?
• Give captions various heading classes depending on use case, in this case we chose a heading-small.

The only uncertainty was around the border that was underneath the (fake) caption and isn't there now (because it isn't in a table row anymore).
Reasons why we thought having a border might be bad all involved cases with column headers...

When there are already bold cells underneath, it just looks like another row and not like a caption:

When the caption is larger, it looks even weirder, and it's not clear the border belongs to it:

When we use the same example as for the other table and won't have a border, it also looks lost:

Only when making it larger (with heading-medium), it actually looks alright, but that will depend on the context and previous heading sizes:

Does that make sense? If anyone doesn't like it, do you have other ideas we could try?

[selfthinker]

Thanks @gemmaleigh, I have created a new PR for the padding on the right, as I don't think it really fits in here. See #482. I have another one related to this to follow as well.

I have now updated all the things, so the PR is ready to be looked at (and/or merged). The only uncertainty is around a potential border under the caption, as mentioned above.

[govuk-design-system-ci]

Hi @selfthinker thanks, I've merged #482.

In summary - this PR aligns the caption to the left and doesn't introduce a border underneath the caption.

Looks good to me, i'd like to also add guidance around use of table captions - but that can go in a new PR.

[selfthinker]

Thanks @gemmaleigh. I've added some guidance into #488. Let me know what you think.