CSS layout
CSS Layout
I hope you’re familiar with HTML tables and can effectively use them for page layout. However, you did know that CSS also provides a lot of control over positioning elements within a document. Since CSS is the future, why not learn and use it instead of tables for page layout?
The following list summarizes some of the advantages and disadvantages of both technologies −
- Most browsers support tables, while CSS support is slowly being adopted.
-
Tables are more adaptable to changes, adjusting their content and wrapping automatically when the browser window is resized. CSS positioning tends to be more precise and quite inflexible.
-
Tables are easier to learn and manipulate than CSS rules.
But both of these arguments can be debunked −
- CSS is essential to the future of web documents and will be supported by most browsers.
-
CSS is more precise than tables, ensuring your document looks the way you intended, no matter the browser window.
-
Keeping track of nested tables can be a pain. CSS rules tend to be well-organized and easy to read and change.
Finally, we recommend using whichever technology works for you and using the method you understand or best presents your document.
CSS also provides the table-layout property, which can make your tables load faster. Here is an 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’ll notice even more benefits with larger tables. In traditional HTML, the browser must calculate every cell before finally rendering the table. However, when you set the table layout algorithm to fixed, it only needs to look at the first row before rendering the entire table. This means your table needs to have fixed column widths and row heights.
Example Column Layout
Here are the steps to create a simple column layout using CSS:
Set the margins and padding for the entire document to the following:
<style style = "text/css">
<!--
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
-->
</style>
Now, we’ll define a column with a yellow color. Then, we’ll append this rule to the
中−
<style style = "text/css">
<!--
#level0 {
background:#FC0;
} -->
</style>
At this point, we’ll have a document with a yellow background, so let’s define another division within level 0.
<style style = "text/css">
<!--
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
-->
</style>
Now, we’ll nest another division inside level1 and only change the background color –
<style style = "text/css">
<!--
#level2 {
background:#FFF3AC;
}
-->
</style>
Finally, we’ll use the same technique to nest a third-level division inside the second to achieve the right-hand column visual layout –
<style style = "text/css">
<!--
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {
background:#CCC;
}
-->
</style>
Complete the source code as follows –
<style style = "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>
Similarly, you can add a top navigation bar or ad bar at the top of the page.
It will produce the following result −
