Tables vs. CSS, problems [Archive]

View Full Version : Tables vs. CSS, problems

Pobega

03-29-2007, 10:42 PM

Well I'm trying to build a modular text database blog software, and someone suggested using CSS instead of tables since it's going to be modular.

I've tried converting, but I'm not able to get it working right.

CSS (http://i109.photobucket.com/albums/n50/Pobega/scrot-Mar-29-07-053632.jpg) vs. Tables (http://i109.photobucket.com/albums/n50/Pobega/scrot-Mar-29-07-053636.jpg)

Here is the CSS:
body {
margin:0;
padding:0;
font-size:100%;
font-family:sans-serif;
}

#table {
width:90%;
display:table;
}

#banrow {
display:table-row;
}

#tabrow {
display:table-row;
}

#bodycol {
display:table-cell;
width:75%;
}

#links {
display:table-cell;
width:25%;
}

And the HTML code(s):

With CSS:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title Goes Here</title>
<link rel="shortcut icon" href="favicon.ico">
<?php
if($_COOKIE['poblog_css']) {
echo ' <link rel="stylesheet" href="' . $_COOKIE['poblog_css'] . '.css">';
}
else {
echo ' <link rel="stylesheet" href="default.css">';
}
?>
<meta name="Keywords" content="list, like, this">
<meta name="Description" content="Description for search engines goes here">
</head>
<body>
<center>
<div id="table">
<div id="banrow">
<center>
<img src="banner.jpg" alt="Banner goes where?" />
</center>
</div>
<div id="tabrow">
<div id="bodycol">
Body here.
</div>
<div id="links">
Links here
</div>
</div>
</div>
</center>
</body>
</html>

With tables:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title Goes Here</title>
<link rel="shortcut icon" href="favicon.ico">
<?php
if($_COOKIE['poblog_css']) {
echo ' <link rel="stylesheet" href="' . $_COOKIE['poblog_css'] . '.css">';
}
else {
echo ' <link rel="stylesheet" href="default.css">';
}
?>
<meta name="Keywords" content="list, like, this">
<meta name="Description" content="Description for search engines goes here">
</head>
<body>
<center>
<table width="90%">
<tr>
<center>
<img src="banner.jpg" alt="Banner goes where?" />
</center>
</tr>
<tr>
<td width="75%">
Body here.
</td>
<td width="25%">
Links here
</td>
</tr>
</table>
</center>
</body>
</html>

Any help would be appreciated, thank you!

VIPStephan

03-29-2007, 10:56 PM

I don’t understand what this website is about?
Your friend is right by saying that you should use CSS but CSS alone ain’t makin’ a good site yet.
Tables (http://www.hotdesign.com/seybold/) are still allowed but only if you use ’em for tabular data (e.g. a telephone register or sports results).
Use a doctype (http://alistapart.com/stories/doctype/) (HTML or XHTML strict, and nothing else!).
Use semantic markup (http://brainstormsandraves.com/articles/semantics/structure/). The switch from table layout to semantic layout might not be the most intuitive but once you go CSS you never wanna come back. :D
The purpose of CSS is not generally to replicate tables. You’ve gotta give up that table thinking if you really wanna create CSS layouts.
Don’t use deprecated elements (like <center>) and attributes (like width) - that counts as style and can, no should be done with CSS.

Pobega

03-29-2007, 11:05 PM

Thanks for the quick reply.

There is no point to this site at the moment, I'm just trying to construct the basic layout so I can work on the PHP bit of it.

So what should I do about this? I just want to get it displaying like the tables do.

twodayslate

03-29-2007, 11:16 PM

http://bonrouge.com/3c-hf-fluid.php

This should help you since you are just trying to create a CSS design.

Pobega

03-30-2007, 12:05 AM

Thanks for the link, very helpful.

Do you know of any good sites with easy to follow FAQs or Walkthroughs for learning CSS, coming from a strictly tables mindset? It'd be nice if I had this whole thing explained to me in a way I could understand.

Rather than just throwing the site together, I'd like to understand what I'm doing. Thanks!

twodayslate

03-30-2007, 12:48 AM

I learned threw a book so that is your first option.
http://www.w3schools.com/ is amazing. http://bonrouge.com is very good and Stu at http://cssplay.co.uk is a genius. http://alistapart.com/ is also interesting. Last but not least is google.

You can also learn by looking at other people's source code to see what they have done.

felgall

03-30-2007, 01:34 AM

http://www.csszengarden.com/ shows the true power of CSS. There is one HTML file with just some text and no images annd several hundred different stylesheets that you can choose between to show you some of what can be done to give that content whatever appearance you want. All of the files are easy acces to download and see how any given effect is achieved.

Pobega

04-04-2007, 07:02 AM

Thanks everyone, all of those links really helped me out.

I'm having some trouble with whitespace between my divs though.

http://digital-haze.net/~pobega/

My site looks and works awesome, thanks for all of the help, this is probably the last problem I'm going to have. This whitespace is killing me as you can see, because I can't just set a border to the body (I'm using a body with 90% width and 10% left padding to achive an 80% wide, centered page), so I'll have to kill the whitespace

jlhaslip

04-04-2007, 04:40 PM

Place a wrapper div around everything and centre, then set a border on the wrapper.

The whitespace between div's is due to there being some margin remaining on some of the div's. If you look through posts on this site, it is often recommended to eliminate all margins and padding on the html element and then insert it specifically where needed.

Pobega

04-04-2007, 11:21 PM

Thanks for the wrapper tip, it worked very well.

But I don't understand what you mean about margins and padding; Could you elaborate?