471,605 Members | 1,651 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,605 software developers and data experts.

Never use tables for layout.

16
Never use tables for layout.
I was primarily referring to those that don't want tables even for tabular data, but since you bring it up.

http://xhtml.com/en/xhtml/reference/...-best-practice

Although using layout tables is discouraged, they sometimes must be used when no equivalent CSS construct is available (or is not supported by popular Web browsers).
Nov 5 '07 #1
13 1729
drhowarddrfine
7,435 Expert 4TB
they sometimes must be used when no equivalent CSS construct is available (or is not supported by popular Web browsers).
I defy anyone to name such an instance.

Never use
tables for layout.
Nov 6 '07 #2
hafthor
16
I defy anyone to name such an instance.
I assume you accept that tables are okay for tabular data.

Okay, well, what about a page that has a variable list of commands on top a container and another variable list of commands to the left of a container. You want the width and height of the containers to fit the content rather than fixed height/width so "large fonts" and other stuff will work right. The key point is that you want a container on each axis to adjust size with the content container's size.

<html><head><style>
table tr td { border:1px solid black; vertical-align:top; }
</style></head><body>
<table style="width:100%;"><tr><td /><td>[command1] [command2] [command3] [command4] [command5] [command6] [command7]</td></tr>
<tr><td><ul><li>sub1</li><li>sub2</li><li>sub3</li><li>sub4</li></ul></td><td>This is where content goes. Put lots of content here.</td></tr></table>
</body></html>
Nov 6 '07 #3
drhowarddrfine
7,435 Expert 4TB
**sigh**

Is that the best you can do? :) I've gone through these challenges before. If I have time, I'll do it later tonight. Otherwise, sometime tomorrow.
Nov 7 '07 #4
drhowarddrfine
7,435 Expert 4TB
I don't have time today to mess with this. I slapped this together in a few minutes but it's not perfect. Can be cleaned up easily though.
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title></title>

<style type="text/css">
#wrapper{
position:relative;
overflow:auto;
}

#left{
background-color:yellow;
width:10%;
position:absolute;
top:0;
bottom:0;
}
#right{
background-color:blue;
width:80%;
float:right;

}
</style>
<body>
<p>[command1] [command2] [command3] [command4] [command5] [command6] [command7]</p>
<div id="wrapper">
<ul id="left">
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
<li>sub4</li>
</ul>
<div id="right">Add content hereLorem ipsum ex pro dolorem splendide, ius id melius inimicus senserit, at epicurei indoctum complectitur mel. Eam omnes denique complectitur ut, at vide appareat torquatos sit. Enim zzril vim ex. Melius eruditi similique ne vel, iisque sensibus no his, aliquyam gloriatur eu sit. Nec eu quaeque consequat constituto, te sea puto prima moderatius. Id pri explicari constituto, persius consequuntur ad eam.

Tollit praesent mei at, viris perfecto eos ex, qui in affert prompta. Te vim quem probo, ei perpetua interesset mei. Nec cibo definiebas eu. Saepe adipiscing ne sit.

Eu facete recteque electram vis. Ex vivendum dissentiet cum, at sonet dolores temporibus qui. Ea legere quaeque fabulas pro, puto euismod volutpat at vim. Te denique deserunt usu, et enim dissentiet eum, minim conclusionemque usu et. Graeco delectus ei mea, cu putant officiis nec.

Nec in tollit recusabo antiopam, ne vel offendit expetendis, odio tale at sit. Usu te primis salutatus persecuti. Ius zzril habemus ut, eu quo vero lucilius dissentias. Tale mentitum evertitur ex sed. Ancillae luptatum dignissim ex sea. In ius semper ornatus eleifend.

