Table styles

HTML & CSS
1

Hi,

Take a look at this page:

http://www.freemanholland.com/kidsintranet/public_html/coffee-break

You can see a list of forums, “Forum rules” and “Games and activities”. Now what i want to do is split the forums up. I am having to use a single table as i am pulling it all out of a database table.

All i want to do is create a gap between the first and second forum. Any ideas how i can do this?

Thanks

2

Thanks guys! I have managed to fix it :slight_smile:

Thanks again

3

care to share :slight_smile:

provide a link to the fix :wink:

4

i gave it a try. see if it’s on your liking :slight_smile:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr"><head>

  <meta	http-equiv="Content-Type"	content="text/html; charset=utf-8">
  <meta	http-equiv="Content-Language"	content="en">

  <style>
    table{border-collapse:collapse;}
    th{padding-top:20px;}
    tr.secondheader th {padding-top:0; background-color:#bbb; border:solid 1px;}
    td{border:solid 1px; padding:0 5px;}
  </style>

</head><body>

<table>
  
  <tbody>
    <tr>
      <th colspan="4">Forum rules</th>
    </tr>
    
    <tr class="secondheader">
      <th>Forum</th>
      <th>Threads</th>
      <th>Posts</th>
      <th>Recently Posted</th>
    </tr>
    
    <tr>
      <td><a href="http://www.freemanholland.com/kidsintranet/public_html/coffee-break/topics/Forum rules/The rules of the forum/1">The rules of the forum</a><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></td>
      <td>5</td>
      <td>1</td>
      <td>2010-10-02 03:23:44</td>
    </tr>
    <tr>
      <td><a href="http://www.freemanholland.com/kidsintranet/public_html/coffee-break/topics/Forum rules/Testing /3">Testing </a><p>sdga</p></td>
      <td>0</td>
      <td>0</td>
      <td>No posts</td>
    </tr>
  </tbody>
  
  <tbody>
    <tr>
      <th colspan="4">Games and activities</th>
    </tr>
    
    <tr class="secondheader">
      <th>Forum</th>
      <th>Threads</th>
      <th>Posts</th>
      <th>Recently Posted</th>
    </tr>
    
    <tr>
      <td><a href="http://www.freemanholland.com/kidsintranet/public_html/coffee-break/topics/Games and activities/Testing/2">Testing</a><p>sdgsd</p></td>
      <td>1</td>
      <td>0</td>
      <td>No posts</td>
    </tr>
  </tbody>

</table>

</body></html>
5

empty borderless row in the markup, OR use two separate tables since it’s two separate sections.

Oh, and there’s no real reason for a lot of your classes on that table – put the top TR with the th in a thead, then you can use TH inside TBODY for the colspanned ones (since that too is a heading)

You might also consider NOT styling those colspanned headings directly. You could put them in DIV, style the div with a margin-top and make the TD have no styling at all. Set it to vertical-align:bottom and you’re good to go – which might be a more semantic solution.

I’ll try to remember when I’m on my workdesk later to come back to this thread, I’ll toss together an example of what I mean.