Page 1 of 1

HTML Table Layout

Posted: Mon Dec 08, 2008 6:53 am
by mintedjo
Hi guys!

I need all the cells in a table to be the same size.
Some cells have a lot of writing in them and some only a little tiny bit, but I need them to all be the same height and width. I don't know how... Can anybody help?
Oh uhmm, all the information in each cell needs to be visible and readable.

Thanks for any replies.
Joe

Re: HTML Table Layout

Posted: Mon Dec 08, 2008 6:58 am
by papa

Re: HTML Table Layout

Posted: Mon Dec 08, 2008 7:15 am
by mintedjo
Care to elaborate on that?

"table-layout: fixed" = fail

Re: HTML Table Layout

Posted: Mon Dec 08, 2008 7:31 am
by papa
http://w3schools.com/css/css_table.asp

Do you know html and css?

Look for width and height properties and you will be able to design the table layout you are looking for.

Width works good without css but height for cells is not as easy.

Re: HTML Table Layout

Posted: Mon Dec 08, 2008 7:56 am
by mintedjo
papa wrote:Do you know html and css?
I would usually answer yes, but i`m not sure how to do this thing.
I've tried setting heights with css and either I'm doing it wrong or it doesn't work. xD

I'm not one to ask for a solution, i'd much rather work it out myself but I just dont know what to do :-S

Could you (or anybody else) explain how to do it or perhaps post an example?

Thanks again.
Joe

Re: HTML Table Layout

Posted: Mon Dec 08, 2008 8:36 am
by papa

Code: Select all

 
<head>
 
<title>My Table</title>
    
<style>
.column {
width: 100px;
height: 100px;
}
</style>
 
</head>
 
<body>
 
<table border="1" cellpadding="0" cellspacing="0">
<tr>
 <td class="column">column 1</td>
 <td class="column">column 1</td>
</tr>
<tr>
 <td class="column">column 1</td>
 <td class="column">column 1</td>
</tr>
</table>
 
</body>
 
</html>

Re: HTML Table Layout

Posted: Mon Dec 08, 2008 9:01 am
by mintedjo
From your example it looks like you have to code the sizes manually, i've already tried this and it doesn't quite give me what I'm after.
The idea isnt to make big boxes for everything by default.
Cells should be as big as the biggest cell when the size of the biggest cell is determined by its content.
eg.
If i had lots of cells with just "x" in them I wouldnt want 100px by 100px cells. They should all just be big enough to fit in "x".
If i had a table full of "x" and "hex" then the cells should all be just big enough to fit in "hex"

I think this makes things a bit clearer... but it might not. :-S

Re: HTML Table Layout

Posted: Mon Dec 08, 2008 9:10 am
by papa
Do you get the content dynamically?

There is probably a better solution but you can count the chars in each column and display x in width and height depending on how much information the column with the most content has.

Re: HTML Table Layout

Posted: Mon Dec 08, 2008 10:35 am
by mintedjo
papa wrote:Do you get the content dynamically?
Yes the content comes from the server after the user requests some data.
papa wrote:There is probably a better solution...
I hope so... Thanks for your input anyway. Perhaps some crazy js style manipulation will be needed.