Converting table

**lord22** · 08-01-2008, 08:07 PM

Hi

I have a simple table: http://msifrut.com/mell.htm

I tried (just for curious) to convert it into a css based code.
I tried to use lists but my problem was that I want that every line will have another padding (for the comments line).

Any suggestions?

**jeaux** · 08-17-2008, 04:12 PM

You need to have semantic markup. If you add classes to every <tr>, or <td> then you have access to all their properties.

**TheJoshMan** · 08-17-2008, 07:23 PM

Try this on for size...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dspan">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Nice</title>
<style type="text/css">
<!--

.forumwrap{
display:block;
margin:0px;
padding:0px;
width:540px;
direction:rtl;
border:1px solid rgb(74, 28, 117);
background-color: white;
font-family: Arial, Helvetica, sans-serif;
font-size:13px;
}

.clearitem{
width:540px;
height:1px;
position:relative;
top:0;
left:0;
border:0px;
border-bottom:1px solid rgb(74, 28, 117);
}

.timestamp{
display:block;
width:100px;
float:left;
border:0;
padding:5px;
padding-right: 10px;
position:relative;
top:0;
left:0;
}

.ranking{
width:110px;
display:block;
float:left;
position:absolute;
left:110px;
padding:5px;
}
.ranking a, .ranking a:link, .ranking a:active, .ranking a:visited{
color: rgb(112, 185, 45); 
font-weight: bold; 
text-decoration: none; 
font-size: 13px;
}
.threadcount{
width:110px;
display:block;
padding:5px;
}
.threadcount img{
padding-left:5px;
float:right;
clear:right;
}

.threadcount a, .threadcount a:link, .threadcount a:active, .threadcount a:visited{
color: rgb(74, 28, 117); 
font-size: 13px; 
font-weight: bold;
text-decoration:none;
}
.threadcount_sub1{
width:110px;
display:block;
padding:5px;
margin-right:20px;
}
.threadcount_sub1 img{
padding-left:5px;
float:right;
clear:right;
}

.threadcount_sub1 a, .threadcount_sub1 a:link, .threadcount_sub1 a:active, .threadcount_sub1 a:visited{
color: rgb(74, 28, 117); 
font-size: 13px; 
font-weight: bold;
text-decoration:none;
}

.threadcount_sub2{
width:110px;
display:block;
padding:5px;
margin-right:40px;
}
.threadcount_sub2 img{
padding-left:5px;
float:right;
clear:right;
}

.threadcount_sub2 a, .threadcount_sub2 a:link, .threadcount_sub2 a:active, .threadcount_sub2 a:visited{
color: rgb(74, 28, 117); 
font-size: 13px; 
font-weight: bold;
text-decoration:none;
}
-->
</style>
</head><body>




<div class="forumwrap">
<span class="ranking">
<a href="#">Normal user</a>
</span>

<span class="timestamp">24/07/08 14:50</span>
<span class="threadcount"><img src="mell_files/People_015.gif" alt=""><a href="#">First thread</a></span>

<div class="clearitem"></div>

<span class="ranking">
<a href="#">Normal user</a>
</span>

<span class="timestamp">24/07/08 14:50</span>
<span class="threadcount_sub1"><img src="mell_files/People_015.gif" alt=""><a href="#">First Child</a></span>

<div class="clearitem"></div>

<span class="ranking">
<a href="#">Normal user</a>
</span>

<span class="timestamp">24/07/08 14:50</span>
<span class="threadcount_sub2"><img src="mell_files/People_015.gif" alt=""><a href="#">Sub Child</a></span>

<div class="clearitem"></div>

<span class="ranking">
<a href="#">Normal user</a>
</span>

<span class="timestamp">24/07/08 14:50</span>
<span class="threadcount"><img src="mell_files/People_015.gif" alt=""><a href="#">First thread</a></span>
</div>
</body></html>

**TheJoshMan** · 08-17-2008, 07:29 PM

I removed all of your "inline" styling... Things such as (border="2px") and/or (height="25px") are deprecated. They will not validate. You should always use CSS to define heights, widths, borders, etc... It is also much neater and preferable to use a stylesheet rather than inline styling of elements. Styling things directly on the page can tend to get complicated and very messy.

Thread: Converting table

Thread Tools

Search Thread

Converting table

Bookmarks

Bookmarks

Posting Permissions