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.
-
kahenya
-
dbs
-
Rk0043388
-
http://www.easysitebuild.com/ website builder
-
http://satyabhamasahoo.com satya
-
http://canadaprogrammers.com matthew
-
http://canadaprogrammers.com/ matthew
-
Rohit Kulshreshtha
-
Rohit Kulshreshtha
-
Dimitris
-
Dimitris
-
Dimitris
-
Dimitris
-
Rick
-
Jonathan
-
Rick
-
Ian
-
-
-
-
Rick
-
Jonathan
-
Rick
-
Ian
-
-
-