HTML Layout


Web page layout is very important to improve the appearance of the website.

Please carefully design your web page layout.


Examples

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 to create a background and colorful appearance for the page.

lampAlthough we can use the HTML table tag to design beautiful layouts, the table tag is not recommended as a layout tool. A table is 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>Tutorial Fish (tutorialfish.com)</title>
</head>
<body>
    <div id="container" style="width:500px">
        <div id="header" style="background-color:#177cb0;">
            <h1 style="margin-bottom:0;">Main page title</h1>
        </div>
        <div id="menu" style="background-color:#1755b0;height:200px;width:100px;float:left;">
            <b>menu</b><br>
            the HTML<br>
            the 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:#177cb0;clear:both;text-align:center;">
            Copyright © tutorialfish.com
        </div>
    </div>
</body>
</html>

 Try It! 

The above HTML code will produce the following result:

image.png



HTML Layout - Use Table Element

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

Most sites can use <div> or <table> elements to create multiple columns. CSS is used to position elements, or to create a background and colorful appearance for the page.

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

The following example uses a table with three rows and two columns-the first and last rows use the colspan attribute to span two columns:

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Wonderful Tutorials (tutorialfish.com)</title>
</head>
<body>
    <table width="500" border="0">
        <tr>
            <td colspan="2" style="background-color:#177cb0;">
                <h1> Main page title </h1>
            </td>
        </tr>
        <tr>
            <td style="background-color:#1755b0;width:100px;">
                <b>menu</b><br>
                HTML<br>
                CSS<br>
                JavaScript
            </td>
            <td style="background-color:#eeeeee;height:200px;width:400px;">
                Content is here
            </td>
        </tr>
        <tr>
            <td colspan="2" style="background-color:#177cb0;text-align:center;">
                Copyright © tutorialfish.com </td>
        </tr>
    </table>
</body>
</html>

 Try It! 

The above HTML code will produce the following results:

image.png


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 very 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

LabelDescription
<div>Define document blocks (block-level)
<span>Define span, used to combine inline elements in the document.