html/css tables

[mjrand]

Hi guys, I'm looking for advice on how to write some tables in css/html.

Take a look at http://www-03.ibm.com/press/us/en/pressreleases/recent.wss

The press release table in the middle. I don't need much functionality. I simply want a table with 2 sections like on IBM's site. One for the date and one for the press release title, and that it will change colours when I hover over it. I'd like all 4 corners of the table to be rounded also if possible.

Thanks for any help you guys can give.

 

[Hmongkeysauce]

HTML Portion:

<table border="0" class="myTable" cellpadding="0" cellspacin="0" summary="Table Summary">
 <caption><em>My Caption</em></caption>
 <thead>
  <tr>
   <th scope="col">Title</th>
  </tr>
 </thead>
 <tbody>
  <tr><td><!-- first column --></td><td><!-- second column --></td></tr>
</table>

The CSS portion of the ibm table is rather long so you may just want to fill in your own styling for the table, but to get the hover effect, simply add this to your styling:

table.myTable tbody tr:hover td{background:#333333}

You can obviously change the background color to your choosing.

For rounded corners, I'm not sure if there is a browser-independent CSS-only solution. You may have to use a combination of pictures and CSS to achieve this. Hope this helps.

 

[linkgoron]

Rounded corners...

With CSS3 (read: any other browser than IE8) you can use "border-radius".

With IE8- you have to use background images. I would probably use border-radius and leave it at that, because it degrades gracefully.