April 29, 2008
I can’t stand articles that make you read two pages before getting to the point. With that in mind, let’s look at how I think css code should be organized.
In a nutshell: css code should be divided up into at least 4 separate pages:
- page-structure.css
- text-styles.css
- misc.css
- ie-styles.css
How about we call this the ‘killer’ css structure.
🙂
Before I go into the details of what each css file contains (if it’s not already obvious), I want to quickly cover WHY you might want to use this basic css structure for all your websites.
read more
January 10, 2008
A while back a wrote a JavaScript script that automatically styled an HTML table. In a nutshell, the script automatically changes the background color of every 2nd row in an HTML table.
Anyway, someone recently sent me an updated version of the script. You will probably want to read the original article before looking at these changes.
From the email:
I did some simplification on the code for zebrastripes. I don’t bother with the last array bit because TR elements have the bgColor attribute.
trs[i].bgColor = ( i & 1 ) ? stripe_colour_even : stripe_colour_odd;
Greetings,
tarjei
The complete function:
function stripe_table(id_name) {
var my_table = document.getElementById(id_name);
/* For debugging */
if ( !my_table ) {
alert(“The ID ” + id_name + ” is not found.”);
return;
}
/* Table may have more than one tbody element */
var tbodies = my_table.getElementsByTagName(“tbody”);
for (var cnt = 0; cnt < tbodies.length; cnt++) {
var trs = tbodies[ cnt ].getElementsByTagName("tr");
/* Walk table row for row */
for (var i = 0; i < trs.length; i++) {
if (! hasClass(trs[i]) && ! trs[i].style.backgroundColor) {
trs[i].bgColor = ( i & 1 ) ? stripe_colour_even : stripe_colour_odd;
}
}
}
}
}
CIAO.
Stefan Mischook
read more
February 19, 2005
NOTE: This article is theoretical – CSS tables are not supported by the browsers yet, and cannot be used. I wrote this article to make a few points and to expose people to lessons learned in software development: that grids are an excellent way to layout user interfaces.
Stefan
–
Grid layout patterns are commonly used in creating software interfaces – in web design we call them ‘tables’.
But today HTML table based layout is generally frowned upon because:
- HTML tables render/display content in a fixed format/style that might not display properly in certain types of browsers.
- Tables semantic meaning is thought to represent tabular data – like a spread sheet. Thus using them for page level layout is just wrong … gosh darn it!
There are other reasons why some web designers will say HTML tables suck:
- HTML tables cause code to be bloated and thus pages will take longer to download.
- HTML tables will make your website less search engine friendly.
- HTML tables will make your websites less accessible.
The last 3 points are myths and should be ignored – I covered that in other articles.
That being said, the first point about tables imposing a fixed format/style (where formatting and structure are intertwined – that’s bad,) is very real and very important. It is so important in fact, that I will do what I can to avoid table based layout despite the extra work and problems this can cause.
It’s a terrible shame
Using a grid/table to create UI’s is intuitive, too bad that table based layouts are so controversial … but there maybe is a light at the end of the web UI tunnel: CSS table layouts.
What the heck are CSS tables?
From the W3C:
‘The CSS table model is based on the HTML 4.0 table model, in which the structure of a table closely parallels the visual layout of the table.’
Now in English:
CSS tables are just a set of CSS attributes that you can apply to (probably) div tags to create a ‘table’. Check out this code snippet and things should clear up:
<div class=”table”>
<div class=”row”>
<div class=”cell”>
<p>Yallow!</p>
</div>
</div>
</div>
This is an official W3C specification, I’m not inventing anything here!
So why invent CSS tables when we have HTML tables?
The answer is simple young grasshoppers: to gain the advantage of table based layout while avoiding the problems (mentioned above) with HTML tables:
- HTML tables format content in a fixed structure that might not render properly in certain browsers.
- Tables semantic meaning is thought to represent tabular data – like a spread sheet. Thus using them for page level layout is just wrong.
CSS tables can’t be used in any browser today, so why mention them?
I have two reasons why I wrote this article:
- To educate people of this long term possibility and maybe to start stirring things up – it would nice to have this web design tool.
- To make a point about grid based layouts: they have merit and should be considered.
Stefan Mischook
read more
