PDA

View Full Version : CSS Tables - any comments.



effpeetee
Jan 16th, 2009, 04:11 PM
I have just bought the book - "Everything you know about css is wrong!"
This page which I have uploaded here (http://exitfegs.co.uk/3col-absolute.html) is done using tables. I am interested in the thoughts of people on this site about their use.

Frank

BoldUlysses
Jan 16th, 2009, 04:21 PM
By using tables you mean using the CSS property:


div {
display:table;
}

as opposed what's traditionally meant by tables, the obsolescent HTML table-for-layout:


<table>
<tr>
<td>Here is a table</td>
</tr>
</table>

I think the biggest problem I have with it is its lack of cross-browser support (http://www.quirksmode.org/css/display.html). Other than that it just seems like you're taking one step forward (toward CSS and away from tables-for-layout) just to take two steps back, returning to a modus operandi and way of thinking about web design that is outdated and was kind of a hack to begin with.

coothead
Jan 16th, 2009, 04:24 PM
Hi there Frank,

I know that my eyesight isn't what it used to be but I was unable to detect a single table at that site. :eek:

coothead

abduraooft
Jan 16th, 2009, 04:27 PM
I think the biggest problem I have with it is its lack of cross-browser support. Yes, the layout is not so nice in IE6/7

tagnu
Jan 16th, 2009, 04:27 PM
Hi there Frank,

I know that my eyesight isn't what it used to be but I was unable to detect a single table at that site. :eek:

coothead

I see table. (FF3)

jerry62704
Jan 16th, 2009, 04:38 PM
There are css table attributes. And it looks terrible in IE6. "table" must not be known to IE6.

effpeetee
Jan 16th, 2009, 04:42 PM
Hi there Frank,

I know that my eyesight isn't what it used to be but I was unable to detect a single table at that site.

coothead


These are Tables, aren't they?

Frank


#main {
display: table;
border-collapse: collapse;
width: 100%;
}
#nav {
display: table-cell;
width: 180px;
background-color: #e7dbcd;
}
#extras {
display: table-cell;
padding-left: 10px;
border-right: 1px dotted #d7ad7b;
width: 180px;
}
#content {
display: table-cell;
padding: 0 50px 0 10px;

jerry62704
Jan 16th, 2009, 04:48 PM
Tables that don't work in IE6. And I have to admit I missed them the first time I looked at the code. That's the problem when you have a 2K mind and a 3K problem and are over 60.

effpeetee
Jan 16th, 2009, 04:51 PM
Tables that don't work in IE6. And I have to admit I missed them the first time I looked at the code. That's the problem when you have a 2K mind and a 3K problem and are over 60.
I am 83 and headed to 84. My son is 57.

Use the old ones up first!

Frank

jerry62704
Jan 16th, 2009, 06:05 PM
My son is only 20. I have shoes older than he is. We were married about 15 years before we had him. I'm considering renewing my option with her for the next 37 years.

effpeetee
Jan 16th, 2009, 06:41 PM
My son is only 20. I have shoes older than he is. We were married about 15 years before we had him. I'm considering renewing my option with her for the next 37 years.
Go for it man. Nothing venture; nothing gained.

I wish you all well.

Frank

jamesicus
Jan 16th, 2009, 08:29 PM
Yes, the tables are left justified and display columnar in IE6 and IE7.
My goodness, this is like an "old fogey" convention :) -- I will be eighty this year!

JFP

effpeetee
Jan 17th, 2009, 01:44 PM
My main reason for starting this thread was to see if there was resistance to using tables now that they were to be in the CSS; purely because of the present antipathy; almost horror; at the idea of using tables for positioning. The book that I mentioned originally is arguing the case for this change, saying that it is easier to use and easier to learn than CSS floating etc especially for those just coming into the profession.

I realise that not all browsers support it, but give it time and in the meantime get used to it and get ready for the final release of CSS3. I am going to try to re-code my home site using tables, just for the hell of it. Using 64bit Windows 7 as well!

I shall probably get a knighthood for this.

Frank

