HTML table layout

Layout is the process of creating and structuring HTML documents.

To make your site look good, you need to carefully work out the design of the page layout. First, you need to decide whether the content of the site will be in a common block or will be divided into several columns.

The easiest way to create a site layout is the HTML <table> tag. It allows you to quickly split a page into the number of rows and columns you need.

The following example uses a table consisting of 3 rows and 2 columns, the first and last rows combine both columns using the colspan attribute:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
  </head>
  <body>

    <table style="width: 500px;border:0px;">
      <tr>
        <td colspan="2" style="background-color:#85C2FF;">
          <h1 style="color: black;">Top of the site</h1>
        </td>
      </tr>
      <tr style="vertical-align: top;">
        <td style="background-color:#C2EBFF;width:100px;text-align:top;">
          <b>Menu</b><br>
          Item 1<br>
          Item 2<br>
          Item 3
        </td>
        <td style="background-color:#fff;height:200px;width:400px;text-align:top;">
          Place for content</td>
      </tr>
      <tr>
        <td colspan="2" style="background-color:#85C2FF;text-align:center;">
        Copyright © 2018 puzzleweb.ru</td>
      </tr>
    </table>

  </body>
</html> 

The result of this example in the browser window:

Top of the site

Menu
Item 1
Item 2
Item 3
Place for content
Copyright © 2018 puzzleweb.ru

Despite the fact that using tables you can create beautiful designs and convenient page layouts, in the first place, tables were developed to add tabular data to the pages, and not as a tool for markup.

Note: to reduce the amount of code and ease of editing CSS styles, just for several pages made on a single template, we recommend that you take out all the CSS code in a separate file.

Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011-2018 © puzzleweb.ru

puzinfo@puzzleweb.ru | ruen