Add content hereLorem ipsum ex pro dolorem splendide, ius id melius inimicus senserit, at epicurei indoctum complectitur mel. Eam omnes denique complectitur ut, at vide appareat torquatos sit. Enim zzril vim ex. Melius eruditi similique ne vel, iisque sensibus no his, aliquyam gloriatur eu sit. Nec eu quaeque consequat constituto, te sea puto prima moderatius. Id pri explicari constituto, persius consequuntur ad eam.

Tollit praesent mei at, viris perfecto eos ex, qui in affert prompta. Te vim quem probo, ei perpetua interesset mei. Nec cibo definiebas eu. Saepe adipiscing ne sit.

Eu facete recteque electram vis. Ex vivendum dissentiet cum, at sonet dolores temporibus qui. Ea legere quaeque fabulas pro, puto euismod volutpat at vim. Te denique deserunt usu, et enim dissentiet eum, minim conclusionemque usu et. Graeco delectus ei mea, cu putant officiis nec.

Nec in tollit recusabo antiopam, ne vel offendit expetendis, odio tale at sit. Usu te primis salutatus persecuti. Ius zzril habemus ut, eu quo vero lucilius dissentias. Tale mentitum evertitur ex sed. Ancillae luptatum dignissim ex sea. In ius semper ornatus eleifend.
</div>
</div>
</body>
</html>[/HTML]
Nov 7 '07 #5
hafthor
16
I don't have time today to mess with this. I slapped this together in a few minutes but it's not perfect. Can be cleaned up easily though.
That wasn't quite what I had in mind. The main thing was that the top bar should be only over the blue box -- even if the yellow box gets wider for whatever reason. Also, the bottom of the yellow box should match the bottom of the blue, but that's easy.

I certainly had not intended to have you spend a bunch of time on this. If you can point me to a resource that you consider definitive on how to live a clean layout table-free existence; that'll work.

I am aware of some of the accessibility bummers that come from tables being used for layout, but was there some other reason they should be considered evil?
Nov 7 '07 #6
drhowarddrfine
7,435 Expert 4TB
Making the top be over the blue box is easy, also. This whole thing, though, is trying to think like a table and that's where people get into trouble.

Tables were never intended for layout but solved a problem as outlined by the link above about "I ruined the web" by the guy who came up with the idea.

