2

Bootstrap's page about responsive design says this:

Responsive utilities should not be used with tables, and as such are not supported.

Being new to web development, I am not familiar with what this is talking about. It seems that there is a general aversion to using <table>. Is this true?

Also, the quote as phrased doesn't make sense to me. Shouldn't it read like this?

Tables should not be used in responsive utilities, and as such are not supported.

Cory Klein
  • 51,188
  • 43
  • 183
  • 243

2 Answers2

4

Tables are very structured elements. A <td> can only ever be a column. You couldn't change it to suddenly appear like a row or float it somewhere, etc., etc.

HTML, in responsive design, shouldn't define what something should look like (or where it should appear to a degree) that's CSSs job. the HTML should simply group text and other elements. So a HTML <table> and all it's associated tags breaks this paradigm.

CSS display now contains table like elements: How is a CSS “display: table-column” supposed to work? so this removes the need to embed <table> tags and allows you to use the more generic <div> tags and their like, thus now it's a <div> that looks like a <table>, there is nothing to stop you making this appear as something completely different simply by updating the CSS. You could even make it look different for different audiences, etc.

hope this helps a little.

Community
  • 1
  • 1
Liam
  • 27,717
  • 28
  • 128
  • 190
  • *"HTML, in responsive design, shouldn't define what something should look like*" - I'd say that's true whether using responsive design or not. – Adrift Dec 05 '13 at 18:39
  • Historically this wasn't the case though. HTML was the look and the structure all in one bundle. – Liam Dec 06 '13 at 09:20
2

It's not really true in the latest browsers, but traditionally it's been hard to unstyle a table in CSS to not have a table layout.

So while a table might be the correct semantic element for your tabular data, pragmatics meant that if, in some responsive design profiles, you want the data to be displayed in a linear format, it just couldn't be done, except by using JavaScript to rip the table markup out and replace it.

Try table, tbody, tr, td {display:block; } - (JsFiddle http://jsfiddle.net/Z26GF/) in various browser (e.g. compare IE10 with IE9 behaviour) to see what I mean.

(The more I learn about Bootstrap, the less I like it. It seems to encourage a number of bad HTML practices. This is one of them)

Alohci
  • 78,296
  • 16
  • 112
  • 156
  • 'It seems to encourage a number of bad HTML practices. This is one of them' Not using tables to style your website is a pretty good practice IMHO – Philipp Gayret Dec 05 '13 at 18:14
  • 2
    @Philipp - Right, but that wasn't the point. The point is that it discourages all use of tables, even when the correct semantic markup is a table. – Alohci Dec 05 '13 at 19:15
  • 1
    There are [styles for tables, too](http://getbootstrap.com/css/#tables), the part quoted in the OPs post is put a bit out of context as it was regarding displaying elements conditionally, and saying not to use this on tables – Philipp Gayret Dec 05 '13 at 19:37