473,656 Members | 2,983 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

<TABLE> vs. <DIV> when and where

Hi Folks,

There seems to be something about not using tables for layout, but use divs
instead. I'm not sure if I've got this right. If the output looks like what
you want, then it shouldn't matter what tags you use I would have thought,
or am I missing something?

tia,
Davo
Mar 10 '07 #1
13 27501
Davo wrote:
There seems to be something about not using tables for layout, but use divs
instead.
No, use the most appropriate markup to describe your content, then use
CSS for presentation.
If the output looks like what you want, then it shouldn't matter what tags you use I would have thought,
or am I missing something?
Text browsers. Aural browsers. Small screen devices (like mobile phone
browsers). Search engine indexing robots. etc. etc.

--
David Dorward
<http://dorward.me.uk/>
Mar 10 '07 #2
Gazing into my crystal ball I observed "Davo" <wa******@hotma il.com>
writing in
news:45******** **************@ per-qv1-newsreader-01.iinet.net.au :
Hi Folks,

There seems to be something about not using tables for layout, but use
divs instead. I'm not sure if I've got this right. If the output looks
like what you want, then it shouldn't matter what tags you use I would
have thought, or am I missing something?

tia,
Davo

There are several advantages, both for the user and the author. By
removing presenational markup and using an external stylesheet, what
used to take hours and days, takes a few seconds.

Of course, you want to avoid div-itis. Do not abuse them, and nest them
umpteen levels deep. Use the correct markup for the job, if it's a
paragraph use <p>, if it's a list use list markup, if it's tabular data
use a table. You will find that by using semantic markup, you can avoid
div-itis.

Remember that the least amount of markup makes the lightest page. Your
page should be light as a feather and full of content. Makes download
for the user much faster, indexing for the search engines much easier,
parsing for browsers easier as well.

HTH
--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

Mar 10 '07 #3
"Davo" posted...
: There seems to be something about not using tables for layout,
: but use divs instead. I'm not sure if I've got this right. If the
: output looks like what you want, then it shouldn't matter what
: tags you use I would have thought, or am I missing something?

You're missing all the heartache and suffering! :-)

Tables end up easier to implement and understand and appreciate.
Stick with tables when appropriate!

--
Jim Carlock
Post replies to the group.
Mar 10 '07 #4
Davo wrote:
Hi Folks,

There seems to be something about not using tables for layout, but use divs
instead. I'm not sure if I've got this right. If the output looks like what
you want, then it shouldn't matter what tags you use I would have thought,
or am I missing something?

tia,
Davo

The largest problem occurs, not with a single table for creating
presentation, but when nested tables are required.

Too often with this usage, the depth of nesting becomes greater than
some browsers can handle. If tables are reserved for only tabular
presentations, you can then see how nesting rarely makes sense and why
some browsers have thus not been designed to handle deep nesting.

Also, for special browsers that make the Web accessible to the
handicapped (e.g., audio browsers for the blind), nested tables are
difficult to render in a sensible manner.

--
David E. Ross
<http://www.rossde.com/>

Natural foods can be harmful: Look at all the
people who die of natural causes.
Mar 10 '07 #5
On Sat, 10 Mar 2007 19:47:02 +1000, "Davo" <wa******@hotma il.comwrote:
>Hi Folks,

There seems to be something about not using tables for layout, but use divs
instead. I'm not sure if I've got this right.
It isn't. Not the DIV part, that is. Don't use tables for layout, true
and good advice. Use DIVS instead, untrue and very bad advice.

In fact the idea is not to use html for layout, in fact not for
presentation at all.
>If the output looks like what
you want, then it shouldn't matter what tags you use I would have thought,
or am I missing something?
Yes, you are missing the biggest thing of all - the old computer concept
of "separation of concerns". Use semantic, valid html to mark up the
content according to it's meaning, ignoring presentation completely.
Then use CSS to define the presentation, including the layout. This may
require the addition of grouping elements like DIV or SPAN to provide
the hooks for CSS rules, but not very many nor very often.

See: http://pages.prodigy.net/chris_beall/TC/

Modern web pages separate concerns: html markup for the concern of
coding the meaning of the content, and CSS for the separate concern of
changing the presentation of the content.

Mar 10 '07 #6
Davo wrote :
Hi Folks,

There seems to be something about not using tables for layout, but use divs
instead. I'm not sure if I've got this right. If the output looks like what
you want

Looks? HTML 4 was never designed to be medium-dependent or
device-dependent or browser-dependent. HTML was designed to be
independent of devices used and independent of medium used. The
proper/best suited markup is ultimately what matters.

Use <tablefor presenting tabular data; don't use table for creating
page sections, page divisions, menus, page header, page footer, etc...

, then it shouldn't matter what tags you use I would have thought,
or am I missing something?

tia,
Davo
If the same output can be achieved with a better semantic markup code
and with a smaller filesize which can also better interoperate without
detrimental accessibility problems, then why would you want to use a
worst semantic markup code that uses bloated code which can not
interoperate well and which creates accessibility problems?

Table-based webpage design versus CSS-based webpage design: resources,
explanations and tutorials
http://www.gtalbot.org/NvuSection/Nv...CSSDesign.html

Throwing Tables Out the Window.
http://www.stopdesign.com/articles/throwing_tables/
A very bold and amazing article. The author takes the microsoft.com
webpage, then removes all of the tables and implements CSS design and
reduces the original file size of 62%!
"If multiplied out by an average of 38.7 million page views per day,
that 25 KB savings per page could add up to about 924 GB in bandwidth
savings per day, or 329 terabytes per year."

