HTML Layout

Page layout is very important to improve the appearance of the website.

Please carefully design your web page layout.

Online examples

Web page layout
using the <div> element How to use the <div> element to add layout.

Web page layout
using the <table> element How to use the <table> element to add layout.

Site layout

Most websites will arrange content into multiple columns (just like magazines or newspapers).

Most websites can use <div> or <table> elements to create multiple columns. CSS is used to position elements or create backgrounds and colorful appearances for pages.

Although we can use HTML table tags to design beautiful layouts, table tags are not recommended as a layout tool-tables are not a layout tool.

HTML layout-use the <div> element

The div element is a block-level element used to group HTML elements.

The following example uses five div elements to create a multi-column layout:

Example

<!DOCTYPE html>
<html>
  <head> 
    <meta charset="utf-8"> 
    <title>HackerThik</title> 
  </head>
  <body>
    <div id="container" style="width:500px">
      <div id="header" style="background-color:#FFA500;">
        <h1 style="margin-bottom:0;">Main page title</h1>
      </div>
      <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
        <b>menu</b><br>
        HTML<br>
        CSS<br>
        JavaScript
      </div>
      <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
        Content is here
      </div>
      <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
        copyright © hackerthink.com
      </div>
    </div>
  </body>
</html>

The above HTML code will produce the following result:

    HackerThik 
Content is here

HTML layout-using tables

Using HTML <table> tag is an easy way to create layout.

Most sites can use <div> or <table> elements to create multiple columns. CSS is used to position elements or create backgrounds and colorful appearances for pages.

Even though you can use HTML tables to create beautiful layouts, the purpose of designing tables is to present tabular data-tables are not a layout tool!

HTML layout-useful tips

Tip: The biggest advantage of using CSS is that if you store the CSS code in an external style sheet, the site will be easier to maintain. By editing a single file, you can change the layout of all pages. To learn more about CSS, please visit our CSS tutorial .

Tip: Since creating advanced layouts is time consuming, using templates is a quick option. Many free website templates can be found through search engines (you can use these pre-built website layouts and optimize them).

HTML layout tags

Label Description
<div>
Define the document block, block-level
<span>
Define span, used to combine inline elements in the document.