Designing a website with tables is now an old technique. Now a days it’s time to introduce tableless web design, which is very flexible as well as web development friendly. Table restricts development with many complications and disadvantages. I will try to elaborate the vital advantages of tableless for web development and web designs.

Quick loading

The most important feature of tableless desinging, helps in reducing the size of a HTML page. It is true that tables take time to load and therefore a website made with tables generally loads slowly. Slow loading means slow visual apearance, may leads to losing visitors. Reason behind is that tables come with clutter of codes which increases the loading time. As you know table is structured with number of open-close tags(i.e thead, tr, td.) that makes the entire table structure heavy. At the same time if you have used tableless, it basically reduces the code and shed up 70% of unnessasary elements.

Simple and Clear Code

If you are developing website without tables, it will clear the code with lots of stuff. It reduce unwanted tags and make it more clean which helps a developer to make changes comfortably. Developer will not have to labor hard while making any changes in the codes. Infact a clumsy apearance make it difficult for a coder to find out errors. Tableless make your code very simple and clear, without any complication one can integrate or develop some new features in the same design.

Flexibility in Presentation

With the help of CSS one can change style, graphic or font very easily. You don’t need to look  whole code for a small style change. By editing CSS file, you can change the complete look and feel of design. Furthermore, Developer will update the CSS file only of a website, he will not need to update all the pages.

Search Engine Optimization

Conceptually, websites with fewer codes are always search engine friendly and can be easily read by all the search engine crawler.

Use of Standard Code

Tableless layout uses professional and very standard layout for designing a web page. Use of standard tags make designing effortless and one could make changes easily without putting lot of hard work.

Printer Friendly

Usually user surf net for the content, and takes print when they find some useful content for them. But in the tablebased layout, there are many limitations as one can’t take print of the nessasary part, it comes with the whole page(i.e header, footer, Links, and other extra advertisments) but in tablesless you can customize the need and make a layout printer friendly.

Cost Effective

Yes! It is true that Tableless web desinging requires sound knowledge on div tags and CSS. However, editing CSS files of div tags is not a complex task. Therefore, a web developer will take less working hours. This is the reason why it is considered highly cost effective.

You can also define CSS styles for HTML elements with the id selector. The id selector is defined with #. It has a Unique effect in HTML Document, as it is defined uniquely for each HTML Tag/Element.

The CSS style rule defined below will go with the element that has an “id” attribute with a value of “mycolor”:

# mycolor {color:green}

The style rule below will compare the “li” element that has an id with a value of ” link1″:

li#link1
{
text-align:center;
color:red
}

Again Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

CSS Comments

Comments are used to distribute your code among the working tags and your comments. It may help you when you edit the source code at a later date to recognize the part of code from the content present in your comments. A comment is ignored by browsers. A CSS comments starts with “/*”, and ends with “*/”, like this:

/*This is a comment*/

With the “Class” selector you can define different styles for the same type of HTML element.
Let’s say that you’ld like to give two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:

p.right {text-align:right}
p.center {text-align:center}

You then just have to use the class attribute in your HTML document:

<p class=”right”>This paragraph will be right-aligned.</p>
<p class=”center”>This paragraph will be center-aligned.</p>

Note: If you want to apply more than one class per given element, the syntax is:

<p class=”center bold”>This is a paragraph.</p>

The paragraph above will be styled by the class “center” AND the class “bold”.

You can also omit the name of tag in the selector to define a general style that can be use by all HTML elements which will have a certain class. Below In the example, all those HTML elements with class=”center” will be center-aligned:

.center {text-align:center}

Below  code, we have two HTML element tags and both the “h4” element and the “p” element is using same class=”myclass”. This means that both elements will follow the same rules defined in the “.myclass ” selector:

<h4 class=” myclass “>This heading will be center-aligned</h4>
<p class=” myclass “>This paragraph will also be center-aligned.</p>

Remark Do NOT start a class name with a numeric/number, reason behind is that It won’t work in Mozilla/Firefox. You may add Styles to Elements with Particular Attributes. The style rule below is matching all input tag that have a type attribute with a value “text”:

input[type="text"] {background-color:blue}

You can make a group of various selectors. A comma will separate each selector. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:

h1,h2,h3,h4,h5,h6
{
color:green
}

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property:value}

The selector is the HTML element/tag which you wish to define, the property is the attribute or same HTML tag you wish to change, and each property will have a value. The property and value will be separated by a colon, and enclosed in curly braces:

body {color:black}

STORE IN SPECIAL PLACE OF MIND:

1. If the value is multiple words, put quotes around the value:
   p {font-family:”sans serif”}
   
2. If you want to define more than one property, then it must be separated with a semicolon. The example below illustrates how to define a underline decorated anchor tag, with a red text color:
   a {text-decoration:underline; color:red}

Just to make the style code more readable, you can describe one property on each line, like given below:

p
{
text-align:center;
color:black;
font-family:arial
}