HTML Table Layout

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
mintedjo
Forum Contributor
Posts: 153
Joined: Wed Nov 19, 2008 6:23 am

HTML Table Layout

Post 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
User avatar
papa
Forum Regular
Posts: 958
Joined: Wed Aug 27, 2008 3:36 am
Location: Sweden/Sthlm

Re: HTML Table Layout

Post by papa »

mintedjo
Forum Contributor
Posts: 153
Joined: Wed Nov 19, 2008 6:23 am

Re: HTML Table Layout

Post by mintedjo »

Care to elaborate on that?

"table-layout: fixed" = fail
User avatar
papa
Forum Regular
Posts: 958
Joined: Wed Aug 27, 2008 3:36 am
Location: Sweden/Sthlm

Re: HTML Table Layout

Post 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.
mintedjo
Forum Contributor
Posts: 153
Joined: Wed Nov 19, 2008 6:23 am

Re: HTML Table Layout

Post 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
User avatar
papa
Forum Regular
Posts: 958
Joined: Wed Aug 27, 2008 3:36 am
Location: Sweden/Sthlm

Re: HTML Table Layout

Post 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>
mintedjo
Forum Contributor
Posts: 153
Joined: Wed Nov 19, 2008 6:23 am

Re: HTML Table Layout

Post 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
User avatar
papa
Forum Regular
Posts: 958
Joined: Wed Aug 27, 2008 3:36 am
Location: Sweden/Sthlm

Re: HTML Table Layout

Post 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.
mintedjo
Forum Contributor
Posts: 153
Joined: Wed Nov 19, 2008 6:23 am

Re: HTML Table Layout

Post 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.
Post Reply