Copyright © tutorialspoint.com

CSS Layouts

previous next


Advertisements

Hope you are very comfortable with HTML tables and you are efficient in designing page layouts using HTML Tables. But you know CSS also provides plenty of controls for positioning elements in a document. Since CSS is the wave of the future, why not learn and use CSS instead of tables for page layout purposes?

I'm listing down few pros and cons of both the technologies:

But each of these arguments can be reversed:

Finally, I would suggest you to use whichever technology makes sense to you - use what you know or what presents your documents in the best way.

CSS also provides table-layout property to make your tables load much faster.Following is the example:

<table style="table-layout:fixed;width:600px;">
  <tr height="30">
    <td width="150">CSS table layout cell 1</td>
    <td width="200">CSS table layout cell 2</td>
    <td width="250">CSS table layout cell 3</td>
  </tr>
</table>

You will notice the benefits more on large tables. The reason this makes tables load faster is because with traditional HTML, the browser had to calculate every cell before finally rendering the table. When you set the table-layout algorithm to fixed however, it only needs to look at the first row before rendering the whole table. This means that your table will need to have fixed column widths and row heights.

Sample Column Layout:

Here are the steps to create a simple Column Layout using CSS:

Set the margin and padding of the complete document as follows:

<style tyle="text/css">
<!--
body {
    margin:9px 9px 0 9px;
    padding:0;
    background:#FFF;
}
-->
</style>

Now we will define a column with yellow color and later we will attach this rule to a <div>:

<style tyle="text/css">
<!--
#level0 {
     background:#FC0;
}
-->
</style>

Upto this point we will have a document with yellow body, so lets now define another division inside level0:

<style tyle="text/css">
<!--
#level1 {
    margin-left:143px;
    padding-left:9px;
    background:#FFF;
}
-->
</style>

Now we will nest one more division inside level1 and we will change just background color:

<style tyle="text/css">
<!--
#level2 {
    background:#FFF3AC;
}
-->
</style>

Finally we use the same technique, nest a level3 division inside level2 to get the visual layout for the right column:

<style tyle="text/css">
<!--
#level3 {
    margin-right:143px;
    padding-right:9px;
    background:#FFF;
}
#main {
    background:#CCC;
}
-->
</style>

Complete source code:

<style tyle="text/css">
<!--
body {
    margin:9px 9px 0 9px;
    padding:0;
    background:#FFF;}
  #level0 {
    background:#FC0;}
  #level1 {
    margin-left:143px;
    padding-left:9px;
    background:#FFF;}
  #level2 {
    background:#FFF3AC;}
  #level3 {
    margin-right:143px;
    padding-right:9px;
    background:#FFF;}
  #main {
    background:#CCC;}
-->
</style>
<body>
  <div id="level0">
    <div id="level1">
      <div id="level2">
        <div id="level3">
          <div id="main">
            Final Content goes here...
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Similar way you can add top navigation bar or ad bar at the top of the page.

To Become more comfortable - Do Online Practice

previous next

Copyright © tutorialspoint.com