www.webdeveloper.com
Results 1 to 9 of 9

Thread: css table

  1. #1
    Join Date
    Aug 2007
    Posts
    63

    css table

    I'm trying to break my habit of using tables and I'm not sure how I would make a table without making it with a table.

    How would I do this in css and allow for the cells to all line up and for them to be able to grow with dynamic data?

    PHP Code:
    <table>
     <
    tr>
      <
    th>Name</th>
      <
    th>Address</th>
      <
    th>City</th>
     </
    tr>
     <
    tr>
      <
    td>Bob</td>
      <
    td>123 Main street</td>
      <
    td>Minneapolis</td>
      <
    td>MN</td>
     </
    tr>
     <
    tr>
      <
    td>Suzy</td>
      <
    td>123 Main street</td>
      <
    td>Chicago</td>
      <
    td>IL</td>
     </
    tr>
    </
    table
    Thanks for your help.

  2. #2
    Join Date
    Jun 2007
    Posts
    48
    Heres an example,

    <html>
    <head>
    <style type="text/css">
    .row{
    clear: both;
    }
    .cell{
    width: 100px;
    float: left;
    }
    </style>
    </head>

    <body>

    <div id="main">
    <div class="row">
    <div class="cell">Name</div>
    <div class="cell">Address</div>
    <div class="cell">City</div>
    </div>
    <div class="row">
    <div class="cell">Bob</div>
    <div class="cell">Add1</div>
    <div class="cell">City1</div>
    </div>
    <div class="row">
    <div class="cell">Suzy</div>
    <div class="cell">Add2</div>
    <div class="cell">City2</div>
    </div>
    </div>

    </body>
    </html>

  3. #3
    Join Date
    Aug 2007
    Posts
    63
    thanks for the reply, however how do I make it so that the cells grow based on the text inside them and still make the cells line up?

  4. #4
    Join Date
    Jun 2007
    Posts
    48
    read this good document regarding that issue:
    http://www.manisheriar.com/holygrail/index.htm

  5. #5
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    That SHOULD be marked up as a table because it's tabular data. Tables are not to be avoided at all cost, they are to be avoided for overall page layouts.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  6. #6
    Join Date
    Aug 2007
    Posts
    2
    Hi,

    Please try this css code:

    <style type="text/css">
    th {
    padding:5px;
    text-align:left;
    }
    td {
    padding:5px;
    text-align:left;
    }
    </style>

    I think, you will get desire result.

    Bye

  7. #7
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Adding to & agreeing with Ray:, -this is tabular data the way you have it. It is semantically correct & accessible to assistive technologies.
    Myself, -I would leave it a table.

    If you want to make it look nice (like background-color of cell on-hover to change and such), check out *htc

    http://www.vladdy.net/demos/iepseudoclassesfix.html
    I build for: Firefox and tweak for IE

  8. #8
    Join Date
    Aug 2007
    Posts
    63
    What my overall goal for this is to have hidden rows between each row where I can put more information. I want the user to be able to click on a row and expand the hidden row underneath it to view a lot more information about that particular row. I tried using the show/hide function that I found and apply it to hidding each row, which worked, however it left a place for the hidden row.

  9. #9
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    This is part Javascript, part CSS but here's a bit of what I do on one app.
    HTML Code:
    <script type="text/javascript">
    function doFilter(cb)
    {
      var rows = document.getElementsByTagName("tr");
      var tr;
      
      for (i = 0; i < rows.length; i++)
      {
        tr = rows[i];
        if (tr.className=="complete") {
            if (cb.checked == true)
                tr.style.display="none";
            else
                tr.style.display="";
        }
      }
    }
    </script>
    <!-- called like so -->
    <input type="checkbox" name="showIncomplete" id="showIncomplete" onclick="doFilter(this)">
    You could do a variation on that.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles