HTML Layout

HTML layout is ery important to design a better look and feel website. At this time to create a modern websites we are using javascript and css to come up responsive and dynamic.

You already seen some websites generally display their content in multiple rows and columns.


<!DOCTYPE html>
<title>HTML Table Layout</title>
<body style="margin:0px;">
    <table style="width:100%; border-collapse:collapse; font:14px Arial,sans-serif;">
            <td colspan="2" style="padding:10px 20px; background-color:lightpink;">
                <h1 style="font-size:24px;">Element Tutorials</h1>
        <tr style="height:170px;">
            <td style="width:20%; padding:20px; background-color:lightblue; vertical-align: top;">
                <ul style="list-style:none; padding:0px; line-height:24px;">
                    <li><a href="#" style="color:red;">Home</a></li>
                    <li><a href="#" style="color:red;">About</a></li>
                    <li><a href="#" style="color:red;">Contact</a></li>
            <td style="padding:20px; background-color:lightyellow; vertical-align:top;">
                <h2>Welcome to Element Tutorials</h2>
                <p> you will learn how to create websites...</p>
            <td colspan="2" style="padding:5px; background-color:lightgray; text-align:center;">
                <p>copyright &copy;</p>

Click on the "Run This Code" button to see how it works.


Welcome HTML Getting Started HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Links HTML Styles HTML Text Formatting HTML Tables HTML Images HTML Forms HTML Lists HTML Iframes HTML Comments HTML CSS HTML Colors HTML Classes HTML Id HTML javascript HTML Filepaths

HTML Advanced

HTML Doctypes HTML Validation HTML URL HTML URL Encode HTML URL Entities HTML Layout HTML Head HTML Meta HTML Scripts HTML Tags

HTML Media

HTML Media HTML Audio HTML Video HTML Plug-ins HTML Youtube

HTML Graphics