W3C home > Mailing lists > Public > www-style@w3.org > May 2018

Re: multi-col table layout Fwd: accessible tables

From: Florian Rivoal <florian@rivoal.net>
Date: Tue, 8 May 2018 21:47:49 +0900
Cc: www-style@w3.org
Message-Id: <B52E9D02-DBBE-4845-8FA4-32C1C47C838E@rivoal.net>
To: Chaals Nevile <chaals@yandex.ru>
This should be doable with standard css. Multicol implementations are still somewhat buggy and/or incomplete, but otherwise this should work, and it does in chrome and safari (maybe edge also, but I'm on a mac, so I did not test):

<!doctype html>
<style>
table {
	columns: 2;
	display: block;
	float: left; /*for shrink-wrapping, otherwise not needed*/
}
caption {
	column-span: all;
	display: block;
}
</style>
<table>
	<caption>caption of the table</caption>
	<thead><tr><td>key<td>value</thead>
	<tbody>
		<tr><td>001<td>first
		<tr><td>002<td>second
		<tr><td>003<td>third
		<tr><td>004<td>fourth
		<tr><td>005<td>fifth
		<tr><td>006<td>sixth
		<tr><td>007<td>seventh
		<tr><td>008<td>eighth
		<tr><td>009<td>tenth
	</tbody>
</table>


The only difference with your plaintext rendering is that the column headers are not repeated. If that's needed to, the story gets longer. I'll give you the details if you care, but for now I'll skip in case you don't.

—Florian

> On May 7, 2018, at 16:43, Chaals Nevile <chaals@yandex.ru> wrote:
> 
> Hi,
> 
> This request comes from accessibility requirements for presenting a table, and when I was playing around with it there seems no way to break up a table over two or more columns, as described below.
> 
> As far as I can tell the right place to handle this is CSS rather than HTML (although it may be in the intersection) and being a feature request for tables I have a nasty suspicion it is not trivially easy, but asking seems worthwhile.
> 
> Any thoughts to offer?
> 
> (The alternative is to make a JS library to draw the table and decorate it with aria and so on, which as far as I can see is entirely feasible but kind of frustrating...)
> 
> cheers
> 
> Chaals
> 
> ------- Forwarded message -------
> From: "Michael A. Peters" <mpeters@domblogger.net>
> To: "WAI Interest Group" <w3c-wai-ig@w3.org>
> Cc:
> Subject: accessible tables
> Date: Fri, 04 May 2018 22:21:27 +0200
> 
> Hello,
> 
> I am sure this is covered somewhere, but I just can not find where.
> 
> Tabular data, 9 pairs of key = value data. But the table cell contents
> are short, so instead of just two columns I want to do four columns
> where the third is a continuation of the first and the fourth is a
> continuation of the third, e.g.
> 
> [ caption of the table]
> [ key ] [ value ] [ key ] [ value ]
> 001     first     006     sixth
> 002     second    007     seventh
> 003     third     008     eighth
> 004     fourth    009     tenth
> 005     fifth
> 
> 
> Is there a way to mark that up so screen readers will read them as pairs
> in the order 001 to 009 in order?
> 
> I can't be the first to have needed this.
> 
> 
> -- 
> Chaals: Charles (McCathie) Nevile    find more at https://yandex.com
> Using Opera's long-abandoned mail client: http://www.opera.com/mail/
> Is there really still nothing better?
> 
Received on Tuesday, 8 May 2018 12:48:22 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 8 May 2018 12:48:23 UTC