Question

I have a question regarding the styling and positioning of a table. I have created a 2 columned table with a number of rows and I want it to “fit” into my background image.
Because this is rather vague explanation of the situation I’ve included this fiddle.

In this fiddle you should see the table + the background image and I hope it makes sense that the table items should go in between the lines that are part of the particular background.

I’ve tried styling the td element with attributes like

  td {
  height: 20% ; 
  }

or

 td {
 cellpadding: ... ;
 cellspacing: ... ;
 }

(Don’t know if these are even CSS attributes that I can use here)

but I just can not seem to get the table elements in the right place.
Anyone who could help me out or someone who could offer me some good information to do it on my own?

Answer 1

Don’t use tables for layouts. In this case it makes sense to use a list:

<div class="news"> <!--News-->
    <ul>
        <li><label>Friday 9-September-2011</label><a href="/news/items/090911_item1.html">item 1</a></li>
        <li><label>Friday 9-September-2011</label><a href="/news/items/090911_item2.html">item 2</a></li>
        <li><label>Friday 9-September-2011</label><a href="/news/items/090911_item3.html">item 3</a></li>                        
    </ul>

</div> <!-- / News -->

CSS:

.news ul {
    float:right;
    background-image: url('http://img64.imageshack.us/img64/3368/newsbg.png');
    width: 417px ;
    height: 186px ;
    background-repeat: no-repeat;
    padding-top:55px;
}

.news li {    
    height:38px; 
}

.news label {
    display:inline-block;
    width:230px;
}

.news a {
    display:inline-block;
    width:160px;
    text-align:right;
}