HTML Layout

HTML layouts are the building blocks through which webpages are organized, different tags are placed on different sections of the page.

HTML Layout Using Tables

One of the most used techniques in creating layouts is using tables. Every table contains multiple rows and columns. Consider the following layout example for dividing one table in 3 different columns.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Table Layout</title>
</head>
<body>
<table width="100%" height="406" border="0">
  <tr>
    <th style="background-color:#CCCCCC;">&nbsp;</th>
    <td style="background-color:#999;">&nbsp;</td>
    <td style="background-color:#666">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Similarly HTML layout can be created via vertically as well as horizontally columns position. As :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Table Layout</title>
</head>
<body>
<table width="100%" height="450" border="0">
  <tr>
    <th height="112" style="background-color:#CCCCCC;">&nbsp;</th>
  </tr>
  <tr>
    <th height="133" style="background-color:#999;">&nbsp;</th>
  </tr>
  <tr>
    <th height="178" style="background-color:#666;">&nbsp;</th>
  </tr>
</table>
</body>
</html>