Making a table with divs

[Paul B]

I understand that using tables is not the 'correct' way to create a
webpage layout, so I wondered what the general consensus is on using
div tags to 'simulate' a table:
http://seventynine.net/testing/test01.html

It is a very very basic example but I'm sure anyone who has made a
layout with a table can see the point behind it.

 

[rtconner]

Uhm.. It doesn't work in IE.

And if you ask me, a table does the job just fine, so why would you try
to imitate a table when you can just use the actaul thing. And DIV have
many uses, but this, IMO is not one of them.

 

[Barbara de Zoete]

I understand that using tables is not the 'correct' way to create a
webpage layout, so I wondered what the general consensus is on using
div tags to 'simulate' a table:
http://seventynine.net/testing/test01.html

If you really are serious about leaving tables as a method you use for
page layout, you should also let go of the 'concept of a table' that is in
your mind. This page is a lovely example of how the tables are something
that is very stuck in your head at the moment.

Create your content. Mark it up properly. That is a heading is a heading,
a paragraph is a paragraph, a table *is* a table. Et cetera. See what you
can do with all the elements you have in your page once it is marked up
properly. You possibly need one or two more handles (to seperate the main
content from, say, teh navigation meny), but you'll be amazed what you can
achieve with all there already is in your page.

It is a very very basic example but I'm sure anyone who has made a
layout with a table can see the point behind it.

There is no point actually. All those divs. Forget tables and start doing
things properly.

 

[Paul B]

Uhm.. It doesn't work in IE.

And if you ask me, a table does the job just fine, so why would you
try to imitate a table when you can just use the actaul thing. And
DIV have many uses, but this, IMO is not one of them.

Ahh, I've not got IE. The table does do it fine but most people seem to
think the layout of a page shouldn't be done with a table so I was
thinking of a way to not use one... I think I'll just go back to
inventing square wheels for my car.

 

[Good Man]

I understand that using tables is not the 'correct' way to create a
webpage layout, so I wondered what the general consensus is on using
div tags to 'simulate' a table:
http://seventynine.net/testing/test01.html

It is a very very basic example but I'm sure anyone who has made a
layout with a table can see the point behind it.

You are correct in stating that using tables for webpage layout is not
preferred. However, tables are still the preferred choice in displaying
tabular data (ie: charts, etc)

I see what you're doing in your example, but I don't know how really
useful it is. Your code does indeed simulate a table using CSS.
However, a great deal of the 'exercise' in moving away from table-based
layout is moving away from the table-based *concept*, not just the table
tags themselves.

For example, if I only wanted content to appear in your 'cell' called
"Bottom right", there is no way I should be required to contemplate
anything else - i would use one div only, and use CSS to specify how I
want content presented/laid out.

Good exercise in scripting/simulating a table, but sort of missing the
concept of CSS itself in my humble opinion....

 

[Good Man]

Uhm.. It doesn't work in IE.

And if you ask me, a table does the job just fine, so why would you try
to imitate a table when you can just use the actaul thing. And DIV have
many uses, but this, IMO is not one of them.

hi, time to be bitchy...

what is your post referring to? you should quote posts that you are
replying to. it makes it much easier to understand and follow the thread.

 

[rtconner]

hi, time to be bitchy...

what is your post referring to? you should quote posts that you are
replying to. it makes it much easier to understand and follow the thread.

sorry then. I don't post much and am not fully acquanted with proper
practice and proceedure. that was just a response to the original post.
show below.

 

[Jonathan N. Little]

I understand that using tables is not the 'correct' way to create a
webpage layout, so I wondered what the general consensus is on using
div tags to 'simulate' a table:
http://seventynine.net/testing/test01.html

It is a very very basic example but I'm sure anyone who has made a
layout with a table can see the point behind it.

I am absolutely amazed how often this topic appears when it is so often
very well answered as in this thread. It does not seem to be to
difficult a concept to wrap ones mind around but yet the misconceptions
that *all* tables are bad persists!

<soapbox>
Okay maybe folks cannot recognized what the difference between tabular
data and layout framework is, so here it goes...

Tables are for tabular data, information that when organized in rows and
columns, where by such physical organization, has some purpose in
interpreting the data.

WORK OUTPUT
===========
CHIEFS
| 1 | 5 | 10 |
--+----+----+----+
10|100 | 15 | 5 |
--+----+----+----+
INDIANS 5| 85 | 25 | 3 |
--+----+----+----+
1| 65 | 50 | 0 |
--+----+----+----+

However if you are using a table to place a bit of data in a specific
location in the viewport, that is presentation! In this situation ask
yourself why do you want that bit of text there and I bet your answer
will be: "Cuz it looks good"! That *is* presentation!

Do *not* use a table to "hang" bits of your webpage's content in
specific places within the viewport. Use CSS. The real advantage of CSS
over tables becomes very clear when your decide later on that your do
not like your navbar on the upper left corner of your webpage but wish
it on the upper right, (Oh yes! Navbars are *NOT* tabular data, unless
the pages relate to say dates on a calender and the links are
understandably place in a table that resembles a page of a calender).

If you use a table you must edit your html (possible many many times
depending on how many pages are effected on your site) whereas if done
properly may only require one single change to a stylesheet to make the
change to your entire site!

