Layout: With Tables

The <table> element was not designed to be a layout tool. The purpose of the <table> element is to display tabular data. However, layouts can be achieved with tables because they can be styled with CSS classes:

CSS Stylesheet: HTML file: Displayed by browser:
<style>
table.mag {
    width:100%;
    border:1px solid black;
}
table.mag th, td {
    padding:10px;
}
table.mag th {
    width:40px;
}
</style> 		<body>
  <table class="mag">
    <tr>
      <th style="width:30%;background-color:yellow;">
<img src="images/smiley.gif" alt="Note" style="height:42px;width:42px;">
      </th>
      <td style="width:70%; border: 0px;background-color:yellow;">
<h2>It CAN be done!</h2>
      </td>
    </tr>
    <tr>
      <td style="background-color:lightgrey;">Nav bar</td>
      <td>
Section Area
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
      </td>
    </tr>
    <tr>
      <td colspan="2" style="text-align:center; background-color:black; color:white;">
Footnote by Marusya
      </td>
    </tr>
  </table>
</body>
Note

     Header Section
Nav bar Section Area



So it CAN be done!
Footnote by Marusya

Ookaaay! Using tables for layouts can fuddle the noodle pretty good... so why do things the hard way?

Back button Table of Contents Next button