best of both worlds: CSS and table layouting?

[Edward]

I've been running into issue after issue trying to position text with
pure CSS (ie 3-pixel bug, margin bugs, inexplainable side-effects,
etc.). I noted that I can just put an HTML table anywhere I want on
the screen, set DIVs inside there, and for the most part, I get the
structure I want quickly and can continue to use my style sheet for the
divs. And as far as I understand, even though this is not pure
separation of design and content, as long as XHTML is used, mobile
devices and other interfaces could pick out the DIV tags they wanted
and display them however they needed to, completely ignoring the table
tags that the browser needs for structure.

Is this correct thinking on this or are there other reasons not to use
TABLEs when you need to?

Thanks,

Edward Tanguay
All my projects: http://www.tanguay.info

=============== =============== =======

#structure {
position: absolute;
top: 300px;
left: 90px;
}

<table id="structure" border="01">
<tr>
<td>cell one</td>
<td>cell two</td>
</tr>
</table>

[Rik]

Edward wrote:

I've been running into issue after issue trying to position text with
pure CSS (ie 3-pixel bug, margin bugs, inexplainable side-effects,
etc.). I noted that I can just put an HTML table anywhere I want on
the screen, set DIVs inside there, and for the most part, I get the
structure I want quickly and can continue to use my style sheet for
the divs. And as far as I understand, even though this is not pure
separation of design and content, as long as XHTML is used, mobile
devices and other interfaces could pick out the DIV tags they wanted
and display them however they needed to, completely ignoring the table
tags that the browser needs for structure.

Why _X_HTML?

Is this correct thinking on this or are there other reasons not to use
TABLEs when you need to?

Yes, your data isn't table-data.
Using tables with nested divs defeats the purpose of it.

If you're running into that many issues, carefully rethinking the design to
a point where this issues don't matter as a better approach, and not really
caring about pixel-differences between browsers. It really depends on what
you're trying to accomplish, but normally my CSS is completely hack-free and
the same for all browsers, and it still looks good. (Ahum, 'good', let's say
'as I intended it', 'good' is for the viewer to decide :-)

Grtz,
--
Rik Wasmus

[Bill Norton]

Well, I'd say it depends on what your goals are. If you're reaching for that
sense of satisfaction of achieving something in a pure but difficult way,
like climbing Mt. Everest without oxygen, then pure CSS is the way to go.
However if you are trying to get a product delivered to a paying customer
who is expecting it to be done in a reasonable amount of time, then tables
may be the better way.

I'm finding a lot of web developers out there use CSS for text formatting,
color schemes, etc. but revert to tables for positioning.

[Den Odell]

I have to say, having listened to a lot of text readers (JAWS etc) as
part of testing my sites, I'm pretty sick of hearing it read out the
word 'table' when there's not a table of data there. Can imagine users
who hear that all the time might not be too happy either.

An advantage of keeping tables out of layout is that your page will
load probably noticably quicker (gets rid of a lot of markup).

Best reason of all though is that the <tabletag was created for
representing tables of data and nothing else, it's purely a hack that
we use it to create layouts. If you're going to use hacks that are
related to layout, I'd say keep them to the CSS rather than the
(X)HTML..

Good luck
Den
Edward wrote:

I've been running into issue after issue trying to position text with
pure CSS (ie 3-pixel bug, margin bugs, inexplainable side-effects,
etc.). I noted that I can just put an HTML table anywhere I want on
the screen, set DIVs inside there, and for the most part, I get the
structure I want quickly and can continue to use my style sheet for the
divs. And as far as I understand, even though this is not pure
separation of design and content, as long as XHTML is used, mobile
devices and other interfaces could pick out the DIV tags they wanted
and display them however they needed to, completely ignoring the table
tags that the browser needs for structure.

Is this correct thinking on this or are there other reasons not to use
TABLEs when you need to?

Thanks,

Edward Tanguay
All my projects: http://www.tanguay.info

=============== =============== =======

#structure {
position: absolute;
top: 300px;
left: 90px;
}

<table id="structure" border="01">
<tr>
<td>cell one</td>
<td>cell two</td>
</tr>
</table>

[Edward]

Rik wrote:

Why _X_HTML?

The way I understand it, pure separation of form and content comes only
when you format XML with XSLT so you can control absolutely, i.e. where
data is placed and IF it is displayed at all, perhaps even changing the
text (translations) etc. So if you write your pages in strict XHTML,
devices can use a more powerful restructuring language than CSS such as
XSLT or any XML parser in any scripting language which can format the
XHTML data anyway it wants.

I was surprised getting into CSS that DIVs had to be contained within
each other in order to get the relationships you want in the CSS (e.g.
if you want your "additional information" DIV to be a right-column box,
it has to be CONTAINED IN your "main" DIV but you don't have the
freedom to switch them around in CSS). I thought that I would just be
outputting a list of DIVs and let CSS format it anyway it wants, but
this isn't the case. If DIVs are not contained in each other, then CSS
is limited as to how it can format the information, so the "raw" HTML
data already has predetermined structure in it.

I was expecting in CSS something like the ANCHOR information you put in
objects in VBA so that you can anchor any DIV to any other DIV, thereby
letting CSS have free reign on the formatting.

Is this a limitation of CSS that runs against the form/content
separation philosophy?

Thanks,

Edward Tanguay
All my projects: http://www.tanguay.info

[Nije Nego]

On 6 Aug 2006 20:32:37 -0700, Edward wrote:

if you want your "additional information" DIV to be a right-column box,
it has to be CONTAINED IN your "main" DIV but you don't have the
freedom to switch them around in CSS).

Do not quite understand this.

If switching between main div and right collumn div - of course it is not
possible via css since they are bounded by html. Do you find a logic in
switching <tableand <tdarround?

Switching right collummn div to left collumn div (or anything else) is
rather simple in CSS.

--
buy, bought, bye