17 replies [Last post]
Xyem
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2006-02-24
Posts: 8
Points: 0

I have a website that uses tables to display information ( shock horror Smile ) and I want the cells to all be the same width, across all the tables ( so it would just be the td tag ).

An example should make it clear what I want.

At the moment I have a table with 3 cells in it and I want them to all the same width ( ie. 33% ) then the extra 1% will get distributed amongst them so though they won't be perfectly the same size ( distribution seems proportional to length of text in cell ) it would be negligible. Which I can do with:

td { width: 33%; }

However, I also have tables with 2, 4, 5 etc. cells in and I want the same behaviour, but I cannot find a way to make CSS show the cells to be {100/no. of columns}% wide, which is what I want.

Does anyone know how to do this?
In addition, the solution/s must work on Mozilla Firefox, other browsers are a bonus Smile

Thanks

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 7 weeks 1 day ago
Joined: 2004-06-30
Posts: 9674
Points: 810

Consistant width on table cells

Cannot be done in CSS alone, you'd need some sort of scripting language to count up the <td>s, divied 100 by it, and edit the CSS accordingly.

Verschwindende wrote:
  • CSS doesn't make pies

Xyem
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2006-02-24
Posts: 8
Points: 0

Consistant width on table cells

Might as well put the widths in the HTML then.. Which I get the feeling I will have to do!

Wanted to avoid putting anything to do with layout in the HTML, so skinners could have a large degree of control over how the site appears.

Thanks for your help.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 11 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Re: Consistant width on table cells

Xyem wrote:
I have a website that uses tables to display information ( shock horror Smile )

No shock or horror at all if it's tabular data. That's what tables are for. [-X

We tend to frown on using tables to layout content that isn't naturally tabular. But if, for example, you are displaying rows from a database table, then using a table would be the only right way to do it.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Xyem
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2006-02-24
Posts: 8
Points: 0

Consistant width on table cells

I know but I am already learning 3 languages and I don't want to start learning CSS and tables allow me to lay it out exactly how I want it. Aside from the table width thing but I have just put the width in the HTML, no biggie.

Maybe when I get the first version done I'll post a link. Smile

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Consistant width on table cells

You could have problems with tables as browsers do have a fair bit of freedoom to vary the cell widths depending on content. The rules are quite complex and when the cell widths and cell content widths and table widths don't match the browser can resolve the conundrum as it chooses.

If you are generating the data from scripts you should be able to easily count the number of cells across a row and set a class on the table. It can't be that difficult to have a few or ten table classes in your CSS.

table.x_3 td {width: 33%;}
table.x_4 td {width: 25%;}
table.x_5 td {width: 20%;}
...

If you are doing something for skinners, you should really try to make the html structure as independent of the content as possible. E.g. give them a template and CSS and simply plonk the data into the template using some form of variable substitution.

E.g. If you were to take a look at Mambo/Joomla![1] you would see a an apparently completely skinnable CMS, however much of the html structure is deeply embedded in the system itself making it difficult and problematic to have true display/design freedom.

[1] There are modules/plugins that do provide ways around this, ideally they shouldn't be necessary - if the underlying design was suitable.

Xyem
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2006-02-24
Posts: 8
Points: 0

Consistant width on table cells

If anyone wants to give me a link to some CSS Layout tutorials or something, I will take a look and possibly switch from tables to CSS for layout..

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Consistant width on table cells

Google is your friend Wink

w3schools and HTMLDog are well regarded.

Xyem
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2006-02-24
Posts: 8
Points: 0

Consistant width on table cells

I've found a few things about using CSS for layouts but to be honest I can't see how it's any better than before. In one page alone, halfway down, I've read about hacks here and there.

So to me it just seems as bad and invalid ( purity-wise ) as everything else. For instance one example exploits a bug in IE5 ( I think ). How is this moving forward from exploiting browser bugs in HTML markup parsing?

And when you read "Each browser will break it a different way" doesn't really make me want to use CSS, when tables will generally break layout the same way..

So the score is 'Tables 1 - 0 CSS'

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Consistant width on table cells

Xyem wrote:
So the score is 'Tables 1 - 0 CSS'

Sounds like your playing in the lower divisions.

Xyem
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2006-02-24
Posts: 8
Points: 0

Consistant width on table cells

And if CSS loses in the lower divisions where things are simple it doesn't bode well for the more complicated things Smile

Anonymous
Anonymous's picture
Guru

Consistant width on table cells

Xyem wrote:
And if CSS loses in the lower divisions where things are simple it doesn't bode well for the more complicated things Smile
Yes, whew. Good thing you showed up. I was all caught up in listening to those fools Zeldman and Meyer. I look forward to reading your books on the subject.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 7 weeks 1 day ago
Joined: 2004-06-30
Posts: 9674
Points: 810

Consistant width on table cells

CSS doesn't break layouts, IE does.

If IE never existed, there would be NO hacks, and CSS would be used more widely.

Verschwindende wrote:
  • CSS doesn't make pies

Xyem
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2006-02-24
Posts: 8
Points: 0

Consistant width on table cells

Quote:
Yes, whew. Good thing you showed up. I was all caught up in listening to those fools Zeldman and Meyer. I look forward to reading your books on the subject.

:? What?

Even though browsers like Mozilla Firefox follow standards, don't they still not differ in rendering due to discrepancies in interpretation? I was actually having this argument with my Dad. He thinks there will never be a "standard" so all websites display the same. I was telling him there is and it's IE/Microsoft's fault most sites don't follow it. My sites are all made to display correctly in Firefox, if people use IE and it doesn't look right, they have the problem, not me! Smile

Perhaps a rather mean way to be but if they used something that actually followed the rules they wouldn't have the problem Tongue

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Consistant width on table cells

Xyem wrote:
And if CSS loses in the lower divisions where things are simple it doesn't bode well for the more complicated things Smile

The game & its rules stay the same, its the players that vary Wink

CSS may not be exactly cutting edge. But it is moving forward. Browsers aren't perfect, they need to improve to keep up. That is the nature of the industry. The industry isn't driven so much by standards, but by people and ideas that catch on.

CSS is an idea that has caught on for many people. You need to decide whether or not the ideas behind it - separation of presentation from content - are worth it. No one here is going to bother too much convincing you one way or the other. What people here will do is help you to overcome the hurdles you come across in trying to apply CSS.

To your last point, I don't believe there are so many differences of interpretation between browsers as more or less bugs. Though if you are aware of debates concerning interpretation of the spec feel free to share them.

Anonymous
Anonymous's picture
Guru

Consistant width on table cells

Xyem wrote:
He thinks there will never be a "standard" so all websites display the same.
The standard already exists. It is now up to IE to catch up to it. Smile

Xyem
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2006-02-24
Posts: 8
Points: 0

Consistant width on table cells

Quote:
The standard already exists. It is now up to IE to catch up to it.

Sorry I find that amusing for some reason Laughing out loud ( That emoticon is scary! )

Quote:
You need to decide whether or not the ideas behind it - separation of presentation from content - are worth it.

I do, it is an excellent idea. However, I put layout and content in one place ( the HTML ) and presentation ( colours, margins etc. ) in CSS..

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Consistant width on table cells

Half-measures won't get you anywhere Wink

Layout is part of the presentation. e.g. mobile phone or PDA browsing compared to your PC browser.