473,545 Members | 2,012 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Never use tables for layout.

16 New Member
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 1932
drhowarddrfine
7,435 Recognized Expert Expert
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 New Member
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><st yle>
table tr td { border:1px solid black; vertical-align:top; }
</style></head><body>
<table style="width:10 0%;"><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 Recognized Expert Expert
**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 Recognized Expert Expert
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:relati ve;
overflow:auto;
}

#left{
background-color:yellow;
width:10%;
position:absolu te;
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 New Member
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 Recognized Expert Expert
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 New Member
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 Recognized Expert Expert
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 New Member
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:absolu te 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

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

Similar topics

38
3167
by: Kirk | last post by:
Having spent hours on end sorting out layout issues caused by having different amount of cells in different rows, I've finally got a webpage looking as it should. However, when I add an image to a cell, it messes up a different cell. I have some of the cells set to definite sizes but that fails to keep them as they should look. Here's the...
44
3834
by: Mariusz Jedrzejewski | last post by:
Hi, I'll be very grateful if somebody can explain me why my Opera 7.23 (runing under linux) doesn't show me inner tables. Using below code I can see only "inner table 1". There is no problem with other browsers (I checked it under Konqueror). Thank you in advance for your help. Regards. /Mariusz <HTML>
47
9081
by: Neal | last post by:
Patrick Griffiths weighs in on the CSS vs table layout debate in his blog entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A quite good article.
20
24961
by: Tammy | last post by:
What would be a good alternative to using frames? I need something that will section my webpage into two halves and can change both frames on a single click. Thanks in Advance, Tammy
53
4165
by: Alan Silver | last post by:
Hello, I understand the issue that tables should be used for tabular data and not for layout, but I would like some clarification as to exactly what constitutes tabular data. For example, if I have a form, in which the user is required to fill in various bits of information, then laying out with a table makes it easy. A basic example...
1
1105
by: hpourfard | last post by:
Hi, After I designed my page (using several tables), while I was surfing the web I considered a professional looking web site which had been used DIV tags instead of tables, with many css classes. for sure designing in div layers is much more time consuming. so there should be a good reason for using table less layout. May be it affect...
32
2703
by: Simon Dean | last post by:
Duh... Not another one... Hopefully simple though, I hate the way *I* (and it might be a CSS trait) can't intermix fixed width divisional elements with a variable auto expanding div??? The great thing I loved with Tables, was being able to say:
2
1980
by: AR123 | last post by:
I want to convert my website tables layout to div tags as someone told me its easier to make changes etc etc I just need some help in getting started with this and what to put in the stylesheet. the code below is how it looks just now. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">...
7
13066
by: cmcdermo | last post by:
Hopefully this is an easy solution. I come from the old school tables layout. I am trying to accomplish a layout using divs that I can easily do in tables but having trouble with using divs. This is what I am trying to do (this is how i'd do it using tables). <table width="750" border="1">
10
2605
by: Shawn Northrop | last post by:
Hey everybody. I am trying to convert a website that was built using tables into one with using div tags. Not as easy as i thought. Heres the site http://www.jeanneflight.com/JF -- CSS layout http://www.jeanneflight.com/JF/tables -- table layout My problems relating to first link: 1 Internet explorer crashes 2 The background image for the...
0
7475
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7409
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7664
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
5981
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5341
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
4958
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3463
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3446
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
715
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

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.