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:
<table>
<tr>
<th>Registration Form</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.
<html>
<head>
<style type="text/css">
label {
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:
fieldset {
border: 1px solid #781351;
width: 25em;
padding : 0.5em 1em;
}
</style>
<title>Tableless CSS</title>
</head>
<body>
<form action="">
<fieldset>
<legend>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.
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.
|
This page was last modified on 13 Sep 2010 at 23:24:01. |
Gautam Kumar EDP Manager  http://www.connectsin.com |
 |
» CSS Text
» CSS Padding
» CSS Margin
» CSS Border
» Styling tables with CSS
» How To Build a Basic CSS Layout
» How to create css forms
» Tableless Web Page Design Using CSS