effpeetee
Jan 17th, 2009, 09:47 PM
Just out of interest, here is a css table site (http://exitfegs.co.uk/abb.html).

I know that it doesn't work in all browsers. But seems OK with IE8 and FFox.

Frank

Rowsdower!
Jan 17th, 2009, 10:41 PM
...
The book that I mentioned originally is arguing the case for this change, saying that it is easier to use and easier to learn than CSS floating etc especially for those just coming into the profession.
...

Yeah, and this is the logic (if that's what you can call it) that got us to tables for layout in the first place. Even in general I really take issue with the reasoning behind that book's position. Heck, it's easier to just staple up your wallpaper at home than it is to properly paste it up, but that won't make for a good final product either. As I see it, some things take - and are worth - extra effort to learn and to properly carry out.

Tables are just the welfare support of web design. If you have to use it, do so sparingly (and only at the right times) then learn to get yourself away from that crutch. Honestly I think that even including them in the standards seems counterproductive to the CSS "movement."

effpeetee
Jan 18th, 2009, 10:35 AM
Yeah, and this is the logic (if that's what you can call it) that got us to tables for layout in the first place.

Well, when I first started coding several years ago, I used html tables because I couldn't find any other way to do it.:confused:
I cannot find the 'staples' in the site I posted. (http://exitfegs.co.uk/abb.html) Being pedantic is OK to a degree, but don.t throw a good and useful technique out of the window until you have tried it. CSS tables is not the same thing as HTML tables. If they had called it anything other than tables, it would probably not have caused so much resistance to it.

Anyway, at the end of the day, do what you feel easy with.

Best wishes and thanks for your input.:thumbsup:

Frank

Arbitrator
Jan 18th, 2009, 11:07 AM
By using tables you mean using the CSS property:


div {
display:table;
}I think you mean CSS declaration by “CSS property”. display is property; table is a value; and display: table is a declaration.


There are css table attributes.I think you mean CSS table declarations by “css table attributes”.


"table" must not be known to IE6.CSS table declarations aren’t supported in any release version of Windows Internet Explorer (up to version 7); all table elements have block for their display value.

However, Microsoft is aiming to make the unreleased WIE8 the first major browser that fully supports CSS2.1 which, of course, means support for the CSS table display declarations.


These are Tables, aren't they?Those are CSS table declarations. Of course, you’re creating tables with them.


My main reason for starting this thread was to see if there was resistance to using tables now that they were to be in the CSS;If you weren’t aware, the CSS table declarations have been around since, at least, 1998 in the CSS2 spec.


purely because of the present antipathy; almost horror; at the idea of using tables for positioning.The main problem with using HTML table elements for the purposes of creating a layout is that it is incorrect according to the HTML spec. Elements have semantics (i.e., meanings) and using tables for layout almost always means not using them based upon their meaning. Using tables for layout is analogous to using the cite element simply to create italicized text.

The point is that I don’t think that tables themselves are anathema. Rather, misuse of them is.


The book that I mentioned originally is arguing the case for this change, saying that it is easier to use and easier to learn than CSS floating etc especially for those just coming into the profession.If you’re going to create Web pages professionally, you’re going to want to learn how to use floats anyway so this isn’t much of a case. If you’re talking about amateurs, I can see the point until major browser compatibility is factored in.

I think a better case is what the CSS table declarations can do that floats can’t: equal, variable height columns without background images; dynamic middle and bottom vertical alignment; etc.

On the other hand, they have several disadvantages when compared to use of float declarations: table cell positions are more closely tied to positions of elements in the source code; the effect of position: relative is undefined for table cells; tables can’t be used to make text flow under columns; etc.


I realise that not all browsers support it, but give it time and in the meantime get used to it and get ready for the final release of CSS3.CSS3 is a set of modules rather than a single specification. Several of the modules haven’t even had a first draft published yet—including the CSS3 Tables module—so I wouldn’t expect a “final release” any time soon.


I shall probably get a knighthood for this.Good luck. :)


Tables are just the welfare support of web design. If you have to use it, do so sparingly (and only at the right times) then learn to get yourself away from that crutch. Honestly I think that even including them in the standards seems counterproductive to the CSS "movement."As mentioned above, there are several things that tables can do that floats cannot (and vice versa) so I wouldn’t call it “counterproductive”.

It also makes sense to define how tables are rendered in terms of CSS so that browsers deal consistently with HTML tables and so that people can create tables in custom (e.g., XML) languages.

effpeetee
Jan 18th, 2009, 11:42 AM
Thank you Arbitrator and friends. But I was using the term 'Tables' in its broadest sense. Sometimes these things can almost become a religion and processes become sacred.
I was not suggesting that Tables replace Floats. But to add to the facilities available in css. Emotive arguments, I find, never help in a discussion, they just cloud the issue. However, I find the discussion interesting and informative so please keep coming.

Regards,

Frank

effpeetee
Jan 18th, 2009, 06:37 PM
Another one for good measure (http://exitfegs.co.uk/Document1.htm).

Frank

Rowsdower!
Jan 20th, 2009, 03:53 PM
Well, when I first started coding several years ago, I used html tables because I couldn't find any other way to do it.
Many people did just that (myself included to some degree) and I'm not saying that was wrong - no need to take this as a personal slight incase you have. I hope you haven't. I just don't think that this behavior should be encouraged or designed into the system (a system which gives us pretty much all of the tools - less some small particulars mentioned by Arbitrator - that we need in order to design without tables).


...
Being pedantic is OK to a degree, but don.t throw a good and useful technique out of the window until you have tried it.
...
I'm not sure if we're talking about <table> or display:table; here. I suspect it is the latter. I just have a feeling that display:table; will be abused (and yes, I believe that tables can still be abused even if they are in the CSS). While HTML semantics are irrelevant to a discussion of CSS display I think that CSS semantics should play a role as well. Just as people add display:block; to inline elements such as span (which is often an abuse that is used just because it's easier) I foresee people adding display:table; to things that really shouldn't use it. It's proper CSS in that it separates display from content, however it is still an abuse of what a table should logically be.


...
CSS tables is not the same thing as HTML tables.
...

Well in a way they are... Here is a blurb from W3Schools about display:table; (http://www.w3schools.com/css/pr_class_display.asp):


The element will be displayed as a block table (like <table>), with a line break before and after the table

Again, this looks an awful lot like something that should NOT be used for layout purposes. Take into account also that CSS display:table; is accompanied by these other display values:


display:table-row-group;
display:table-header-group;
display:table-footer-group;
display:table-row;
display:table-column-group;
display:table-column;
display:table-cell;
display:table-caption

I firmly believe we will see an increase in bloated coding (another reason we are trying to pry people away from <table> in the first place) just the same as we had before people started weening themselves off of tables. The only difference is trading this:
<table>
<tr>
<td></td>
</tr>
</table>

For this:
<div class="table1">
<div class="table_row">
<div class="table_detail"></div>
</div>
</div>

Conceivably this could make bloated table pages even fatter with extra markup once they do things "correctly" by separating content from style. Suddenly even people coding comfortbly with <div> tags instead of tables are using 7 <div>'s (http://exitfegs.co.uk/Document1.htm) where only 4-5 are really needed. We would be better off on the whole just leaving the table junkies with their usual basket of <table> goods. Maybe "welfare" was the wrong analogy. Perhaps I should have called this the methadone to the <table> heroine.


...
If they had called it anything other than tables, it would probably not have caused so much resistance to it.
...

I have to say that there is probably a great deal of truth to that when you first see the term. In light of the above, however, I hope you can see where some of my non-titular objections come from.


...
I think a better case is what the CSS table declarations can do that floats can’t: equal, variable height columns without background images; dynamic middle and bottom vertical alignment; etc.
...

I think a still-better solution would be to work on CSS options to link element sizes to the sizes of other independent elements (based on id or class?). I don't usually have to wrestle with vertical alignment, but for those of you who do, can't you generally use display:inline-block; and vertical-align:whatever;? Making moves like this can give you the little niceties that you are missing without resorting to backsliding into table coding at semantically inappropriate times.


...
It also makes sense to define how tables are rendered in terms of CSS so that browsers deal consistently with HTML tables and so that people can create tables in custom (e.g., XML) languages.
Admitedly, I don't know much at all about XML and maybe I'm not reading this correctly but - at least for HTML - don't we already have the tools needed to control how tables are rendered with every other bit of CSS we have available (padding, borders, margins, colors, font treatments, etc.)?

Anyway, if any of the above seems emotional I apologize. Nothing personal is meant by any of it and I am certainly not losing sleep over this topic ;). I'm mostly just pontificating here for the heck of it. You know what they say about opinions...

effpeetee
Jan 20th, 2009, 06:28 PM
Well in spite of all that has been said. I can find no valid argument for not using css tables if it does what one wants without intruding on the html readers. I think the discussion has been useful anyway.

Regards,

Frank

PS I wasn't taking it personally.
Thanks for your input.

jamesicus
Jan 20th, 2009, 07:24 PM
Just another point of view:

http://www.webaim.org/techniques/tables/

Edit: Not germain to the discussion -- my mistake -- please ignore (JFP)

JFP

effpeetee
Jan 20th, 2009, 08:43 PM
Just another point of view:

http://www.webaim.org/techniques/tables/

JFP
This is the header on my first post.

CSS Tables - any comments.

That article is about html tables.

Frank

jamesicus
Jan 20th, 2009, 08:57 PM
Sorry -- not thinking.

(Please see edit on my original post)

James