Using CSS instead of tables - great idea but how??

C

chrisn

Hi,

I've been to www.csszengarden.com, and I'm halfway through Dave Shea's
excellent book "The Zen of CSS".

I've now been convinced of the case for using CSS for layout instead of
tables. However, I am finding some things exceedingly difficult to
manage, although I have had some early successes and the resultant Html
code is sooo much smaller.

Anyway, here's what I'm trying to do, I have a genuine table for data,
which I want to fill the horizontal width of the screen, with a margin
all around it.

My target browser is IE 5.1 and upwards.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style>
body {margin:0px;}
table {width:100%;border:1px solid silver;margin:10px;}
td {border:1px solid silver;}
div.#Header {background-color:silver;height:40px;}
</style>
</head>
<body>
<div id="Header">...this is my header...</div>
<table>
<tr><td>table</td><td>of</td></tr>
<tr><td>data</td><td>...</td></tr>
</table>
</body>
</html>

Thanks in advance,
Chris N
 
B

Barbara de Zoete

Anyway, here's what I'm trying to do, I have a genuine table for data,
which I want to fill the horizontal width of the screen, with a margin
all around it.

My target browser is IE 5.1 and upwards.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Click to expand...

Where did the 1 go for HTML 4.01? Transitional is outdated. Besides that, this
doctype is for quirksmode. Use
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">

if you must go with transitional. Better use strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<div id="Header">...this is my header...</div>
Click to expand...

If it is a heading, why not use a heading? One of the h1-6 (where each heading
with a higher number is preceded by a heading with a lower number at an interval
of 1)? See said:
<table>
<tr><td>table</td><td>of</td></tr>
<tr><td>data</td><td>...</td></tr>
</table>
Click to expand...

If this is a genuine table with tabular data, stick with tables. Do not try to
make it something it's not. Always markup logically, meaningful. A table is just
that, a table.

