How to deal with Layouts in HTML

In this article I will explain the HTML Layouts.
  • 1510

Most websites have put their content in multiple columns.Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages.Tables have been a popular method for achieving advanced layouts in HTML.

HTML Layouts Using <div> Tag

The div element is a block level element used for grouping HTML elements.

Example

<html>

<head>

    <title></title>

</head>

<body>

    <div id="container" style="width: 500px">

        <div id="header" style="background-color: Gray;">

            <h1 style="margin-bottom: 0;">

                Web Designing</h1>

        </div>

        <div id="menu" style="background-color: Gray; height: 200px; width: 100px; float: left;">

            <b>Menu</b><br />

            HTML<br />

            CSS<br />

            JavaScript<br />

            XHTML<br />

            HTML 5</div>

        <div id="content" style="background-color: #EEEEEE; height: 200px; width: 400px;

            float: left;">

            Content</div>

        <div id="footer" style="background-color: gray; clear: both; text-align: center;">

            Thank you</div>

    </div>

</body>

</html>

 

Output

web1.jpg

HTML Layouts Using <table> Tag

A simple way of creating layouts is by using the HTML <table> tag.

<html>

<head>

    <title></title>

</head>

<body>

    <table border="1">

        <tr>

            <td style="background-color: pink">

                Web Designing

            </td>

            <td style="background-color: pink">

                Welcome

            </td>

        </tr>

        <tr>

            <td style="background-color: pink">

                <ul>

                    <li>HTML</li>

                    <li>CSS</li>

                    <li>HTML5</li>

                    <li>JavaScript</li>

                </ul>

            </td>

            <td style="background-color: Orange">

                Content place here

            </td>

        </tr>

        <tr>

            <td style="background-color: pink">

                Thank you

            </td>

            <td style="background-color: pink">

                <i>contact no.12345</i>

            </td>

        </tr>

    </table>

</body>

</html>

Output

web2.jpg


 
Ask Your Question 
 
Got a programming related question? You may want to post your question here
 
Programming Answers here

Categories

More Articles

© 2013 dotNetheaven. All rights reserved.