I received a lot of messages from some readers who accuse me to be a "CSS fanatic" :). They asked to me why I spend my time coding an "unnatural" CSS structure instead of using a more simple <table> tag to design a form with labels and inputs text...
Ok,
I admit it: I love CSS, but I am not a "fanatic"! I try only to find
some interesting solutions about how to use them. In fact, in my
defence, some weeks ago I wrote a post exactly about this topic (Table's anatomy: why tables are not so bad) after my friend Jason asked to me: "I want to use CSS instead of a table to display a matrix with some values. How can I do?"
My answer - shortly - was: In
general, tables are not the devil and if used in the correct way (for
example to display tabular data), can be more functional and simpler to
design than CSS pseudo-alternatives.
How I said, in
similar situations, I work with tables but oneslty if I can find an
"elegant" alternative to design page elements "table-like" (for example
a form with labels and input fields) using CSS instead of <table>
tag I prefer using only CSS. I think the code is more clean and more
flexible.
Then, tables or pure CSS code? Let me say: "It depens on..."
Probably a solution which attunes anyone will be using the new CSS3 Multi-Column Module, but we have to wait for a final release of CSS3 specifications
and a full integration with all new generation browser. A typical
Multi-Column structure with CSS3 can be designed with the following
code:
...where each <p> element into myTable layer will be a column with a width equal to 200px. You can define also an header, for example using <h1> tag like in this example:
...and HTML code is:
How you can see, it's really more clear and less "expensive" than using <table> tag or a pseudo-table designed with CSS2.
About CSS3 Multi-Column I found an interesting post on A List Apart which I suggest to read, or you can also take a look here for another detailed explanation.
And now... are you a CSS fanatic? Leave your comment!
Ok,
I admit it: I love CSS, but I am not a "fanatic"! I try only to find
some interesting solutions about how to use them. In fact, in my
defence, some weeks ago I wrote a post exactly about this topic (Table's anatomy: why tables are not so bad) after my friend Jason asked to me: "I want to use CSS instead of a table to display a matrix with some values. How can I do?"
My answer - shortly - was: In
general, tables are not the devil and if used in the correct way (for
example to display tabular data), can be more functional and simpler to
design than CSS pseudo-alternatives.
How I said, in
similar situations, I work with tables but oneslty if I can find an
"elegant" alternative to design page elements "table-like" (for example
a form with labels and input fields) using CSS instead of <table>
tag I prefer using only CSS. I think the code is more clean and more
flexible.
Then, tables or pure CSS code? Let me say: "It depens on..."
Probably a solution which attunes anyone will be using the new CSS3 Multi-Column Module, but we have to wait for a final release of CSS3 specifications
and a full integration with all new generation browser. A typical
Multi-Column structure with CSS3 can be designed with the following
code:
div.myTable{
width:600px;
column-count:3;
column-width:200px;
}
div.myTable h1{column-span:all;}
width:600px;
column-count:3;
column-width:200px;
}
div.myTable h1{column-span:all;}
...where each <p> element into myTable layer will be a column with a width equal to 200px. You can define also an header, for example using <h1> tag like in this example:
...and HTML code is:
<div class="mytable">
<h1>Column headline</h1>
<p> ... First column: some content here... </p>
<p> ... Second column: some content here... </p>
<p> ... Third column: some content here... </p>
</div>
<h1>Column headline</h1>
<p> ... First column: some content here... </p>
<p> ... Second column: some content here... </p>
<p> ... Third column: some content here... </p>
</div>
How you can see, it's really more clear and less "expensive" than using <table> tag or a pseudo-table designed with CSS2.
About CSS3 Multi-Column I found an interesting post on A List Apart which I suggest to read, or you can also take a look here for another detailed explanation.
And now... are you a CSS fanatic? Leave your comment!
