HTML - Tables vs. CSS - Need advice

03-05-2005, 04:32 AM

Hello world,

I play around with a table based layout
(http://www.photoss.de/test/layout-table.htm). It works perfectly with
Firefox, but shows some problems with Internet Explorer 6 which are
described on the webpage.

First, I would like to make the layout work for both Firefox and IE6.

Second, I have heard that CSS based layouts should be preferred over table
based ones. I tried to create a CSS based layout that looks the same and
behaves in the same way. I tried a number of approaches that I found on the
web, but up to now I couldn't find a CSS solution that really look and
behaves like the table.

Maybe someone can give me some hints that push me in the right direction?

Regards, Jens

Jens Lenge

03-05-2005, 05:33 AM

On Sat, 5 Mar 2005 05:32:37 +0100, "Jens Lenge" <>
wrote:

>Hello world,
>
>I play around with a table based layout
>(http://www.photoss.de/test/layout-table.htm). It works perfectly with
>Firefox, but shows some problems with Internet Explorer 6 which are
>described on the webpage.
>
>First, I would like to make the layout work for both Firefox and IE6.
>
>Second, I have heard that CSS based layouts should be preferred over table
>based ones. I tried to create a CSS based layout that looks the same and
>behaves in the same way. I tried a number of approaches that I found on the
>web, but up to now I couldn't find a CSS solution that really look and
>behaves like the table.
>
>Maybe someone can give me some hints that push me in the right direction?
>
>Regards, Jens

If you need the effect of a table, use a table. I think a lot of this
has come about from people thinking you can use css to make a table.
You can't, them's different animals. They behave different. So if you
need something that walks like a table, talks like a table, etc., use
a table.

BB
--
www.kruse.co.uk/
Affordable SEO!
--

03-05-2005, 07:19 AM

Jens Lenge wrote:

> Hello world,
> I play around with a table based layout
> (http://www.photoss.de/test/layout-table.htm). It works perfectly with
> Firefox, but shows some problems with Internet Explorer 6 which are
> described on the webpage.
> First, I would like to make the layout work for both Firefox and IE6.
> Second, I have heard that CSS based layouts should be preferred over
> table based ones. I tried to create a CSS based layout that looks the
> same and behaves in the same way. I tried a number of approaches that I
> found on the web, but up to now I couldn't find a CSS solution that
> really look and behaves like the table.
> Maybe someone can give me some hints that push me in the right direction?
> Regards, Jens

How about something like this, it renders the same in my IE 6, Netscape
7.2, Firefox 1.0.1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Table Layout</title>
<style type="text/css">
body{
background-color: #000000;
padding: 0;
margin: 0;
border: 0;
font-family: "Times New Roman", Times, serif;
font-size: 1em;
width: 100%;
}

..wrapper{
margin: 0;
padding: 0;
border: 5px solid #000000;
background-color: #CCCCCC;
}
..left{
float: left;
background-color: #CCCCCC;
width: 120px;
padding: 5px;
}
..top{
margin: 0 0 0 130px;
background-color: #999999;
padding: 5px;
text-align: right;
}
..main{
margin: 0 0 0 130px;
background-color: #FFFFCC;
padding: 5px;
border-top: 5px solid #000000;
border-right: 0px solid #000000;
border-bottom: 5px solid #000000;
border-left: 5px solid #000000;
}
..bottom{
margin: 0 0 0 130px;
background-color: #999999;
padding: 5px;
text-align: right;
}
</style>
</head>

<body>

<div class='wrapper'>
<div class='left'>
<b>LEFT:</b><br>
This area goes from the top to the bottom of the main area with a
fixed width of 120px.<br><br>
Its height is automatically increased when its contents don't
fit.<br><br>
The height is also automatically increased or when the height of the
MAIN area increases.
</div>
<div class='top'>
<b>TOP:</b> Fixed height of 30px, increases if contents do not fit.
</div>
<div class='main'>
<b>MAIN:</b><br>
This area has a fixed width.
The height increases when its contents do not fit.<br>
The height is also automatically increased or when the height of
the left area increases.<br>
<br><b>Problems:</b><br><br>
1. The layout works for Firefox, but not for Internet Explorer 6:<br>
a) TOP and BOTTOM areas have too much height.<br>
b) IE6 adjusts the TOP height according to how much content is in
the LEFT area.<br>
<br>2. I'd like to get the same layout with DIV and CSS formatting
instead of a table.
</div>
<div class='bottom'>
<b>BOTTOM:</b> Fixed height of 30px, increases if contents do not fit.
</div>
</div>
</body>
</html>

03-05-2005, 12:36 PM

in alt.html, Jens Lenge wrote:
> Hello world,
>
> I play around with a table based layout
> (http://www.photoss.de/test/layout-table.htm). It works perfectly with
> Firefox, but shows some problems with Internet Explorer 6 which are
> described on the webpage.

I think this is easier to get working using CSS. It is impossible to do
any fixed height/width using table. (of course, fixed widths are usually
bad idea anyway.)

> Second, I have heard that CSS based layouts should be preferred over table
> based ones. I tried to create a CSS based layout that looks the same and
> behaves in the same way. I tried a number of approaches that I found on the
> web, but up to now I couldn't find a CSS solution that really look and
> behaves like the table.

CSS layouts whitout css-tables wont usually work as table layouts. But in
this case, you don't want it to work like table.

> Maybe someone can give me some hints that push me in the right direction?

I don't know about mscirs thing (because there was no URL), but I have
example:
http://www.student.oulu.fi/~laurirai...float2col.html

Gougle groups using that url, and you see lots of discussion. This is
frequently asked question.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

03-05-2005, 05:33 AM	#2
Big Bill Posts: n/a	Re: Tables vs. CSS - Need advice On Sat, 5 Mar 2005 05:32:37 +0100, "Jens Lenge" <> wrote: >Hello world, > >I play around with a table based layout >(http://www.photoss.de/test/layout-table.htm). It works perfectly with >Firefox, but shows some problems with Internet Explorer 6 which are >described on the webpage. > >First, I would like to make the layout work for both Firefox and IE6. > >Second, I have heard that CSS based layouts should be preferred over table >based ones. I tried to create a CSS based layout that looks the same and >behaves in the same way. I tried a number of approaches that I found on the >web, but up to now I couldn't find a CSS solution that really look and >behaves like the table. > >Maybe someone can give me some hints that push me in the right direction? > >Regards, Jens If you need the effect of a table, use a table. I think a lot of this has come about from people thinking you can use css to make a table. You can't, them's different animals. They behave different. So if you need something that walks like a table, talks like a table, etc., use a table. BB -- www.kruse.co.uk/ Affordable SEO! --

03-05-2005, 07:19 AM	#3
mscir Posts: n/a	Re: Tables vs. CSS - Need advice Jens Lenge wrote: > Hello world, > I play around with a table based layout > (http://www.photoss.de/test/layout-table.htm). It works perfectly with > Firefox, but shows some problems with Internet Explorer 6 which are > described on the webpage. > First, I would like to make the layout work for both Firefox and IE6. > Second, I have heard that CSS based layouts should be preferred over > table based ones. I tried to create a CSS based layout that looks the > same and behaves in the same way. I tried a number of approaches that I > found on the web, but up to now I couldn't find a CSS solution that > really look and behaves like the table. > Maybe someone can give me some hints that push me in the right direction? > Regards, Jens How about something like this, it renders the same in my IE 6, Netscape 7.2, Firefox 1.0.1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Table Layout</title> <style type="text/css"> body{ background-color: #000000; padding: 0; margin: 0; border: 0; font-family: "Times New Roman", Times, serif; font-size: 1em; width: 100%; } ..wrapper{ margin: 0; padding: 0; border: 5px solid #000000; background-color: #CCCCCC; } ..left{ float: left; background-color: #CCCCCC; width: 120px; padding: 5px; } ..top{ margin: 0 0 0 130px; background-color: #999999; padding: 5px; text-align: right; } ..main{ margin: 0 0 0 130px; background-color: #FFFFCC; padding: 5px; border-top: 5px solid #000000; border-right: 0px solid #000000; border-bottom: 5px solid #000000; border-left: 5px solid #000000; } ..bottom{ margin: 0 0 0 130px; background-color: #999999; padding: 5px; text-align: right; } </style> </head> <body> <div class='wrapper'> <div class='left'> <b>LEFT:</b><br> This area goes from the top to the bottom of the main area with a fixed width of 120px.<br><br> Its height is automatically increased when its contents don't fit.<br><br> The height is also automatically increased or when the height of the MAIN area increases. </div><!-- left --> <div class='top'> <b>TOP:</b> Fixed height of 30px, increases if contents do not fit. </div><!-- top --> <div class='main'> <b>MAIN:</b><br> This area has a fixed width. The height increases when its contents do not fit.<br> The height is also automatically increased or when the height of the left area increases.<br> <br><b>Problems:</b><br><br> 1. The layout works for Firefox, but not for Internet Explorer 6:<br> a) TOP and BOTTOM areas have too much height.<br> b) IE6 adjusts the TOP height according to how much content is in the LEFT area.<br> <br>2. I'd like to get the same layout with DIV and CSS formatting instead of a table. </div><!-- main --> <div class='bottom'> <b>BOTTOM:</b> Fixed height of 30px, increases if contents do not fit. </div><!-- bottom --> </div><!-- wrapper --> </body> </html>

03-05-2005, 12:36 PM	#4
Lauri Raittila Posts: n/a	Re: Tables vs. CSS - Need advice in alt.html, Jens Lenge wrote: > Hello world, > > I play around with a table based layout > (http://www.photoss.de/test/layout-table.htm). It works perfectly with > Firefox, but shows some problems with Internet Explorer 6 which are > described on the webpage. I think this is easier to get working using CSS. It is impossible to do any fixed height/width using table. (of course, fixed widths are usually bad idea anyway.) > Second, I have heard that CSS based layouts should be preferred over table > based ones. I tried to create a CSS based layout that looks the same and > behaves in the same way. I tried a number of approaches that I found on the > web, but up to now I couldn't find a CSS solution that really look and > behaves like the table. CSS layouts whitout css-tables wont usually work as table layouts. But in this case, you don't want it to work like table. > Maybe someone can give me some hints that push me in the right direction? I don't know about mscirs thing (because there was no URL), but I have example: http://www.student.oulu.fi/~laurirai...float2col.html Gougle groups using that url, and you see lots of discussion. This is frequently asked question. -- Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts> Utrecht, NL.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

03-05-2005, 04:32 AM	#1
	Tables vs. CSS - Need advice Hello world, I play around with a table based layout (http://www.photoss.de/test/layout-table.htm). It works perfectly with Firefox, but shows some problems with Internet Explorer 6 which are described on the webpage. First, I would like to make the layout work for both Firefox and IE6. Second, I have heard that CSS based layouts should be preferred over table based ones. I tried to create a CSS based layout that looks the same and behaves in the same way. I tried a number of approaches that I found on the web, but up to now I couldn't find a CSS solution that really look and behaves like the table. Maybe someone can give me some hints that push me in the right direction? Regards, Jens Jens Lenge