css table

**flann** · 08-07-2007 11:46 AM

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.

**thamba** · 08-07-2007 12:48 PM

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>

**flann** · 08-07-2007 01:11 PM

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?

**thamba** · 08-07-2007 01:26 PM

read this good document regarding that issue:
http://www.manisheriar.com/holygrail/index.htm

**ray326** · 08-08-2007 12:33 AM

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.

**canon_006** · 08-08-2007 03:43 AM

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

**WebJoel** · 08-08-2007 08:06 AM

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

**flann** · 08-10-2007 01:39 PM

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.

**ray326** · 08-10-2007 03:28 PM

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: css table

Thread Tools

Display

css table

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions