I have noticed that many of the designers design a great looking layout but they fail in the coding part. I have seen big companies code like a kid who has just learnt basics of HTML and some WYSIWYG editor.
Some of the pointers in this guide will help you to make your code beautiful. Yes, I mean it…
1. Use CSS based layers for the layout and use tables only for tabular data: I have seen many big the companies / designers using tables to code the layout. Tables will just help you to increase the lines of codes. Let me explain it by giving an example:
Table based sample code CSS based sample code
Table Based Code:
-
-
<table CLASS="" BORDER="0" WIDTH="500" CELLPADDING="0" CELLSPACING="0">
-
<tr BGCOLOR="#ffffff">
-
<td CLASS="" STYLE="width: 100px">Home</td>
-
<td CLASS="" STYLE="width: 100px">About us</td>
-
<td CLASS="" STYLE="width: 100px">Products</td>
-
<td CLASS="" STYLE="width: 100px">Feedback</td>
-
</tr>
-
</table>
-
CSS Based Code:
-
-
<ul>
-
<li>Home</li>
-
<li>About us</li>
-
<li>Products</li>
-
<li>Feedback</li>
-
</ul>
-
Now in this simple example, there is not much of difference in the number of lines (since it is a very simple piece of code) but what mainly differ here is number of attributes which are simply not needed for such a small thing. We can just define display:inline style in CSS for list and specify the padding to give the same output.
To check some live examples you can take a look at the code of these sites that I have coded, you will notice that the number of lines are less than 100 in the code. If I wanted to implement the same layout in table based layout, it would have taken more than 100 lines. So I can say that I saved 100 lines by using CSS.
But again I am not saying that you should not use tables at all, tables are needed to display tabular data.
