HTML Layout

We can make our Web pages that are formatted like newspaper pages using HTML columns.

HTML Layout - Using Tables

One very common practice with HTML, is to use HTML tables to format the layout of an HTML page. An HTML <table> is used to divide a part of this Web page into two columns. The trick is to use a table without borders, and maybe a little extra cell-padding. No matter how much text you add to the page, it will stay inside its column borders.

<table width="10%" cellpadding="10">
    <tr>
        <td>
            Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1
        </td>
        <td>
            Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2
        </td>
    </tr>
</table>

O/P:

Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1

Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2

Same Layout - Color Added

<table width="10%" cellpadding="10">
    <tr>
        <td>
            Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1
        </td>
        <td bgcolor="yellow">
            Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2
        </td>
    </tr>
</table>

O/P:

Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1

Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2