Table

[bencullimore]

Use this issue to discuss tables in the NHS digital service manual

[davidhunter08]

See issue for 'Caption is hidden on table styling'

[davidhunter08]

There is some confusion amongst the community (Slack conversation) regarding table captions, including clarity on what it's for and whether you always need it.

[sarawilcox]

We usually include a caption at the top of a table but I want to put an H2 (same wording) above it to break down the content on the page.

Am I OK to remove the caption and instead to use <table class="nhsuk-table" aria-label="Tools and their uses"> to make sure the table heading is announced but that it's visually hidden? @mcheung-nhs, do you have a view, please?

Then it looks like this.

Also, I notice that we have a question above about whether captions are always needed. Plus a related issue - did we ever resolve this? https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/26#issuecomment-630038860

Do we need to add some more guidance to the service manual about captions?

[Graham-Pembrey]

Hello. I noticed the 'Table with panel' design mentioned on the service manual page, with a blue heading and white background, is the pre-set presentation when I add a table component in Wagtail. That style is also live on the medical abbreviations page which I am updating.

Is our preference still to use the grey background design shown on the service manual page? If so, does the pre-set component in Wagtail need to be changed to reflect that? Any pointers would be much appreciated.

Live 'Table with panel' example:

Example table from the service manual page:

[cazzzac]

Do we currently have any ability for more complex features in tables?

In NHS Jobs, when creating a shortlist of applicants to send an interview invite, I want the user to be able to 'select all' by clicking a link button integrated into the first cell of the table (A1) header. (See image, where the 'select all' would be more integrated into the table, rather than separate).

The alternative would be to create a range of buttons above/below the table to perform select functions ('select all' and 'remove applicant/remove'). However, I'd prefer to have it integrated as it's more compact and cleaner.

[sarawilcox]

Does anyone know why we right align the content in the 3 column table in mobile? Our guidance is generally not to right align text.

[sarawilcox]

NHS.UK content designers would like to amend the table example so that the text in each column starts with a capital letter.

This affects the 2 column table example on our component page.

I'll bring this to a Style Council meeting.

UPDATE (July 2024) - holding off on updating this as there is some other work going on to review tables.

[sarawilcox]

In fact, decided this didn't need to go to Style Council. We gave the 2nd column in the 2-column table caps in the most recent release. @markasrobinson, for info. See above.

[danjohnstonUX]

Does anyone if there's a rationale for table rows having a hover colour that is the same as the default page background? Is this intended behaviour to enhance readability on white backgrounds, and if so, is there a reason why we don't provide similar functionality on grey backgrounds? I'm presuming it's linked to the introduction of the tabs component?

Many staff-facing systems I've worked on have users who require information to be displayed in detailed tables (regularly exceeding 3 columns, and not unheard of for rows to be in the 100s). Using a hover colour is one potential method of enhancing the readability of such complex tables, so I was curious as to whether this factored into the existing behaviour at all, and if it's seen as the 'preferred' option compared to, for example, alternating table row colours.

If anyone has any examples of this in action in a live service, or any user feedback on the concept then that would be super useful.