PDA

View Full Version : Displaying tabular data



nighthawk
07-16-2009, 07:53 AM
I am currently developing a PHP email client, and need to create an inbox view. The design of the site is purely done with DIVs and CSS, and is designed to be fluid, expanding to 100% of the screen size. I have a single DIV down the left as a navigation bar, and a main DIV to the right of this.

I was intending on using a table to display the list of emails, with a seperate row per email and contained in the main DIV. However the table does not play nice with my DIVs, setting the table to 100% width sets it to 100% screen width, and not 100% of the containing DIV.

Lookign around the net various sites suggest you cannot use tables if you are using CSS, as they use incompatible formatting systems and misbehave as they are doing in my case.

If this is the case - how exactly do you display tabular data when using CSS for formatting?

vangogh
07-16-2009, 10:43 AM
You should be able to display a table within a div layout. It's hard to know what the problem might be without seeing any code. Is there any way to post some of the code or maybe send it in a PM if you don't want it public.

I wouldn't think you'd need to set the width to be 100%. It should actually default there.

There's no reason why something like this shouldn't work



<div>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>

I've used something similar to the above many, many times. If you can get me some code or point me somewhere online where I can look, I'll be happy to see if I can figure out what's wrong.

nighthawk
07-16-2009, 02:45 PM
<html>
<head>
<title>Mail Client</title>
<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id='page'>
<div id='top'>top of page</div>
<div id='left'>left</div>
<div id='main'>
<table width=100% >
<tr><th>&nbsp;</th><th>From</th><th>Subject</th><th>Date</th></tr>
<tr><td><input type='checkbox'/></td><td>Travelodge</td><td>Fancy a festival? Leave the tent behind</td><td>8:32 pm</td></tr>
</table>
</div>
</div>
</body>
</html>


CSS:


body
{

background-color: #333333;
font-style: verdana;
font-size: 12px;
}

#top
{
background-color: #ffffff;
width: 100%;
}

#left
{
float: left;
width: 200px;
}

#main
{
background-color: #ffffff;
}

table
{
background-color: #cccccc;
}

th
{
font-size: 12px;
background-color: #cccccc;
}

td
{
background-color: #ffffff;
}

As you can see (at least in firefox), the table sets itself to the size of the browser, but offset by the width of the left DIV. Removing the "width=100%" causes the table to take up the size required to show the text within it.

I would like the table to be the width of the DIV it is contained within.

vangogh
07-16-2009, 04:29 PM
I think all you need to do is specify a width on #main. Right now you're telling the table to have a width of 100&#37;, but 100% of what. It has to go up the chain through it's parent container, which is div#main, but finds no width specified. So it goes up the chain one more time to div#page and again no specific width. Once more up the chain takes it to body which will have the window size as a width by default.

If you specify a width on #main the table should use that value as 100%. Alternately you could set a px width on the table itself instead of using the %. One last option would be to use something less than 100%, maybe 80%. This will still give you the same problem depending on how wide the browser is open, but it'll work in more cases than 100%

nighthawk
07-16-2009, 04:42 PM
thanks vangogh - that kind of works.

If I set the left div to have a width of 20% and the main DIV to 80% then it works fine and the table occupies the full width of the DIV. However I want to keep the left DIV a fixed width if possible. If I set left=200px and main=100% then I get the same situation as when I dont specify a width at all on main.

vangogh
07-16-2009, 05:50 PM
The problem is really in trying to create the fluid layout. You might just try setting a px width on the table. It won't stretch the full width of your #main div, but you can still have that div be fluid to expand to the window edge.

What you're seeing is one of the reasons I moved away from fully fluid designs that try to fill the entire window. What I do now is center the page at a fixed width for the most likely resolution. I might then set a background color on the body or even a pattern. Something I'm experimenting with now is using a fluid grid (http://www.alistapart.com/articles/fluidgrids). The design starts out centered and fixed, but can easily expand or contract based on the font-size. It becomes more elastic, while still being fixed relatively.

nighthawk
07-16-2009, 06:04 PM
thanks for the tips vangogh. Like you, I always tend to go for fixed width pages, I like to have control over how they look, plus I find in most cases they look better. Fluid design is fine for forums, but not for most business sites with little content.

However this is one of the few times I think a fluid design is needed, and as such I dont want to fix the size of the table, besides the DIV will only contain that table, so its pointless fixing one and letting the other grow.

I guess I will just have to live with the left hand menu growing in size also.

Thanks again for the tips.

vangogh
07-16-2009, 10:02 PM
Glad I could help. Hopefully having both columns fluid won't be a problem. I can understand why it doesn't make sense to fix the table width.

One last thought. Could you fix the table within the main column and let the space between the two columns be fluid? It's still leaving some empty space, but it might be workable.