CSS table problem [Archive] - WebDeveloper.com

Click to See Complete Forum and Search --> : CSS table problem

MKashlev

08-04-2003, 09:19 PM

Hello, I have a problem with the table format in CSS.
How can I remove all the space (in yellow) between the cells? Please take a look at the following page:
http://mkashlev.dyndns.org:7771/ISSI2003-web/css3.html
I want all the blue stuff together without any spaces between pictures. How can i accomplish this?

The code is as follows:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS TEST</title>
<style type="text/css">

body {
margin:0;
padding:0;
color:#000;
background: #f5f5f5;
font: 0.8em Verdana, arial, sans-serif;
}

div.centered {text-align: center;}
div.centered table {margin:4 auto; text-align:left; width:700px; height:600; background-color:yellow; border:0px;}
td.main {margin:0px; padding 0px;}
td.logo {margin:0px; padding 0px; width:97px; height:79px; border:0px}
td.title {margin:0px; padding 0px; width:595px; height:79px; border:0px}
td.navbar {margin:0px; padding 0px; width:97px; border:0px}
td.body {margin:0px; padding 0px;}
td.hrleft {margin:0px; padding 0px; width:97; height:9;}
td.hrright {margin:0px; padding 0px; width:595; height:9;}
td.vrtop {margin:0px; padding 0px;}
td.vrmid {margin:0px; padding 0px; width:8; height:9;}
td.vrbottom {margin:0px; padding 0px; width:8px; height:155px border:0px}
td.bottombar {margin:0px; padding 0px; width:105px; border:0px}
img.logo
{
height: 79px;
width: 97px;
border: 0px;
margin: 0px;
}
img.title
{
height: 79px;
width: 595px;
border: 0px;
}
img.navbar
{
width: 97px;
padding: 0px;
border: 0px;
}
img.vrtop
{
height: 79px;
width: 8px;
}
img.vrmid
{
height: 9px;
width: 8px;
}
img.vrbottom
{
height: 155px;
width: 8px;
}
img.hrleft
{
height: 9px;
width: 97px;
}
img.hrright
{
height: 9px;
width: 595px;
}
img.bottombar
{
width: 105px;
border: 0px;
}

</style>
</head>

<body>

<div class="centered">
<table>
<TR>
<TD class="logo">
<A HREF="http://www.weizmann.ac.il">
<IMG class="logo" SRC="images/Weizmann-Institute.gif" ALT=""></A></TD>
<TD class="vrtop">
<IMG class="vrtop" SRC="images/about_02.gif" ALT=""></TD>
<TD class="title">
<IMG class="title" SRC="images/about_03.gif" ALT=""></TD>
</TR>
<TR>
<TD class="hrleft">
<IMG class="hrleft" SRC="images/about_04.gif" ALT=""></TD>
<TD class="vrmid">
<IMG class="vrmid" SRC="images/about_05.gif" ALT=""></TD>
<TD class="hrright">
<IMG class="hrright" SRC="images/about_06.gif" ALT=""></TD>
</TR>
<TR>
<TD class="navbar" bgcolor=yellow>
<A HREF="index.html">
<IMG class="navbar" SRC="images/Home.gif" HEIGHT=34 ALT=""></A>
</TD>
<TD class="vrbottom" ROWSPAN=5 bgcolor=pink>
<IMG class="vrbottom" SRC="images/about_08.gif" ALT="">
</TD>
<TD class="body" ROWSPAN=6 bgcolor=red>
body
</TD>
</TR>
<TR valign=top>
<TD class="navbar" bgcolor=green>
<A HREF="about.html">
<IMG class="navbar" SRC="images/About.gif" HEIGHT=31 ALT=""></A>
</TD>
</TR>
<TR valign=top>
<TD class="navbar" bgcolor=orange>
<A HREF="students.html">
<IMG class="navbar" SRC="images/Students.gif" HEIGHT=37 ALT=""></A>
</TD>
</TR>
<TR valign=top>
<TD class="navbar" bgcolor=brown>
<A HREF="pics.html">
<IMG class="navbar" SRC="images/Pictures.gif" HEIGHT=38 ALT=""></A>
</TD>
</TR>
<TR valign=top>
<TD class="navbar" bgcolor=blue>
<IMG class="navbar" SRC="images/about_13.gif" HEIGHT=15 ALT="">
</TD>
</TR>
<TR valign=top>
<TD class="bottombar" colspan=2 bgcolor=purple>
<IMG class="bottombar" SRC="images/about_13.gif" height=300 ALT="">
</TD>
</TR>
</table>

</div>

</body>
</html>

Thanks in advance,

~Dmitry

pyro

08-04-2003, 10:00 PM

A simple two column layout can be easily achieved using CSS, so you really should think about switching from using tables for layout (which the W3C clearly discourages) to using CSS. After all, that's what it's for. You can find css layout resevoirs at the following URLs:

http://www.bluerobot.com/web/layouts/
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
http://webhost.bridgew.edu/etribou/layouts/

If you don't want to use CSS, you can fix your immediate problem by adding this to your stylesheet:

table {
border-collapse: collapse;
}

MKashlev

08-04-2003, 10:08 PM

still, border-collapse doesnt solve the problem. I still have some space between cells:
http://mkashlev.dyndns.org:7771/ISSI2003-web/css4.html
Before it was as at:
http://mkashlev.dyndns.org:7771/ISSI2003-web/css3.html

PeOfEo

08-04-2003, 11:58 PM

