homepage Welcome to WebmasterWorld Guest from 54.161.175.231
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
tables with css3?
kaufenpreis




msg:4677955
 1:47 pm on Jun 6, 2014 (gmt 0)

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




msg:4677992
 2:51 pm on Jun 6, 2014 (gmt 0)

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




msg:4678048
 5:42 pm on Jun 6, 2014 (gmt 0)

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

Not saying you should, just saying you can ;)

Fotiman




msg:4678057
 6:44 pm on Jun 6, 2014 (gmt 0)

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




msg:4678077
 8:14 pm on Jun 6, 2014 (gmt 0)

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




msg:4678306
 12:45 pm on Jun 8, 2014 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved