0

I'm coding a responsive & semantic HTML5 webpage. However, I've just hit a snag:

There's a piece of design that would normally be respresented as tabular data within the HTML (i.e. a heading and corresponding data) but it would be impossible to use tables in this case due to the visual design/layout requirements.

Is there a HTML alternative to using tables that can, semantically speaking, represent tabular well with assistive technologies e.g. screenreaders?

At the moment I'm running with:

<p> <strong>Heading 1</strong>: <span>Data 1</span> </p> <p> <strong>Heading 2</strong>: <span>Data 2</span> </p>

Not the best solution, but it does allow me to fulfill the visual design requirements.

Many thanks.

I am me
  • 131
  • 2
  • 12
  • It would be more constructive to consider what to do with the visual design/layout requirements. Just like you can format things in a tabular way in CSS even when the `table` element is used, you can format a `table` in a non-tabular way. – Jukka K. Korpela Sep 03 '14 at 07:40
  • I disagree with the close vote for 'primarily opinion-based'. This is a good direct question which has factual answers. – Niels Keurentjes Sep 03 '14 at 07:41
  • There is one element in HTML for tabular data, `table`. Asking what is the best way, or what are the different ways (it is not clear which of these is asked), for marking up tabular data without using `table` is heavily opinion-based. – Jukka K. Korpela Sep 03 '14 at 07:45
  • (And if I formed an opinion on it, I would want to know first what kind of tabular data we have, what its context is, what will be done with it, and how it might be formatted.) – Jukka K. Korpela Sep 03 '14 at 07:46

1 Answers1

0

In HTML5 there's a strict separation between semantics and presentation. Most 'default' presentational effects are just that - rules in the browser's default stylesheet.

If your data is semantically a table, use a table element by all means. If default table rendering really does not fit (I would actually be surprised, given what you can achieve with for example the table-layout rules), feel free to override it:

table.customtable, table.customtable tr {
  display:block;           /* overrides the defaults of 'table' and 'table-row' */
}
table.customtable td {
  display:inline-block;    /* overrides the default value of 'table-cell' */
}

This keeps the semantics the same but allows you full freedom on the layout end.

Niels Keurentjes
  • 41,402
  • 9
  • 98
  • 136
  • This makes sense (except for the vague speak about “semantics”) but does not answer the question (which calls for opinions on markup for tabular data without using `table`). – Jukka K. Korpela Sep 03 '14 at 07:43
  • @niels-keurentjes: looks interesting. So I presume that converts ALL cells to blocks/inline blocks without any cross-browser issues? Also, would I need to reset any of the thead/tbody/tfoot wrappers too do you think? Thanks for the info. – I am me Sep 03 '14 at 07:46
  • @Iamme this is internally how the browser decides to render like a table, so yes overriding it has been standardized since IE8 or so when IE also started respecting all possible values for `display`. – Niels Keurentjes Sep 03 '14 at 07:49
  • @JukkaK.Korpela I'm skipping the [XY-problem](http://meta.stackexchange.com/a/66378/219504) - given the second paragraph of the question ('normally I would use tables here') he's obviously only asking about HTML alternatives because he doesn't realize CSS can do it just fine. – Niels Keurentjes Sep 03 '14 at 07:50
  • I did consider the table reforming route, but remember reading about browser problems with that approach some time ago. My site must work on IE7+, and is fully responsive, so any IE8+ solutions wouldn't be possible. But perhaps my information is wrong. Will try the following and see what can be done: `table, thead, tbody, th, td, tr { display: block; }` – I am me Sep 03 '14 at 07:53
  • Media queries [don't even work below IE9](http://caniuse.com/#feat=css-mediaqueries), so good luck with supporting IE7 (global market share: 0.11%, lower than IE6) for a responsive site - you'll have to go mobile-last by definition. I'm not sure what the exact support is in IE7 so do give it a try anyway - I know it doesn't support `inline-block` but it may very well fully support this scenario. – Niels Keurentjes Sep 03 '14 at 08:28