Again to be clear: if you're using a table to place to bits here and
there on the page "'cuz it looks good"--STOP! If you are doing it to
arrange info in rows and columns because is has a "this vs. that"
relationship then by all means!
</soapbox>

 

[dorayme]

hi, time to be bitchy...

what is your post referring to? you should quote posts that you are
replying to. it makes it much easier to understand and follow the thread.

That is bitchy? You gentle lamb you...

 

[Neredbojias]

Uhm.. It doesn't work in IE.

What does?

And if you ask me, a table does the job just fine, so why would you try
to imitate a table when you can just use the actaul thing. And DIV have
many uses, but this, IMO is not one of them.

Agreed.

 

[Wings]

hi, time to be bitchy...

what is your post referring to? you should quote posts that you are
replying to. it makes it much easier to understand and follow the thread.

Maybe, but isn't that what the message heirarchy structure is designed to
show? No problems here in following this. (Just being bitchy).

 

[Jonathan N. Little]

"Good Man" <[email protected]> wrote in message

Maybe, but isn't that what the message heirarchy structure is designed to
show? No problems here in following this. (Just being bitchy).

If you are using a newsreader and not Google, the previous messages are
not shown together in one column of text, you must traverse the thread
tree which on some threads can get quite complicated and dendritic. It
also aids in the conversions with quoting to highlight exactly what you
are responding to, as I have done here!

 

[rtconner]

Thats great and all. But not how do you do this practically? IE and
Mozilla fight over so many CSS options that displaying anything the
same in both of them is a pain. I'm trying to set up a simple layout of
putting a few divs/spans next to each other and have been working on it
for hours (about to be days) and have not found a crossbrowser
solution.

 

[Jonathan N. Little]

Thats great and all. But not how do you do this practically? IE and
Mozilla fight over so many CSS options that displaying anything the
same in both of them is a pain.

Mozilla does not fight anything Mozilla et al., follow the rules. MS
does not.

I'm trying to set up a simple layout of
putting a few divs/spans next to each other and have been working on it
for hours (about to be days) and have not found a crossbrowser
solution.

Maybe your are approaching it the wrong way. Some folks try to micro
place every bit right form the start. My advice is like writing a in
general, just write an put is proper structure, paragraphs, headings,
divisions, your content. Then after style it. You would no worry about
cover art, fonts, paper choices and all *before* you started to write
the "Great American Novel". You would first focus on your manuscript right?

Anyway it can be done. My site is very anesthetic--styling is very
important to the nature of my site. It is more stylistically controlled
then many sites need to be and does not use tables for layout and I have
IE cooperating with only one tiny bit accommodation, JavaScript to
assist for IE lack of support for :hover pseudo-class on LI elements.
(There is a .htc file hack I am working on that can rid the JavaScript
reliance)

 

[Andy Dingley]

I understand that using tables is not the 'correct' way to create a
webpage layout, so I wondered what the general consensus is on using
div tags to 'simulate' a table:
http://seventynine.net/testing/test01.html

The way you've done it ? Terrible.

You've used the CSS table behaviours applied directly to <div>s. This
not only acts like a table, it _is_ a table. There's no case where this
would be relevant to use CSS-wise where a HTML <table> wouldn't be just
as appropriate. Equally if it's not justofed to use a<table>, then this
approach is no better.

The CSS table behaviours were intended for styling HTML tables, or for
rendering XML directly with CSS. They certainly weren't intended for use
on other HTML elements.

 

[frederick]

sorry then. I don't post much and am not fully acquanted with proper
practice and proceedure.

Since you seem to be using Google Groups, you might not be aware that
if you click on "Reply" at the foot of a post, then it won't quote any
of that post's text in your reply, but if you click on "show options",
the "Reply" option that then appears has the quoted text in the area
that you'd be typing in. If that made sense!

 

[frederick]

Thats great and all. But not how do you do this practically? IE and
Mozilla fight over so many CSS options that displaying anything the
same in both of them is a pain. I'm trying to set up a simple layout of
putting a few divs/spans next to each other and have been working on it
for hours (about to be days) and have not found a crossbrowser
solution.

Perhaps you already do this, but my approach is to test using Firefox
whilst coding, and then when I'm basically happy with what I've got,
see what IE does with it. Nine-and-a-bit times out of ten a problem is
due to IE's screwy interpretation of things, with Firefox just obeying
the rules*. Anecdotal evidence points to quite a few others around
here taking a similar approach.


* Sometimes the rules it obeys I don't entirely agree with, but that's
a different issue!

 

[frederick]

My site is very anesthetic

That's probably not what you meant to say?!

 

[trippy]

I understand that using tables is not the 'correct' way to create a
webpage layout, so I wondered what the general consensus is on using
div tags to 'simulate' a table:
http://seventynine.net/testing/test01.html

It is a very very basic example but I'm sure anyone who has made a
layout with a table can see the point behind it.

You can use a table with tabular data.

--
trippy
mhm31x9 Smeeter#29 WSD#30
sTaRShInE_mOOnBeAm aT HoTmAil dOt CoM

NP: "Rhythm From A Red Car" -- Hardline

"Now, technology's getting better all the time and that's fine,
but most of the time all you need is a stick of gum, a pocketknife,
and a smile."

-- Robert Redford "Spy Game"

 

[Toby Inkster]

My site is very anesthetic

It puts you to sleep?