Site Ratings & Reviews - Divs vs Tables?

Author

Divs vs Tables?

SqueakyWee

2005-04-09, 7:15 am

Hi all,

Further to a critique request I made a short while ago, I have a query about
tables vs divs. I was told to scrap my table coding and use divs instead,
but I find these very hard to get to grips with and much prefer coding with
tables. What exactly are the benefits of using divs, apart from 'ease of
use', and can I get away with using tables instead? Also, can someone point
me to a good div tutorial online?

Kat

Barbara de Zoete

2005-04-09, 7:15 am

On Sat, 9 Apr 2005 08:53:30 +0100, SqueakyWee
<usenet@CUT_ITsqueakywee.co.uk> wrote:

> Further to a critique request I made a short while ago, I have a query
> about
> tables vs divs. I was told to scrap my table coding and use divs instead,
> but I find these very hard to get to grips with and much prefer coding
> with
> tables.

That's okay. It takes time to grasp an entirely different approach, a
different concept. 'Using divs instead' is a bit too harsh. What you
really should try to do is write your documents with markup that actually
tells a browser of any kind what the elements are that you use. Structure
your documents logically and as semantically as possible. Normally you
would use a div (or a span for that matter) only if there is no more
appropriate element available.

> What exactly are the benefits of using divs, apart from 'ease of use',

Once you have thus marked up and structured your document, any browser and
thus any visitor can get your content. So it has nothing to do with 'ease
of use', but all with accessibility. Usability is an other chapter.
Also you will find that, once you have mastered the use of correct markup
and structure for your pages, it is much more easy to maintain the lot
than it is with tables layout, especially if done by hand in an editor of
some sort, and not using a CMS. Both content and layout are seperate
issues in a site, if properly set up, and can be addressed as such,
seperately. You may not think much of that now, but once you try it and
understand it, you don't want to go back to tables layout anymore.

> and can I get away with using tables instead?

Why would you want to 'get away with' something other than best? As I
said: it takes time to learn some new concept, give it time then. You
weren't born being able to code pages using tables, were you? It took time
to learn that too?
But, there is noone stopping you if that is what you mean. In some
countries though, accessibility is an issue that is regulated by law. Even
if this doesn't apply to you or your design situation, it might give you
something to think about.

> Also, can someone point me to a good div tutorial online?
>

Maybe you should google this newsgroup (and others) for the discussions
that have been numerous, and along the way you're bound to find some URL
pointing to interesting articles and tutorials.
<http://groups.google.com/groups?as_...ww.authoring%2A>

What you need is not a good div tutorial, but tutorials on proper markup
and on good use of cascading stylesheets.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

Andrew @ Rockface

2005-04-09, 7:15 am

Barbara de Zoete wrote:
> On Sat, 9 Apr 2005 08:53:30 +0100, SqueakyWee
> <usenet@CUT_ITsqueakywee.co.uk> wrote:
>
>
> That's okay. It takes time to grasp an entirely different approach, a
> different concept. 'Using divs instead' is a bit too harsh. What you
> really should try to do is write your documents with markup that
> actually tells a browser of any kind what the elements are that you
> use. Structure your documents logically and as semantically as
> possible. Normally you would use a div (or a span for that matter)
> only if there is no more appropriate element available.

Don't normally post, but I'm working on something at the moment that
actually forces me to use tables for layout and not rely on css! A Video on
Demand system for TV. Because of the static size of a TV viewport and the
shit way in which the STB browser interprets css I'm having to regress my
html ten years. Imagine a css interpreter that cannot handle margin and
padding on a fixed size viewport - not nice!

I'll go back to lurking now.

--
Andrew @ Rockface
www.rockface-records.co.uk

Barbara de Zoete

2005-04-09, 7:15 am

On Sat, 9 Apr 2005 09:37:10 +0000 (UTC), Andrew @ Rockface
<andrew@rockface-records.co.uk> wrote:

> Barbara de Zoete wrote:
>
> Don't normally post, but I'm working on something at the moment that
> actually forces me to use tables for layout and not rely on css! A Video
> on
> Demand system for TV. Because of the static size of a TV viewport and the
> shit way in which the STB browser interprets css I'm having to regress my
> html ten years.

There is allways the inevitable exception to the rule. This might (and
probably is) just be such an exception. It takes a learned view on markup
and design to recognize such an exception and to deal with it wisely. And
it takes quite some time to develop that learned view, may I argue.

> Imagine a css interpreter that cannot handle margin and
> padding on a fixed size viewport - not nice!
>

LOL

> I'll go back to lurking now.
>

Uh, that's a pitty. This one reply of yours makes me think you've got
quite something to contribute.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

