Wikipedia talk:Manual of Style/Accessibility/Data tables tutorial
Unbulleted lists
At the risk of increasing the number of templates in an article, there is a space-saving template called {{Unbulleted list}} which might be useful when tables become wide. It produces the correct semantic markup for a list, which is exactly what is needed when a data cell contains a lower hierarchy of data (in this case a list). Here's an example:
| Title | Album details | Peak chart positions | Sales | Certifications | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| US | AUS | AUT | FIN | NLD | NZ | NOR | SWE | SWI | UK | ||||
| Bleach | 89 | 34 | 26 | 24 | — | 30 | — | — | — | 33 | 1.7 million (US) | Platinum (US) | |
| Nevermind |
|
1 | 2 | 2 | 1 | 5 | 2 | 2 | 1 | 2 | 7 | 10 million(US) 26 million (worldwide) |
Diamond (US) 2× Platinum (UK) |
would become:
| Title | Album details | Peak chart positions | Sales | Certifications | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| US | AUS | AUT | FIN | NLD | NZ | NOR | SWE | SWI | UK | ||||
| Bleach | 89 | 34 | 26 | 24 | — | 30 | — | — | — | 33 | 1.7 million (US) | Platinum (US) | |
| Nevermind |
|
1 | 2 | 2 | 1 | 5 | 2 | 2 | 1 | 2 | 7 |
|
|
This also removes some of the the superfluous column widths (if you must have them, use ems because you don't know the metrics of the client's browser font) as well as the deprecated <br /> tags that are being used to visually mimic a list. Also, style="text-align:center" is much better than setting a td to the deprecated align=center. As usual, this isn't compulsory, but it is much better practice. The extra whitespace indenting in the unbulleted lists is only there to help make the structure clearer. I don't expect every editor to cope with this sort of markup, but there's no reason why experienced editors can't improve this as they clean-up tables. --RexxS (talk) 14:47, 10 September 2010 (UTC)
- I do agree about the widths. Widths do make the table look prettier. But they should be made of
emrather than pixels. A good practice that I forgot to apply here. Thanks for reporting. :-) - I agree about
style="text-align:center"as well. - Now I'm not sure about this particular use of unbuletted lists. Sure the principle is good and all. But I'm not sure it's worth the effort here. In the "Album details" column it saves a little space. And in "Sales" and "Certifications" column it can sometimes indicate a list of two items. It's a lot of code for a small change. However, The Prodigy discography contains a few examples where unbuletted lists would really be useful (lists of 4 to 7 items). It needs some more thoughts (and possibly feedback from users) on my opinion.
- I do agree about the widths. Widths do make the table look prettier. But they should be made of
- Among tables, there are some far more urgent use of {{Flatlist}} (with another layout) in {{Navbox}} for example. I'd rather work on a large-scale important improvement on Navbox than a few lists here and there. Priorities, priorites. ;-) Dodoïste (talk) 04:35, 11 September 2010 (UTC)
Avoiding more than two levels of headers
The table given as the good example could be improved by using row headers (in this case the distances). Remember, screen readers are capable of non-linear navigation, so the ability to announce the [column header][row header] before any cell value can be more effective when row headers are present, particularly on larger tables. --RexxS (talk) 15:05, 10 September 2010 (UTC)
- In theory I agree of course. In this particular case I was unsure the distance would made relevant row headers. But at a second thought – and after I saw more use cases – I think you are right. :-) Dodoïste (talk) 15:16, 10 September 2010 (UTC)