views:

44

answers:

1

Hi there. I've temporarily inherited the responsibility to look after the website front end to our project as our web guy has just left and there isn't a replacement yet (and I'm a summer student anyway, so I'm off soon too...). I'm not very experienced with HTML/CSS/etc, and I'm having some problems getting a table formatted the way the bosses would like it. The table HTML/CSS (cut down as much as I think I can) is as follows:

<html>
 <head>
  <style type="text/css">

            /* Old CSS from web-guy before me */
  h5 { 
   font-size: 150%; 
   color: #878796;
   font-family: Arial,Helvetica,sans-serif;
  }

  .details-container {
   border-right : 1px;
   border-right-color:#F6F6F6;
   float:left;
  }

  .title-details h5 {
   text-align: center;
   margin: 0px;
   margin-bottom: 5px;
   margin-top: 5px;
  }

  /* From here on it is mostly my CSS */
  table.center {
   margin-left:auto;
   margin-right:auto;
  }

  .details-column-left{
   text-align:right;
   padding-right:2px;
  }

  .details-column-right{
   text-align:left;
   padding-left:2px;
  }

  </style>
 </head>
 <body>
  <div class="details-container">
   <div class="title-details">
     <h5>Details</h5>
   </div>

   <div class="details">
    <table class="center">
     <tr>
      <th class="details-column-left">Title</th>
      <td class="details-column-right">Prince</td>
     </tr>
     <tr>
      <th class="details-column-left">Name</th>

      <td class="details-column-right">Vlad III the Impaler</td>
     </tr>
     <tr>
      <th class="details-column-left">Nationality</th>
      <td class="details-column-right">Romanian</td>
     </tr>
     <tr>

      <th class="details-column-left">Job</th>
      <td class="details-column-right">General</td>
     </tr>
     <tr>
      <th class="details-column-left">Extremely Long Header Text</th>
      <td class="details-column-right">Equally Long Value Text</td>
     </tr>

     <tr>
      <th class="details-column-left">Header</th>
      <td class="details-column-right">Value</td>
     </tr>
    </table>
   </div>
  </div>
 </body>
</html>

The text in the table (that is, the header cells text and the standard cells text) is generated server-side based on a database, so the values in them can be quite long or quite short (with a reasonable maximum length). The bosses want it as follows:

  • The two columns must be justified against each other in the middle, with a small space inbetween.
  • The table should expand so that all the text in each cell is on the same row.
  • The title ("Details") should always be centered between the two columns, no matter what the ratio of widths are (as they will normally be about 60:40).

I think I've managed to capture 1 and 2 okay - this table should expand if you add longer th/td s, and it should likewise get smaller if you remove them - but I'm struggling with number 3. I'm just not sure how to do it at all. I've tried using a <caption>, but that didnt help - it's still centered above the entire table, not centered above the column split.

So, I'd appreciate any help getting the table to look 'right'. The only expected browser is apparently Firefox, versions 2 through 3.5 (although pushing 3.5 over 2 mostly). I apologise if I've missed any important information - please just ask and I'll add it.

EDIT:

Screenshot (red lines just for marking centre, not actually on table IRL):

The Table as it is now, and as I want it.

+1  A: 

The Solution

Its a bit tricky, but you could do this:

<html>
<head>
    <style type="text/css">

        /* Old CSS from web-guy before me */
    h5 { 
        font-size: 150%; 
        color: #878796;
        font-family: Arial,Helvetica,sans-serif;
    }

    .details-container {
        border-right : 1px;
        border-right-color:#F6F6F6;
        float:left;
    }

    .title-details h5 {
        margin: 0px;
        margin-bottom: 5px;
        margin-top: 5px;
    }

    /* From here on it is mostly my CSS */
    table.center {
        margin-left:auto;
        margin-right:auto;
    }

    .details-column-left{
        text-align:right;
        padding-right:2px;
    }

    .details-column-right{
        text-align:left;
        padding-left:2px;
    }

    </style>
</head>
<body>
    <div class="details-container">

        <div class="details">
            <table class="center">
                <tr><td>&nbsp;</td><td><div style="width: 1px;overflow:visible;text-align: center;margin: -40px;"><h5>Details</h5></div></td><td>&nbsp;</td></tr>
                <tr>
                    <th class="details-column-left">Title</th>
                    <td width="1">&nbsp;</td>
                    <td class="details-column-right">Prince</td>
                </tr>
                <tr>
                    <th class="details-column-left">Name</th>
                    <td>&nbsp;</td>
                    <td class="details-column-right">Vlad III the Impaler</td>
                </tr>
                <tr>
                    <th class="details-column-left">Nationality</th>
                    <td>&nbsp;</td>
                    <td class="details-column-right">Romanian</td>
                </tr>
                <tr>

                    <th class="details-column-left">Job</th>
                    <td>&nbsp;</td>
                    <td class="details-column-right">General</td>
                </tr>
                <tr>
                    <th class="details-column-left">Extremely Long Header Text</th>
                    <td>&nbsp;</td>
                    <td class="details-column-right">Equally Long Value Text</td>
                </tr>

                <tr>
                    <th class="details-column-left">Header</th>
                    <td>&nbsp;</td>
                    <td class="details-column-right">Value</td>
                </tr>
            </table>
        </div>
    </div>
</body>

it's, not really clean and tidy, but it should work out just fine

greetz

xXx
That also appears centered over the whole table, not over the split between the two columns.
Stephen
do you have a screenshot, on how it should look like? it's hard to imagine what you are trying to achieve...
xXx
Certainly, I do apologise. Look [here](http://i.imgur.com/l3ltL.png) (and I will add it to my question).
Stephen
Thank you, this solution worked well. Since the main title ("Details") will rarely if ever change, it should be okay that it has a hard-coded margin. I also managed to make the blank `<td>` s unselectable - at least in most browsers. It's a pity that browsers have such poor standards for text selectability - it shouldn't require 3 different CSS properties and some Javascript (for IE) to do this!
Stephen