Need CSS Master - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Need CSS Master

For Tricky Table Problem

one_mind

6:34 am on Dec 10, 2005 (gmt 0)

10+ Year Member

Hi,

I am trying to make a table without using <span> to position my text within it but have a problem with cell spacing.

I dont want to use css cell spacing because it is not widely supported.

Could someone paste this code into a file and tell me if its possible to get rid of the gap between the blue writing on the left and black writing on the right.

<table class=display style=position:relative;top:3px; cellspacing=5>
<tr>
<td class=info colspan=2>
<b>Details</b>
</td>
</tr>
<tr>
<td class=disp width=100>
Name:<br>Display Name:<br>Address:<br>Phone:<br>Email:<br>Joined:<br>Last Login:
</td>
<td class=info>
$fname $lname<br>$dname<br>$street, $city, $state, $country, $zip<br>$phone<br>$email<br>$join_date<br>$last_login
</td>
</tr>
</table>

table.display
{
width:668px;
background-color:#F5F5F5;
border:1px solid #D6D6D6;
}

td.disp
{
color:#002EB8;
background-color:#EDEDED;
border:1px solid #D6D6D6;
padding:4px;
}

td.info
{
background-color:#EDEDED;
border:1px solid #D6D6D6;
padding:4px;
}

The old way was to use span and it displayed exactly as i wanted but everyone told me it was really bad code. Here is my old html way that i want to relicate.

<table width=100% bgcolor=#F5F5F5 border=1 BORDERCOLOR=#D6D6D6
cellpadding=5 cellspacing=5 style=position:relative;top:3px;>
<tr>
<td width=500 bgcolor=$color2>
<b>Details</b><span style=position:relative;left:535px;><a href=edit_details.php>Edit Details</a>
</span>
</td>
</tr>
<tr>
<td>
Name:<span style=position:relative;left:50px;color:black;>$fname $lname</span><br>
Display Name:<span style=position:relative;left:6px;color:black;>$dname</span><br>
Address:<span style=position:relative;left:39px;color:black;>$street, $city, $state, $country, $zip</span><br>
Phone:<span style=position:relative;left:49px;color:black;>$phone</span><br>
Email:<span style=position:relative;left:53px;color:black;>$email</span><br>
Joined:<span style=position:relative;left:48px;color:black;>$join_date</span><br>
Last Login:<span style=position:relative;left:27px;color:black;>$last_login</span>
</td>
</tr>
</table>

Note, this code is origially from inside a php echo call hence no quotes around attributes.

Would greatly appreciate a solution.

Thanks :)

tomda

9:01 am on Dec 10, 2005 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Here one using table

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<STYLE TYPE="text/css">

</STYLE>
</head>
<body>
<div class=window>
<p class="header"><b>Details</b></p>
<table cellspacing=0 cellpadding=0 class="sp">
<tr><td class="left">Name:<br>Display Name:<br>Address:<br>Phone:<br>Email:<br>Joined:<br>Last Login:</td>
<td class="right">$fname $lname<br>$dname<br>$street, $city, $state, $country, $zip<br>$phone<br>$email<br>$join_date<br>$last_login</td></tr></table>
</div>
</body>
</html>

And one using float

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<STYLE TYPE="text/css">

</STYLE>
</head>
<body>
<div class=window>
<p class="header"><b>Details</b></p>
<div class=content>
<div class="right">$fname $lname<br>$dname<br>$street, $city, $state, $country, $zip<br>$phone<br>$email<br>$join_date<br>$last_login</div>
Name:<br>Display Name:<br>Address:<br>Phone:<br>Email:<br>Joined:<br>Last Login:
</div>
</body>
</html>

Tested on FF and IE only!
Enjoy

chrisjoha

9:53 am on Dec 13, 2005 (gmt 0)

10+ Year Member

Removing the relationship between label and value like that is bad for several reasons. For one, you remove the semantic binding (ie, that "name" has the value $name and so on).

Another thing (which you may not be able to be certain about) is that if the value of a field spans two lines then even the visual relationship between key and value disappear and the rest of the values float out in a mess.

Try to reduce the right hand column to 100px and the wrapper to 168px in the div-based example posted above to see the effects.

There's been alot of discussion about these sort of thing, but I sometimes use a <dl> for these kind of things when I don't feel that a table is appropriate. But in many cases like this, a table is appropriate.