If bandwidth costs for Giga-bytes and tera-bytes represent thousands and
thousands of dollars, why would you want to waste such money?

Tableless layout with Dreamweaver.
http://www.adobe.com/devnet/dreamwea...ss_layout.html
DreamWeaver has a 6 parts tutorial on how to use CSS template instead of
table design:
"tables do a pretty lousy job of page construction. Among their
shortcomings is the implied bias of the code towards presentation rather
than structure, the necessity to nest tables in order to achieve the
most basic of layouts, and enough redundant bandwidth-hogging tags to
feed a large family of tag eating monsters for literally a month."

Why should I use CSS layout instead of tables? (alt.html FAQ).
http://www.html-faq.com/csspositioning/?csslayout
Resource from the newsgroup discussion alt.html FAQ

Why tables for layout is stupid. Problems defined, solutions offered.
http://www.hotdesign.com/seybold/
Most possibly the best resource on this issue covering all aspects: it
was a seminar presentation, part of a conference in 2003. Translated in
12 other languages.

Gérard
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs...your_Web_Pages
Mar 11 '07 #7
On Sat, 10 Mar 2007 10:37:22 -0800, "David E. Ross" <no****@nowhere .not>
wrote:
>Davo wrote:
>Hi Folks,

There seems to be something about not using tables for layout, but use divs
instead. I'm not sure if I've got this right. If the output looks like what
you want, then it shouldn't matter what tags you use I would have thought,
or am I missing something?

The largest problem occurs, not with a single table for creating
presentation , but when nested tables are required.
And even more so when there are several ROWSPANs and COLSPANs involved.
>Too often with this usage, the depth of nesting becomes greater than
some browsers can handle.
An even greater risk is that when you want to change to a different
authoring tool (nested tables are hardly ever marked up by hand) other
authoring tools can't handle the particular layout involved. You then
face a nightmare of a conversion.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Mar 11 '07 #8
Thanks to all for the replies, I think I understand the problem a little
better.

The concern I have with using CSS in place of tables is that older browsers
won't display properly, I know this is less of a problem with each passing
day, but still may be a point of contention with my management.

One way of doing this I've seen mentioned is using Java script redirection
and using two different versions of the page. However there are a few
problems with this

- latency? not sure if this is an issue
- cost of course
- and the biggie, what if they have javascript turned off?

Do any of you knowledgable people know of a best way to do this? The
solution has to be client side, as the back end will only be static pages.

tia,
Davo
Mar 11 '07 #9
On Sun, 11 Mar 2007 21:27:53 +1000, "Davo" <wa******@hotma il.comwrote:
>The concern I have with using CSS in place of tables is that older browsers
won't display properly,
Rubbish, and has been so for some years

Mar 11 '07 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
3493
by: Xah Lee | last post by:
with strict HTML spec, can one have <p> tags inside table's <td> tag? also, in strict XHTML, can one have <p> tages inside <div>? Thanks. Xah xah@xahlee.org ∑ http://xahlee.org/
61
24463
by: Toby Austin | last post by:
I'm trying to replace <table>s with <div>s as much as possible. However, I can't figure out how to do the following… <table> <tr> <td valign="top" width="100%">some data that will 'stretch'</td> <td valign="top" width="300">some data that won't 'stetch'</td> </tr> </table>
1
3902
by: Alan Hoyle | last post by:
I was using a <table border> to generate borders around some info/images, and decided to follow the w3c guidelines and convert it to CSS boxes with borders since it wasn't really tabular data. It used to be something like this: <table> <tr> <td><img>caption</td> <td><img>caption</td>
8
5140
by: slim | last post by:
hi again all, i am still working on the website as mentioned in earlier threads and have hit another snag... http://awash.demon.co.uk/index.php http://awash.demon.co.uk/vd.css the php is pulling a name and placing it under the thumbnail (the text is
2
7571
by: listaction | last post by:
Hi Folks, can you help me by explaining how the code below can be translated using <div> and achieve the same effect? Thanks, LA <html> <body> <table bgcolor="#000000" width="100%" cellspacing="1">
4
1859
by: Alan Silver | last post by:
Hello, I would like to know if it is possible to use a panel, but prevent it from adding a <div> tag to the HTML. The reason I want to do this is that I am using a panel to enable me to show/hide part of a page as required. I would like the part in the panel to appear on the same line as the controls that precede it, but when the panel is converted to HTML, a <div> tag is used, and that forces a new line in the browser. Any ideas? TIA
1
2451
by: James Coleman | last post by:
I am using the TreeView control in ASP.NET 2.0 and like it. However, our sitebuilders aren't too pleased with the idea of the table that gets rendered. They are big into avoiding <table> tags when it comes to site build. So is there a way I could have the following html be rendered from the treeview control? <div class="rightNavHighlight"><a href="#">Ergonomics</a></div> <div class="rightNavHighlight"><a href="#">Environmental
4
5279
by: harryusa | last post by:
I am trying to center 2 images concentrically which are z-indexed to lay on top of each other making an image with a border from another image that has a transparent center. I need the images to be horizonally and vertically centered within a <TD> </TD> area. No matter what I do the two image just present one above the other, albeit centered, NOT on top of each other. I originally did the entire page layout in TABLES until I found out I.E. 7...
0
8296
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 synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
8816
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. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
8497
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
1
6162
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 instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5627
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 into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4299
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2721
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
1928
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
2
1598
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 effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.