tables with css3?

[kaufenpreis]

What are your feelings about tables and html5/css3? I just finished a HTML5/CSS3 course and the instructor seemed to think they were ok. I was surprised. Previously in XHTML, floats were encouraged.

If that's true, does that mean tables can also be used in mobile version of html5 file?

[Fotiman]

I'll give the standard canned response: tables are fine... for representing tabular data.

If you mean using tables for layout, well, that's discouraged. Anything that can be done with a <table> can be done without a table using CSS, but the converse is not true. For example, you could do something like:

<table>
 <tbody>
  <tr>
   <td>SECTION A</td>
   <td>SECTION B</td>
   <td>SECTION C</td>
  </tr>
 </tbody>
</table>

Or you could do something like this:

<div class="container-fluid">
 <div class="row">
  <div class="col-md-4">SECTION A</div>
  <div class="col-md-4">SECTION B</div>
  <div class="col-md-4">SECTION C</div>
 </div>
</div>

Note, those class names come from Bootstrap [getbootstrap.com] and would give you a 3 column layout with Bootstrap (though there are plenty of other options for achieving this as well), with each column taking 4 (the 4 in "col-md-4") grid columns out of 12 (4/12 == 1/3).
Now, suppose I later decide that I want SECTION A to display on the right instead of on the left, but I want that content to appear first in my document structure for SEO purposes. With the table approach, I don't have any options... I need to modify the HTML to move the first column to the end, and the order of the content will not be what I wanted for SEO purposes:

<table>
 <tbody>
  <tr>
   <td>SECTION B</td>
   <td>SECTION C</td>
   <td>SECTION A</td>
  </tr>
 </tbody>
</table>

But without tables, I could use CSS (the presentation layer) to display the first column on the right, and I don't need to touch my HTML content/structure at all. It might be as simple as putting this in my CSS:

.col-md-4:first-child {
 float: right;
}

Long story short: avoiding tables for layout will give you a more flexibility, and will be easier to maintain.

[lucy24]

tr.classname > td:first-child {display: block; float: right;}

Not saying you should, just saying you can ;)

[Fotiman]

lucy, that doesn't work for me. It still displays the first column first.
[jsfiddle.net...]

Also, note that applying float will implicitly make it a block element (so display: block; is not actually needed).

[lucy24]

You'd have to set everything else to display: block too. I just left out that part. Anyway, it was all rhetorical. Well, mostly. I do have one page that switches the table display to block on small devices-- but it really is a table, no matter what the validators may think.

Idle query: When you feed your code into one of those compatibility checkers, is there any circumstance in which it doesn't give the blahblah about "Tables should be used only for tabular data"? I've never known whether they check simply for the presence of tables, or whether they look more narrowly for tables containing text-of-any-kind.

note that applying float will implicitly make it a block element

Ah, useful to know.

:: uneasily waiting for dreadful fallout of hitting Reply All by mistake for Reply ::

[drhowarddrfine]

I question if the instructor was talking about the CSS3 display:table, etc. properties and not tables themselves. Tables should never be used for layout for structural reasons but using the layout property of CSS3 may be OK.

Using floats for general layout was never the intention of floats and aren't needed much as they were in the past.