CSS – Layouts
CSS – Layouts
CSS also provides an efficient layout for the table and column of the HTML document. To load tables faster in the web browser, CSS provides table-layout property.
Example 1:
<table style = "table-layout:fixed;width:200px;">
<tr height = "30">
<td width = "100">CSS-cell 1</td>
<td width = "150">CSS-cell 2</td>
<td width = "200">CSS-cell 3</td>
</tr>
</table>
Output:
Multiple column layouts can be created by setting the margin and padding of the whole document with CSS as below,
Example-2:
<style style = "text/css">
body {
margin:9px;
padding:0;
background:#FFF;
}
#level0 {background:#FC0;}
#level1 {
margin-left:250px;
padding-left:9px;
background:blue;
}
#level2 {background:#FFF3AC;}
#level3 {
margin-right:250px;
padding-right:9px;
background:green;
}
#main {background:#CCC;}
</style>
<body>
<div id = "level0">
<div id = "level1">
<div id = "level2">
<div id = "level3">
<div id = "main">
Final Content.
</div>
</div>
</div>
</div>
</div>
</body>
Output :
