How to layout html page with table 1

Website layout with tables 1

A table contains a set of columns and actual data rows and each row consists of one or more cells. Inside Table Cells you can add other HTML tags other than normal text like Image, Links , List , Tables etc. Also you can create nested Tables. Nesting tables can lead to complex tables layouts.

The following picture shows an image of a simple website layout using html tables.

The above picture shows a common website layout. The top part is using for display Website Name or Website Logo. Left side part is using for Menu and right side is for Advertisements. The center position is using for display your website content and the bottom part is for Footer like copy right information , sitemap , about etc.

The following HTML code give you what exactly shows in the picture. Copy and paste the following html code and save it as an html file.

HTML Source Code :

<html>
<body >
  <table border=2 bordercolor=red width=98% align=center>
    <tr><td align=center colspan=3>
      <br><br>
        WEBSITE NAME
      <br><br>
    </td></tr>
    <tr>
      <td width=15% align=center>
        MENU
      </td>
      <td  width=70% align=center>
        <br><br><br><br><br><br><br><br><br><br><br>
          You Can write your main content here
        <br><br><br><br><br><br><br><br><br><br><br>
      </td>
      <td  width=15% align=center>
        ADVT
      </td>
    </tr>
    <tr><td align=center colspan=3>
      <br><br>
        FOOTER
      <br><br>
    </td></tr>
  </table>
</body>
</html>

The above HTML code create a simple website layout and has no nested tables. The content area is filled with HTML < br > (line break) tag for display purpose, so you can replace < br > tags and write your content inside the content area.