Tableless Web Page Design Using CSS
Article looks at how you can design web pages using just CSS and no tables and why CSS is the better and smarter choice for web pages.
===
Tables have always been used heavily in designing Web pages. While W3C maintains that tables are meant for a specific purpose – displaying tabulated data in the browsers, developers have been using them for yet another novel purpose, which is to create formatted forms in the browsers.
For example, suppose we want to create a user registration form that expects the user to enter her personal details, such as name, address, contact numbers, and so on. Without any hesitation, most of us would create an HTML page that would have a table inside the form to tabulate the form details. For instance, we can perhaps write code similar to this:
<tr>
<th>Provide user details below</th>
</tr>
<tr /> <tr />
<tr>
<td>User Name:</td>
<td><input type =”text” name =”userName” /></td>
</tr>
<tr>
<td>Address:</td>
<td><input type =”text” name =”address” /></td>
</tr>
<tr>
<td>City:</td>
<td><input type =”text” name =”city” /></td>
</tr>
<tr>
<td>Pin code:</td>
<td><input type =”text” name =”pin” /></td>
</tr>
<tr>
<td>Contact number:</td>
<td><input type =”text” name =”contact” /></td>
</tr>
</table>
This will create a table in the browser, which looks as follows:
While this may seem to be a perfectly good way of creating tables in HTML for formatting Web pages, it is not so! Tables are not meant for this purpose in HTML. Tables should only be used for formatting tabular data. CSS provides very powerful tools for avoiding tables, and yet creating really beautiful Web pages. As developers, we often tend to ignore this. But remember that we are inevitably linked to the approach taken by the Web designers, since our server-side code (and even client-side scripting and Ajax code) needs to be in synch with what they are doing.
How should we design this type of screen without using tables, then? Well, we need to dig deeper into some of the more interesting but very less-used CSS features. But before that, let us first list down the reasons why we should be doing this in the first place:
- W3C recommends the usage of table-less designs for formatting of form data.
- All browsers support CSS extensively for formatting, so we can safely use it as well.
- Global changes can be made more easily if we use CSS instead of hard coding formatting instructions in the HTML page.
- For people with special needs (visually challenged, for example), using CSS makes the pages standardized. If we use tables, instead, these pages are not rendered to them appropriately, violating several standards.
- Search engines can find and go through our Web pages with far more ease.
- Pages are rendered in the browser much faster. This is because unless we specify the height and width of our table elements, all the text in the table has to be loaded first, and then the table would size/adjust itself appropriately on the browser. The advantage with this approach is that tables can be resized easily – but at the cost of the loading speed, making it very slow.
- Tables do not print well. So, we need to create a separate printable version of our page.
Now let us understand how we can modify our page to have a great look without using a table. Firstly, let us take a look at the HTML code.
<head>
<link rel=”stylesheet” href=”1_1.css” />
<title>Tableless CSS</title>
</head>
<body>
<form action=”#”>
<fieldset>
<legend>User Registration Form</legend>
<h4>Provide user details below</h4>
<p><label for=”name”>User Name:</label> <input type=”text” id=”name” /></p>
<p><label for=”address”>Address:</label> <input type=”text” id=”address” /></p>
<p><label for=”city”>City:</label> <input type=”text” id=”city” /><br /></p>
<p><label for=”pin”>Pin code:</label> <input type=”text” id=”pin” /><br /></p>
<p><label for=”contact”>Contact number:</label> <input type=”text” id=”contact” /><br /></p>
</fieldset>
</form>
</body>
</html>
As we can see in the code above, there is not a single line of table-related formatting. It is a simple HTML page without any formatting instructions (barring the basic headings), at all. We should also notice that it also has a reference to an external CSS file.
Let us now take a look at the output.
The output should surprise us. Without using any formatting instructions, we have been able to create a very good-looking form. The whole crux, therefore, lies in the CSS. It is reproduced below.
{
width: 15em;
float: left;
text-align: left;
margin-right: 0.5em;
display: block;
color: #990000;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
input
{
color: #781351;
background: #CCCCCC;
border: 1px solid #781351;
}
legend
{
color: #fff;
background: #ffa20c;
border: 1px solid #781351;
padding: 2px 6px;
font-weight: bold;
font-family: sans-serif
}
Among other things, we should pay attention to the fieldset tag. It specifies the following:
{
border: 1px solid #781351;
width: 25em;
padding : 0.5em 1em;
}
As the name suggests, the border property takes care of the border, so we will not talk about it. The width tag specifies the horizontal space for the contents of the HTML form. The padding tag specifies the space between the border and the contents of an element. Other tags are quite common and self-explanatory.
In conclusion, we can say that it is time we take a relook at the way we have been designing our Web pages and forms. We must look at and adhere to the upcoming standards. That would help us keep our web pages in line with those standards, and would also guarantee ease of maintenance and upward compatibility.
waoh thanks for that tutorial you are the best you got my vote, from this i gain something.
I’m an old-time raw html developer (text editor only), and have been educating myself on tableless design. As I see it, both methods have their place, depending on the usage.
If I’m developing for a dedicated site, by all means use all means available to simplify the presentation and maintenance. And of course use server-side includes so as to isolate content without regard to site presentation and make style changes ripple through all pages. It goes without saying that the results should display the same on all browsers.
If I’m developing for personal use on the client — pages that I might attach to an email — then portability is foremost, and everything necessary to render the page properly is contained on the page itself (including inline Javascript and minor style declarations). Links of course are made global.
In both cases, beware of the resulting “clutter” that use of a CMS often imposes over doing the page manually.
Good article
Thank you for sharing this very useful tip.
Nice Tutorials,Thanks
I do think that CSS is a much better option. If later you need a redesign then you do not need to touch any of the html or php files, just edit your separate css files and you are good. One step closer to MVC for html.
I do think that CSS is a much better option. If later you need a redesign then you do not need to touch any of the html or php files, just edit your separate css files and you are good. One step closer to MVC for html.
Do people still need to be convinced in 2009 ?
Do people still need to be convinced in 2009 ?
Oh, and it is not realy css vs tables, rather than divs vs tables.
As a matter of fact, the comparison in your article is not fair. You can achieve exactly the same look as your second picture by using tables + style sheets.
Oh, and it is not realy css vs tables, rather than divs vs tables.
As a matter of fact, the comparison in your article is not fair. You can achieve exactly the same look as your second picture by using tables + style sheets.
> While W3C maintains that tables are meant for a specific purpose – displaying tabulated data in the browsers, developers have been using them for yet another novel purpose, which is to create formatted forms in the browsers.
> While this may seem to be a perfectly good way of creating tables in HTML for formatting Web pages, it is not so! Tables are not meant for this purpose in HTML. Tables should only be used for formatting tabular data.
I appreciate how your article demostrates applying layout without tables but, please, stop spreading FUD like that. Tables are not *only* meant for displaying tabular data. Applying layout with tables is perfectly fine by the W3C.
“The HTML table model allows authors to arrange data — text, preformatted text, images, links, forms, form fields, other tables, etc. — into rows and columns of cells.”
“Tables should not be used *purely* as a means to layout document content…”
http://www.w3.org/TR/html401/struct/tables.html
There you go “arranging forms and form fields” clearly means *layout*. The same could be argued about text, images, links, etc. W3C merely suggests using syle sheets, it does not however renounce tables as a method to apply layout.
I am not arguing that layout should always be done with tables, instead I am trying to set straight inaccurate information spread unintentionally.
Thanks
> While W3C maintains that tables are meant for a specific purpose – displaying tabulated data in the browsers, developers have been using them for yet another novel purpose, which is to create formatted forms in the browsers.
> While this may seem to be a perfectly good way of creating tables in HTML for formatting Web pages, it is not so! Tables are not meant for this purpose in HTML. Tables should only be used for formatting tabular data.
I appreciate how your article demostrates applying layout without tables but, please, stop spreading FUD like that. Tables are not *only* meant for displaying tabular data. Applying layout with tables is perfectly fine by the W3C.
“The HTML table model allows authors to arrange data — text, preformatted text, images, links, forms, form fields, other tables, etc. — into rows and columns of cells.”
“Tables should not be used *purely* as a means to layout document content…”
http://www.w3.org/TR/html401/struct/tables.html
There you go “arranging forms and form fields” clearly means *layout*. The same could be argued about text, images, links, etc. W3C merely suggests using syle sheets, it does not however renounce tables as a method to apply layout.
I am not arguing that layout should always be done with tables, instead I am trying to set straight inaccurate information spread unintentionally.
Thanks
The web community is aware of css, Atul. The reason we choose to use tables is because building a cross-browser (back to IE 4.0 at least) compatible layout strictly based on divs and css positioning is asinine. Anyone using firefox, press CTRL+U and then CTRL+F, type <table and hit enter. You’ll find that even this page uses tables.
You say “Tables are not meant for this purpose in HTML. Tables should only be used for formatting tabular data.” This is merely a technicality, considering the nomenclature of the tag and the history of spreadsheet and database structure. A table is simply an element implemented in HTML rendering engines, that in comparison to pure css it is implemented more widely and consistently.
You could spend an extra 50% of your time making sure your css works in old versions or you could implement a standard that you know will work. Until the internet is faster than HTML rendering engines, there’s no real bottleneck that requires anybody to use pure css.
You say that “using just CSS and no tables … is the better and smarter choice for web pages.” This is wrong; until all browsers are truly under one standard, don’t swear off tables. Either way, you’ve gotta have something better to write about. The most exciting and innovative thing going on that you can think of is css?
One of the key things about using CSS over tables that I think is missing from this piece, and also negates your argument Rick, is that CSS allows for a degree of portability and accessibility that rigid tables can never do. A website built with tables will more than likely not render well at all on a mobile device such as a phone or pda, whereas CSS allows for much more fluid rendering, consistent element and text resizing by the browser (not always possible when text size is fixed in the html), and also screen readers which may ignore CSS and be left with a very clean page to read out (no table tags with rows and columns to get confused with).
I agree with the author, however it’s nothing new as CSS has been around for more than ten years now. Leading web browsers will support almost every part of CSS 2.1, and you can easily include alternate code snippets in a small separate stylesheet for lacklustre browsers such as IE (which has trouble rendering Microsoft’s own website so don’t tell me it’s perfect!) Part of being a web designer is being able to code for a range of web browsers, as they’re developed by different people at different paces they will never be exactly the same.
I’m not arguing that css isn’t a good organizational tool. Tables can use css. However, most web users aren’t on portable devices and I’ll guarantee you that mobile browsers implement tables before they implement css. Regardless, my main point is that saying you should never use tables is misleading and untrue.
As you said, part of being a *good* web designer is being able to code for a range of browsers. It saddens me to see people just completely trash something because they have some “new-age-we-know-best” mentality. Every language and every technology has its uses and the more you know, the better prepared you are when you come up against something new. This article should be rewritten as a supplement to tables, not a replacement.
Did everyone miss the irony that this page is done with tables :p
The web community is aware of css, Atul. The reason we choose to use tables is because building a cross-browser (back to IE 4.0 at least) compatible layout strictly based on divs and css positioning is asinine. Anyone using firefox, press CTRL+U and then CTRL+F, type <table and hit enter. You’ll find that even this page uses tables.
You say “Tables are not meant for this purpose in HTML. Tables should only be used for formatting tabular data.” This is merely a technicality, considering the nomenclature of the tag and the history of spreadsheet and database structure. A table is simply an element implemented in HTML rendering engines, that in comparison to pure css it is implemented more widely and consistently.
You could spend an extra 50% of your time making sure your css works in old versions or you could implement a standard that you know will work. Until the internet is faster than HTML rendering engines, there’s no real bottleneck that requires anybody to use pure css.
You say that “using just CSS and no tables … is the better and smarter choice for web pages.” This is wrong; until all browsers are truly under one standard, don’t swear off tables. Either way, you’ve gotta have something better to write about. The most exciting and innovative thing going on that you can think of is css?
One of the key things about using CSS over tables that I think is missing from this piece, and also negates your argument Rick, is that CSS allows for a degree of portability and accessibility that rigid tables can never do. A website built with tables will more than likely not render well at all on a mobile device such as a phone or pda, whereas CSS allows for much more fluid rendering, consistent element and text resizing by the browser (not always possible when text size is fixed in the html), and also screen readers which may ignore CSS and be left with a very clean page to read out (no table tags with rows and columns to get confused with).
I agree with the author, however it’s nothing new as CSS has been around for more than ten years now. Leading web browsers will support almost every part of CSS 2.1, and you can easily include alternate code snippets in a small separate stylesheet for lacklustre browsers such as IE (which has trouble rendering Microsoft’s own website so don’t tell me it’s perfect!) Part of being a web designer is being able to code for a range of web browsers, as they’re developed by different people at different paces they will never be exactly the same.
I’m not arguing that css isn’t a good organizational tool. Tables can use css. However, most web users aren’t on portable devices and I’ll guarantee you that mobile browsers implement tables before they implement css. Regardless, my main point is that saying you should never use tables is misleading and untrue.
As you said, part of being a *good* web designer is being able to code for a range of browsers. It saddens me to see people just completely trash something because they have some “new-age-we-know-best” mentality. Every language and every technology has its uses and the more you know, the better prepared you are when you come up against something new. This article should be rewritten as a supplement to tables, not a replacement.
Did everyone miss the irony that this page is done with tables :p