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.

  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

  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.

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