Andrew @ Rockface

2005-04-09, 6:45 pm

Barbara de Zoete wrote:
> On Sat, 9 Apr 2005 09:37:10 +0000 (UTC), Andrew @ Rockface
> <andrew@rockface-records.co.uk> wrote:
>
>
> There is allways the inevitable exception to the rule. This might (and
> probably is) just be such an exception. It takes a learned view on
> markup and design to recognize such an exception and to deal with it
> wisely. And it takes quite some time to develop that learned view,
> may I argue.

It's pretty nasty. I've even resorted to using empty nested tables to add
margin to one side of an existing table...shiver! And as for fitting content
in such a small area! Still it's a learning experience and keeps me busy.

>
> LOL
>
>
> Uh, that's a pitty. This one reply of yours makes me think you've got
> quite something to contribute.

Thanks, that's a nice thing to say. I have posted a few times before, once
for a site crit on my rockface-records (php generated html using divs for
layout), which I know has it's faults, and yes I know grey is dull but
that's the colour scheme of the hardcore punk community :) Sort of in the
process of rewritting it during lulls at work.

--
Andrew @ Rockface
www.rockface-records.co.uk

Big Bill

2005-04-10, 6:45 pm

On Sat, 9 Apr 2005 10:51:11 +0000 (UTC), "Andrew @ Rockface"
<andrew@rockface-records.co.uk> wrote:

>Barbara de Zoete wrote:
>
>It's pretty nasty. I've even resorted to using empty nested tables to add
>margin to one side of an existing table...shiver! And as for fitting content
>in such a small area!

Could you not have used a spacer.gif styled to an appropriate size? Or
a series of them?

BB

--
www.kruse.co.uk/ seo@kruse.demon.co.uk
seo that loves a cuddle...
--

Andrew @ Rockface

2005-04-10, 6:45 pm

Big Bill wrote:
> On Sat, 9 Apr 2005 10:51:11 +0000 (UTC), "Andrew @ Rockface"
> <andrew@rockface-records.co.uk> wrote:
>
>
> Could you not have used a spacer.gif styled to an appropriate size? Or
> a series of them?

That's exactly what I mean - I'm having to regress. I haven't used spacing
gif in a very long time. I'll give it a whirl, though I have to keep an eye
on page size as the Set Top Boxes have limited memory, plus tv users expect
pretty much instanateous page changes/transitions.

Cheers for that.

--
Andrew @ Rockface
www.rockface-records.co.uk

SqueakyWee

2005-04-10, 6:45 pm

"Barbara de Zoete" <b_de_zoete@hotmail.com> wrote in message
news:opsoyhc7k4x5vgts@zoete_b...
> On Sat, 9 Apr 2005 08:53:30 +0100, SqueakyWee
> <usenet@CUT_ITsqueakywee.co.uk> wrote:
>
>
> That's okay. It takes time to grasp an entirely different approach, a
> different concept. 'Using divs instead' is a bit too harsh. What you
> really should try to do is write your documents with markup that actually
> tells a browser of any kind what the elements are that you use. Structure
> your documents logically and as semantically as possible. Normally you
> would use a div (or a span for that matter) only if there is no more
> appropriate element available.
>
>
> Once you have thus marked up and structured your document, any browser and
> thus any visitor can get your content. So it has nothing to do with 'ease
> of use', but all with accessibility. Usability is an other chapter.
> Also you will find that, once you have mastered the use of correct markup
> and structure for your pages, it is much more easy to maintain the lot
> than it is with tables layout, especially if done by hand in an editor of
> some sort, and not using a CMS. Both content and layout are seperate
> issues in a site, if properly set up, and can be addressed as such,
> seperately. You may not think much of that now, but once you try it and
> understand it, you don't want to go back to tables layout anymore.
>
>
> Why would you want to 'get away with' something other than best? As I
> said: it takes time to learn some new concept, give it time then. You
> weren't born being able to code pages using tables, were you? It took time
> to learn that too?
> But, there is noone stopping you if that is what you mean. In some
> countries though, accessibility is an issue that is regulated by law. Even
> if this doesn't apply to you or your design situation, it might give you
> something to think about.
>
>
> Maybe you should google this newsgroup (and others) for the discussions
> that have been numerous, and along the way you're bound to find some URL
> pointing to interesting articles and tutorials.
> <http://groups.google.com/groups?as_...ww.authoring%2A>
>
> What you need is not a good div tutorial, but tutorials on proper markup
> and on good use of cascading stylesheets.
>

Thanks, your reply was very helpful. I've made my first attempt at using
DIVs to design the site, and it can be seen here:
http://blackbooks.squeakywee.co.uk. I wonder if you could take a look at it
for me? Also, any ideas on the general layout/design on the site would be
good.

Kat

Big Bill

2005-04-11, 7:26 am

On Sun, 10 Apr 2005 19:22:41 +0000 (UTC), "Andrew @ Rockface"
<andrew@rockface-records.co.uk> wrote:

>Big Bill wrote:
>
>That's exactly what I mean - I'm having to regress. I haven't used spacing
>gif in a very long time. I'll give it a whirl, though I have to keep an eye
>on page size as the Set Top Boxes have limited memory, plus tv users expect
>pretty much instanateous page changes/transitions.
>
>Cheers for that.

I thought designing for tv and that was all behind us now. Bummer.

BB
--
www.kruse.co.uk/ seo@kruse.demon.co.uk
seo that loves a cuddle...
--

Andrew @ Rockface

2005-04-11, 7:26 am

In news:b2bk51tdn5i67jsgtqi9f3ht0atjqp14d5@4ax.com,
Big Bill <kruse@cityscape.co.uk> wrote:
> On Sun, 10 Apr 2005 19:22:41 +0000 (UTC), "Andrew @ Rockface"
> <andrew@rockface-records.co.uk> wrote:
>
>
> I thought designing for tv and that was all behind us now. Bummer.

what I'm doing is an interface/GUI for a Video on Demand system. It's all
pretty simple stuff. Each video has an XML file describing what it is
(category, title, certificate, review etc). My PHP then parses the XML and
builds a pages for the categories (inc next and previous buttons). You go
into a category and it'll show what film are available. You click on a film
and it'll show the film's details. The Step Top Boxes are capable of regular
web browsing but we'll probably turn that off. Only two PHP files and all
less than 300 lines of code, but I'm going to refine it this week to trim it
even more.

It's sort of fun, and at least I'll get to watch free films :)

--
Andrew @ Rockface
np: Punk 45 Radio - 700 Plus Vintage Punk Rock and New Wave records!!!
(RadioPower.org) www.rockface-records.co.uk

Barbara de Zoete

2005-04-20, 7:54 pm

On Sun, 10 Apr 2005 21:21:42 +0100, SqueakyWee
<usenet@CUT_ITsqueakywee.co.uk> wrote:

> "Barbara de Zoete" <b_de_zoete@hotmail.com> wrote in message
> news:opsoyhc7k4x5vgts@zoete_b...
>

<snipped some>
[color=darkred]
>
> Thanks, your reply was very helpful. I've made my first attempt at using
> DIVs to design the site, and it can be seen here:
> http://blackbooks.squeakywee.co.uk. I wonder if you could take a look at
> it
> for me? Also, any ideas on the general layout/design on the site would be
> good.
>

What is all this?

<p><br><p><br><p><br><p><br><p><br><p><br><p><br>
<p><br><p><br><p><br><p><br></div></body></html>

Surely that is _not_ correct markup. And it is ever so simple.
You start with the _strict_ doctype (as the transition period ended looong
time ago). Don't forget the URL of where the doctype is at, otherwise you
trigger quirksmode.
Structure the basic document and type in your content in the body element.
Then markup your content properly. That is:
- there is 1 <h1> (in your site that would be what now looks like <div
id="title"><img src="images/title.jpg"alt="BLACK BOOKS
ONLINE!"><br></div> );
- there could be several <h2>'s to structure the content furter;
- paragraphs are paragraphs and you put them between <p> and </p> (not
puting in an empty line with <brrrrr> );
- a list is a list; a menu is usually also a list of links;
- et cetera.

Your pages markup could then be something like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-UK">
<head>
<title>Black Books Online!</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<h1 id="title"><img src="images/title.jpg" alt="BLACK BOOKS
ONLINE!"></h1>

<p>Oi! Hairy! What you lookin' at??</p>

<p>Welcome to Black Books Online.</p>

<p>I'm not entirely sure what'll appear on here - I'm not very
good with introduction/welcome pages. Probably I'll stick the
site news here (got to make some first!), or maybe I'll try
to find some way of sticking some images on here without them
looking like they're sticking out like a sore thumb. Hmm, its
something to ponder over! If you have any ideas,
<a href="mailto:blackbooks@invalid">email them to me</a>.</p>

<ul id="menu">
<li>navbar item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>et cetera</li>
</ul>
</body>
</html>

Then finally, use css to style the lot. With css you can determine what
margins you want underneath your heading and between your paragraphs for
example, without resorting wrongly to using those <brrrr>s.

See what I mean with structural and where possible semantic markup?
There's not a div in that page and yet you will be able to style it all
the way to its current look (btw: your font size is too small for comfort;
keep the main text at a size of 100% - if you think it looks to large,
adjust your browser, don't force the smaller font on all visitors).

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

SqueakyWee

2005-04-20, 7:54 pm

"Barbara de Zoete" <b_de_zoete@hotmail.com> wrote in message
news:opso2y5evdx5vgts@zoete_b...
>
> What is all this?
>
> <p><br><p><br><p><br><p><br><p><br><p><br><p><br>
> <p><br><p><br><p><br><p><br></div></body></html>

Ooops yes, I meant to add a note about that. I just stuck it in there to
make sure the backgroudn repeated properly.

> Surely that is _not_ correct markup. And it is ever so simple.
> You start with the _strict_ doctype (as the transition period ended looong
> time ago). Don't forget the URL of where the doctype is at, otherwise you
> trigger quirksmode.
> Structure the basic document and type in your content in the body element.
> Then markup your content properly. That is:
> - there is 1 <h1> (in your site that would be what now looks like <div
> id="title"><img src="images/title.jpg"alt="BLACK BOOKS
> ONLINE!"><br></div> );
> - there could be several <h2>'s to structure the content furter;
> - paragraphs are paragraphs and you put them between <p> and </p> (not
> puting in an empty line with <brrrrr> );
> - a list is a list; a menu is usually also a list of links;
> - et cetera.
>
> Your pages markup could then be something like:
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
>
> <html lang="en-UK">
> <head>
> <title>Black Books Online!</title>
> <link rel="stylesheet" type="text/css" href="css/main.css">
> </head>
> <body>
> <h1 id="title"><img src="images/title.jpg" alt="BLACK BOOKS
> ONLINE!"></h1>
>
> <p>Oi! Hairy! What you lookin' at??</p>
>
> <p>Welcome to Black Books Online.</p>
>
> <p>I'm not entirely sure what'll appear on here - I'm not very
> good with introduction/welcome pages. Probably I'll stick the
> site news here (got to make some first!), or maybe I'll try
> to find some way of sticking some images on here without them
> looking like they're sticking out like a sore thumb. Hmm, its
> something to ponder over! If you have any ideas,
> <a href="mailto:blackbooks@invalid">email them to me</a>.</p>
>
> <ul id="menu">
> <li>navbar item 1</li>
> <li>item 2</li>
> <li>item 3</li>
> <li>et cetera</li>
> </ul>
> </body>
> </html>
>
> Then finally, use css to style the lot. With css you can determine what
> margins you want underneath your heading and between your paragraphs for
> example, without resorting wrongly to using those <brrrr>s.
>
> See what I mean with structural and where possible semantic markup?
> There's not a div in that page and yet you will be able to style it all
> the way to its current look (btw: your font size is too small for comfort;
> keep the main text at a size of 100% - if you think it looks to large,
> adjust your browser, don't force the smaller font on all visitors).
>

Thank you, I think I'm beginning to understand a little better. I'll try
again :)

Kat

> --
> ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
> | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
> | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
> |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
> `-------------------------------------------------- --<--@ ------------'

jake

2005-04-20, 7:54 pm

In message <opso2y5evdx5vgts@zoete_b>, Barbara de Zoete

[snip]

>
>Your pages markup could then be something like:
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
>
> <html lang="en-UK">

en-UK? Presumably a dialect of English spoken by Ukrainians ;-)

[snip]

--
Jake

jake

2005-04-20, 7:54 pm

SqueakyWee

2005-04-20, 7:54 pm

Paul Burke

2005-04-20, 7:54 pm

On Sun, 10 Apr 2005 21:21:42 +0100, "SqueakyWee"
<usenet@CUT_ITsqueakywee.co.uk> wrote:

>"Barbara de Zoete" <b_de_zoete@hotmail.com> wrote in message
>news:opsoyhc7k4x5vgts@zoete_b...
<snip>
[color=darkred]
>Thanks, your reply was very helpful. I've made my first attempt at using
>DIVs to design the site, and it can be seen here:
>http://blackbooks.squeakywee.co.uk. I wonder if you could take a look at it
>for me? Also, any ideas on the general layout/design on the site would be
>good.

>Kat

Hi ya
I just looked at http://blackbooks.squeakywee.co.uk this morning
(19th) and the site does not look good at all in Firefox.

You can see a screen grab here:
http://www.firstpeople.us/FP-Html-Forums/19th.jpg

HTH
plh
Paul

----== Posted via codecomments.com - Unlimited-Uncensored-Secure Usenet News==----
http://www.codecomments.com The #1 Newsgroup Service in the World! 120,000+ Newsgroups
----= East and West-Coast Server Farms - Total Privacy via Encryption =----