I can't think of just one or two sites to point you to that advocate tableless layout because I don't know of any sites that don't. It's just second nature to me, especially because I have never created a site that uses tables for layout and I have never found a need to; including my first site I made in 2003, I think. (I haven't been doing this very long. Never interested me until my wife wanted one for her business.)

Google for David Shea, Eric Meyer, Autistic Cuckoo (my friend Tommy Olsen), Man in Blue, Molly Holschlaeg (sp), Hixie, Mark Boulton, Jeffrey Zeldman and on and on. These are the webs top designers and you won't find a table among 'em. Another site you should visit regularly is "A List Apart".com
Nov 7 '07 #7
hafthor
16
Making the top be over the blue box is easy, also. This whole thing, though, is trying to think like a table and that's where people get into trouble.

Tables were never intended for layout but solved a problem as outlined by the link above about "I ruined the web" by the guy who came up with the idea.

I can't think of just one or two sites to point you to that advocate tableless layout because I don't know of any sites that don't. It's just second nature to me, especially because I have never created a site that uses tables for layout and I have never found a need to; including my first site I made in 2003, I think. (I haven't been doing this very long. Never interested me until my wife wanted one for her business.)

Google for David Shea, Eric Meyer, Autistic Cuckoo (my friend Tommy Olsen), Man in Blue, Molly Holschlaeg (sp), Hixie, Mark Boulton, Jeffrey Zeldman and on and on. These are the webs top designers and you won't find a table among 'em. Another site you should visit regularly is "A List Apart".com
Eric Meyer seems to acknowledge here that some layouts call for tables.
http://meyerweb.com/eric/thoughts/20...-faux-columns/
http://meyerweb.com/eric/thoughts/2004/09/05/css-grids/
http://meyerweb.com/eric/thoughts/20.../to-be-tabled/
Nov 7 '07 #8
drhowarddrfine
7,435 Expert 4TB
Eric Meyer also said on the last link:
From this point on, anyone who uses these posts to claim that Iím saying tables should always be used for layout is either not paying any attention, has an agenda to promote, or both. Probably both.
But all those are from 2004, including this one:
If you can avoid using tables for layout, then by all means do
but I didn't try and find anything else he said.

I doubt MSN.com disagrees since its front page and newer pages do not use tables for layout. Khoi Vinh, the new web designer trying to fix/update the New York Times, doesn't either.

Tables are difficult to follow and read. Today we had two postings which I couldn't make head or tails out of.

I could go on and on but this is pointless. Tables are for content, not presentation. CSS is for presentation, not content. That's what it's for. Using tables is old school for when CSS wasn't available and didn't work at all.
Nov 7 '07 #9
hafthor
16
Eric Meyer also said on the last link...
I'm sure your not suggesting that I implied EM was encouraging layout table use and that you only pointed that out to avoid confusing someone else reading this thread.

http://www.hotdesign.com/seybold/23snags.html

BTW: CNN.com, mentioned and excused by EM, still uses layout tables, although in its current version, I don't think it needs to.

Tables are for content, not presentation.
I view it differently. Tables are containers for containers that need to maintain a vertical and horizontal sizing relationship with each other. Div/spans are containers for when that is not the case.

CSS is for presentation, not content.
Agreed. The choice wasn't between css and tables as though they were mutually exclusive. The choice was between tables vs. other containers like divs, spans, paragraphs, whatever.

Table markup is ugly; but it is so because it needs to express a more complex relationship. But I would argue that pages with float:right and position:absolute divs are difficult to follow as well.

I think we can agree to disagree and move on to something more interesting, but I still would like to see my example rendered table-less, and without magic and illusions :)
Nov 7 '07 #10
drhowarddrfine
7,435 Expert 4TB
Tables are containers for containers that need to maintain a vertical and horizontal sizing relationship with each other. Div/spans are containers for when that is not the case.
No. Tables are containers for data alone, not other containers. Divs are specifically created to contain elements. Spans are a form of styling element.

From the W3C Introduction to Tables:
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
On div and span:
The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content.
Mine is not an opinion or something to disagree on but printed fact.
Nov 7 '07 #11
hafthor
16
No. Tables are containers for data alone, not other containers.
When I say containers for other containers, read containers <table> for other containers <tr>,<td>. I realize you'll disagree with that as well, but let's be clear on what I'm wrong about :)

Anyway the W3C states in the first line from the link:
The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells.
Nov 7 '07 #12
drhowarddrfine
7,435 Expert 4TB
I thought you would pick up on that. Those items can represent data but data it is. A very simple example would be a stock price with an image of an arrow pointing whether the price went up or down. Price on the left, arrow on the right, maybe the arrow is clickable to a graph elsewhere, but it's a table of data nonetheless.
Nov 7 '07 #13
hafthor
16
I thought you would pick up on that. Those items can represent data but data it is. A very simple example would be a stock price with an image of an arrow pointing whether the price went up or down. Price on the left, arrow on the right, maybe the arrow is clickable to a graph elsewhere, but it's a table of data nonetheless.
So, data (table), as opposed to content (div).

To me the real evil of tables is the fact that cells are related to other cells (in the same column) in a manner that is so not cool in xml land. That is, by ordinal position only.
Nov 7 '07 #14

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

38 posts views Thread by Kirk | last post: by
44 posts views Thread by Mariusz Jedrzejewski | last post: by
47 posts views Thread by Neal | last post: by
20 posts views Thread by Tammy | last post: by
1 post views Thread by hpourfard | last post: by
32 posts views Thread by Simon Dean | last post: by
7 posts views Thread by cmcdermo | last post: by
1 post views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by MichaelMortimer | last post: by
reply views Thread by CCCYYYY | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.