--
,-- --<--@ -- 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 |
`-------------------------------------------------- --<--@ ------------'
 
D

dingbat

Barbara said:
Transitional is outdated.
Click to expand...

Why? It isn't - it still has valid functions that Strict can't do.
Don't just parrot some else's opinions.
If it is a heading, why not use a heading? One of the h1-6
Click to expand...

There are far more cases for a generalised "heading" than HTML's rigid
1..6 hierarchy. Besides which, the OP might even be aiming for ISO-HTML
or a similar local standard where "headings" have an additonal validity
constraint applied such that the must appear in strict order.

I once wrote a note to my boss ("Get more milk for the coffee maker")
and used Word's default "Memo" template to do so. Unfortunately I was
working for a European quasi-governmental body at the time and anything
called "Memorandum" had some enormous implied legal meaning. They were
only to be used in event of declaring war on Belgium, or similar
seriousness. I'd only caused a minor diplomatic incident, but I think
Ambassadors had to be recalled and supplies of Ferrero Rocher were
distinctly short for a while.
 
C

chrisn

Dear Barbara,

Thank you for your reply. It's a shame you didn't bother to read the
question first.

Chris
 
G

Greg N.

Dear Barbara,

Thank you for your reply. It's a shame you didn't bother to read the
question first.
Click to expand...

Well, you did not really ask any question. There is no question mark in
your post, anyway.
 
D

Dylan Parry

Using a pointed stick and pebbles, Els scraped:
What question?
Click to expand...

There was no question, just a few statements and some code. One could
assume that the intended question was "why does this code not work as is
intended?" but as the OP didn't ask that, no one has tried to answer it.
 
D

Dylan Parry

Using a pointed stick and pebbles, (e-mail address removed) scraped:
There are two in the title.
Click to expand...

The title of a post is not a replacement for asking a question within
the body. Many people don't even bother to read the post titles, myself
included.
 
D

dingbat

Anyway, here's what I'm trying to do, I have a genuine table for data,
which I want to fill the horizontal width of the screen, with a margin
all around it.
Click to expand...

Try this:

<style type="text/css" > /* Use the type attribute */
body {
margin: 0px;
}

table {
border: 1px solid silver;
margin: 10px;

/* 90% not 100%
Obviously you can't "fill" and "have a margin" at the same time.
*/
width: 90%;

/* These will center it */
margin-left: auto;
margin-right: auto;
/*
Your choice of fixed-width and auto margins
OR
fixed margins (maybe in em units) and auto-width is a personal choice,
depending on contents and context. Try it out both ways, try it with a
range of window widths. Remember to think not just about how it looks
in the ideal case, but also how it re-scales when you drag the window
about
*/
}

td {
border: 1px solid silver;
}

/* typo fixed in the selector */
div#Header {
background-color: silver;
height: 40px;
}

My target browser is IE 5.1 and upwards.
Click to expand...

Heresy ! Try targetting "the web" instead of a browser.
 
C

chrisn

Ding,

Thank you for your help. Setting the width to 90% or 95% looks fine,
but doesn't allow me to set the margin width at 10 pixels, which would
make this page inconsistent with the rest of the application. However,
your assistance has led me to a solution which works.

Wrapping the table in a DIV and setting the padding to 10px works when
I change the doctype to

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

The use of the DIV for layout is still a little less than desirable,
but I figure still better than the table which it replaces.

I didn't think I would be able to do this (use the strict mode) as some
users were thought to be on IE5.1, however, it turns out they are all
running IE 6 now.

The full code (for anyone who's interested, you never know) is...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
body {margin:0px;}
table {width:100%;border:1px solid silver;}
td {border:1px solid silver;}
div#Header {background-color:silver;height:40px;}
div#Container {padding:10px;}
</style>
</head>
<body>
<div id="Header">...div which will contain the header
controls...</div>
<div id="Container">
<table>
<tr><td>table</td><td>of</td></tr>
<tr><td>data</td><td>...</td></tr>
</table>
</div>
</body>
</html>
 
B

Blinky the Shark

Greg said:
Well, you did not really ask any question. There is no question mark in
your post, anyway.
Click to expand...

Ah, well, just another unclued GG poster. I don't even see their posts.
 
D

David Dorward

Why? It isn't - it still has valid functions that Strict can't do.
Click to expand...

I can only think of one - and its a slightly dubious edge case - ordered
lists which are split into two lists and thus need the start attribute.

However you said "functions", plural - specifically what?
There are far more cases for a generalised "heading" than HTML's rigid
1..6 hierarchy. Besides which, the OP might even be aiming for ISO-HTML
or a similar local standard where "headings" have an additonal validity
constraint applied such that the must appear in strict order.
Click to expand...

So why not use them in strict order?
 
A

Adrienne

Gazing into my crystal ball I observed "Barbara de Zoete"
If it is a heading, why not use a heading? One of the h1-6
Click to expand...

Indeed, definately use heading markup, but the header id could also include
graphics, address information, or other things that might be in a header.
Actually, I usually do:

<div id="header">...</div>
<div id="content">
<h1>Title</h1>
</div>
 
A

Andy Dingley

I can only think of one


So why not use them in strict order?
Click to expand...

It's often difficult - especially with dynamically generated code - to
know what level the current header is. I was working on a network
browser app (some more AJAX) recently which displayed a lot of nested
hierarchical "friend of a friend" information, with headers marked up
through <div class="foo">. Click on one of these and you navigated to
that node, with the previously "higher" levels now as subordinates.
Where's <h3> in that lot ? It's entirely dynamic.


The real issue though was that the OP had a reasonable question (how to
control width) and instead of either answering or keeping quiet, a
couple of people saw it as an excuse to demonstrate their limited
knowledge of _something_ by flaunting an entirely trivial nit-pick on an
irrelevant point.

A posted "Question" is a request for information, not an invitation to
display your knowledge of typography and the letter Q.
 
D

David Dorward

The most obvious one would be <a target="..." ...>
Click to expand...

That's a job for JavaScript (and generally considered harmful anyway), not
HTML.
It's often difficult - especially with dynamically generated code - to
know what level the current header is. I was working on a network
browser app (some more AJAX) recently which displayed a lot of nested
hierarchical "friend of a friend" information, with headers marked up
through <div class="foo">. Click on one of these and you navigated to
that node, with the previously "higher" levels now as subordinates.
Where's <h3> in that lot ? It's entirely dynamic.
Click to expand...

It sounds it might be a call for nested lists rather then headings, but
still, the level of heading can be calculated programmatically, even if it
does take a little more work.
A posted "Question" is a request for information, not an invitation to
display your knowledge of typography and the letter Q.
Click to expand...

The difference between Usenet and a helpdesk, is that on Usenet somebody
posts something and people discuss it, while on a helpdesk, somebody asks a
question and hands over money in return for an answer.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Having trouble centering contents of td ? 3
Can anyone please help? HTML - two tables applying different styles 4
Help needed with thank you message 5
Image shifts to the right when export the page to pdf 4
How to wrap <td> content . 16
Javascript DOM 1
How to delete the item from table? I am using SESSION. 0

Members online

No members online now.
Total: 76 (members: 1, guests: 75)
Robots: 332

Forum statistics

Threads
473,995
Messages
2,570,226
Members
46,815
Latest member
treekmostly22

Latest Threads

Top