SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Grouped Table Columns

    I'm not sure if this is the right forum for this question, but it's probably a good beginning.

    I have a table with several columns that can in turn be grouped into several categories, like People and Geography. For example:

    Population | Birth Rate | Death Rate

    Size | Highest Elevation | Lowest Elevation

    So we have a seven-column table, the first column listing the name of a country or state, and the other six columns listing the data above. I'd like to separate the People and Geography sections with a thin black line.

    I can do this with a CSS code like this:

    td.deathrate { border-right: 1px solid #000; }

    However, it gets awfully confusing, as I'm juggling a lot of balls here. I have to format some table cells to align left, center or right, and I have to give other cells various background colors.

    I thought I remembered reading an article about advanced table design that discussed a way of grouping columns somehow. I can't recall if it allows you to surround a group of cells or columns with a border or not.

    I am aware of a colgroup tag that allows you to apply a style to every cell in a column. It's a wonderful trick, but, unfortunately, it doesn't work in Firefox.

    Any tips? Thanks.

  2. #2
    Non-Member c1vineoflife's Avatar
    Join Date
    Sep 2004
    Location
    CA
    Posts
    460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmmm, I am quite confused about what you are exactly going for...but here goes:

    You could always nest tables. And do something like this:

    Code:
    <html>
    <head>
    <title>
    
    </title>
    
    <style type="text/css">
    
    table td {
    	width: 120px;
    	height: 60px;
    	text-align: center;
    	vertical-align: middle;
    }
    
    .stats {
    	border: 1px solid #000;
    	width: 360px;
    }
    
    .wholeArea {
    	border-bottom: 1px dashed #324bad;
    }
    
    .place {
    	font-weight: bold;
    	text-align: left;
    	vertical-align: top;
    }
    
    .geography td {
    	border-top: 1px solid #000;
    }
    
    </style>
    
    </head>
    <body>
    
    <table cellspacing="0" cellpadding="2" class="wholeArea">
     <tr class="population">
      <td class="place">
    Alaska
      </td>
      <td>
    Population
      </td>
      <td>
    Birthrate
      </td>
      <td>
    Deathrate
      </td>
     </tr>
     <tr>
      <td>
      </td>
      <td colspan="3">
       <table class="stats">
        <tr>
         <td width="120">
    897234
         </td>
         <td>
    1 per 8 seconds
         </td>
         <td>
    2 per 8 seconds
         </td>
        </tr>
       </table>
      </td>
     </tr>
     <tr class="geography">
      <td></td>
      <td>
    size
      </td>
      <td>
    highest elevation
      </td>
      <td>
    lowest elevation
      </td>
     </tr>
     <tr>
      <td>
      </td>
      <td colspan="3">
       <table class="stats">
        <tr>
         <td width="120">
    32098 square miles
         </td>
         <td>
    6000 ft
         </td>
         <td>
    -100 ft
         </td>
        </tr>
       </table>
      </td>
     </tr>
    </table>
    
    </body>
    </html>
    I'm sorry, that's probably a horrible example. But I thought I would try. Also...nesting tables can get very complicated and your code can get really murky and difficult to read. Well, I hope that helps a little.

  3. #3
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I guess I'll have to do it with CSS. Thanks for the tip.

  4. #4
    Non-Member c1vineoflife's Avatar
    Join Date
    Sep 2004
    Location
    CA
    Posts
    460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Welcome. And I almost forgot. There is a way to group columns: "colgroup"

    Here are some tutorials:

    1. http://www.abiglime.com/webmaster/re...s/colgroup.htm

    2. http://www.devguru.com/Technologies/..._colgroup.html

    Here are some examples:
    1. http://www.mackers.com/projects/sigh...p-sample1.html

    I wish I could have actually found some decent tutorials. And I hope that helps. It looks like it will.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •