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).
13  1927 
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.
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>
**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.
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]
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?
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
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/
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.
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 :)
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.
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.
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.
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.
Sign in to post your reply or Sign up for a free account.
Similar topics
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...
|
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...
|
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.
|
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
|
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...
|
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...
|
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...
|
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...
|
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.
...
|
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...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
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,...
|
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...
| |