I see the table advice I gave you worked :) But I am telling you to make something like that in css, like position it in css completly and use <div>'s... it would be a lot easyer to maintain in the future and once you get the hang of it its easyer to use then tables. Just try using the table attribute. cellspacing="0"

MKashlev

08-05-2003, 03:55 PM

Still there are some spaces between cells in the navbar.
Look here: http://mkashlev.dyndns.org:7771/ISSI2003-web/css4.html
I modified the code like this:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS TEST</title>
<style type="text/css">

body {
margin:0;
padding:0;
color:#000;
background: #f5f5f5;
font: 0.8em Verdana, arial, sans-serif;
}

div#centered {text-align: center;}
div#centered table {margin:0 auto; text-align:left; width:700px; height:550; background-color:yellow; border:0px; border-

collapse: collapse;}
td#main {margin:0px; padding 0px;}
td#logo {margin:0px; padding 0px; width:97px; border:0px}
td#title {margin:0px; padding 0px; width:595px; border:0px}
td#navbar {margin:0px; padding 0px; width:97px; border:0px margin-bottom: 0px; bottom:0px;}
td#body {margin:0px; padding 0px;}
td#hrleft {margin:0px; padding 0px; width:97;}
td#hrright {margin:0px; padding 0px; width:595;}
td#vrtop {margin:0px; padding 0px;}
td#vrmid {margin:0px; padding 0px; width:8;}
td#vrbottom {margin:0px; padding 0px; width:8px; border:0px bottom:0px;}
td#bottombar {margin:0px; padding 0px; width:105px; border:0px}
img#logo
{
height: 79px;
width: 97px;
border: 0px;
margin: 0px;
margin-bottom: 0px;
}
img#title
{
height: 79px;
width: 595px;
border: 0px;
}
img#navbar
{
width: 97px;
padding: 0px 0px;
border: 0px;
margin-bottom: 0px;
bottom:0px;
}
img#vrtop
{
height: 79px;
width: 8px;
}
img#vrmid
{
height: 9px;
width: 8px;
}
img#vrbottom
{
height: 155px;
width: 8px;
bottom:0px;
}
img#hrleft
{
height: 9px;
width: 97px;
}
img#hrright
{
height: 9px;
width: 595px;
}
img#bottombar
{
width: 105px;
border: 0px;
}

</style>
</head>

<body>

<div id="centered">
<table cellpadding="0" cellspacing="0">
<TR>
<TD id="logo">
<A HREF="http://www.weizmann.ac.il">
<IMG id="logo" SRC="images/Weizmann-Institute.gif" ALT=""></A></TD>
<TD id="vrtop">
<IMG id="vrtop" SRC="images/about_02.gif" ALT=""></TD>
<TD id="title">
<IMG id="title" SRC="images/about_03.gif" ALT=""></TD>
</TR>
<TR>
<TD id="hrleft" valign=top>
<IMG id="hrleft" SRC="images/about_04.gif" ALT=""></TD>
<TD id="vrmid">
<IMG id="vrmid" SRC="images/about_05.gif" ALT=""></TD>
<TD id="hrright">
<IMG id="hrright" SRC="images/about_06.gif" ALT=""></TD>
</TR>
<TR height=34 style="max-height:34;">
<TD id="navbar" bgcolor=yellow valign=top>
<A HREF="index.html">
<IMG id="navbar" SRC="images/Home.gif" HEIGHT=34 ALT=""></A>
</TD>
<TD id="vrbottom" ROWSPAN=5 bgcolor=pink valign=top>
<IMG id="vrbottom" SRC="images/about_08.gif" ALT="">
</TD>
<TD id="body" ROWSPAN=6 bgcolor=red>
body
</TD>
</TR>
<TR valign=top height=31 style="max-height:34;">
<TD id="navbar" bgcolor=green>
<A HREF="about.html">
<IMG id="navbar" SRC="images/About.gif" HEIGHT=31 ALT=""></A>
</TD>
</TR>
<TR valign=top height=37 style="max-height:34;">
<TD id="navbar" bgcolor=orange>
<A HREF="students.html">
<IMG id="navbar" SRC="images/Students.gif" HEIGHT=37 ALT=""></A>
</TD>
</TR>
<TR valign=top height=38 style="max-height:34;">
<TD id="navbar" bgcolor=brown>
<A HREF="pics.html">
<IMG id="navbar" SRC="images/Pictures.gif" HEIGHT=38 ALT=""></A>
</TD>
</TR>
<TR valign=top height=15>
<TD id="navbar" bgcolor=blue>
<IMG id="navbar" SRC="images/about_13.gif" HEIGHT=15 ALT="">
</TD>
</TR>
<TR valign=top>
<TD id="bottombar" colspan=2 bgcolor=purple>
<IMG id="bottombar" SRC="images/about_13.gif" height=300 ALT="">
</TD>
</TR>
</table>

</div>

</body>
</html>

PeOfEo

08-05-2003, 06:38 PM

This layout would be so much easyer to do in css and you would not have to worrie about little spaces and things like that, tables were not designed for layout so they often do not respond the way user would like them to.

MKashlev

08-05-2003, 07:47 PM

how would you do the same layout in css?

PeOfEo

08-06-2003, 10:15 AM

www.bluerobot.com has a nice simple two column layout. What it does is it sets a left margine for both of the divs and the menu has a width in px and the other one has a right margine specified and its width is auto, which I would probably do it very much like they did it.