I have a website that uses tables to display information ( shock horror ) 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
Thanks
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.
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.
Re: Consistant width on table cells
I have a website that uses tables to display information ( shock horror)
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.
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.
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.
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..
Consistant width on table cells
Google is your friend
w3schools and HTMLDog are well regarded.
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'
Consistant width on table cells
So the score is 'Tables 1 - 0 CSS'
Sounds like your playing in the lower divisions.
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
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
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.
Consistant width on table cells
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!
Perhaps a rather mean way to be but if they used something that actually followed the rules they wouldn't have the problem
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
The game & its rules stay the same, its the players that vary
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.
Consistant width on table cells
He thinks there will never be a "standard" so all websites display the same.

Consistant width on table cells
The standard already exists. It is now up to IE to catch up to it.
Sorry I find that amusing for some reason ( That emoticon is scary! )
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..
Consistant width on table cells
Half-measures won't get you anywhere
Layout is part of the presentation. e.g. mobile phone or PDA browsing compared to your PC browser.