CoderTools Web site

HTML Layout

Description


When starting to create web pages you soon find layout becomes a real hassle. Typically in HTML you use tables and align attributes to position elements on a page. Extensive use of tables can make your HTML look very confusing which is one of the reasons why layout is now mostly done by using CSS or cascading style sheets. However I leave this section within the tutorial as it is still important to understand how to use traditional HTML layout techniques.

Layout using Tables

Two column page layout:
    <table border="1" width="100%" height="500px">
        <tr>
            <td colspan="2" height="100px" width="100%" align="middle">
                <h2>This is the Banner</h2>
            </td>
        <tr>
        <tr height="400px">
            <td width="25%" valign="top" align="middle">
                <br/>
                Menu Item 1<br/>
                Menu Item 2<br/>
                Menu Item 3<br/>
                Menu Item 4<br/>
                Menu Item 5<br/>
                Menu Item 6<br/>
            </td>
            <td width="75%" align="middle">
                Main Content Window
            </td>
        <tr>
    </table>
    

This is the Banner


Menu Item 1
Menu Item 2
Menu Item 3
Menu Item 4
Menu Item 5
Menu Item 6
Main Content Window
Three column page layout:
    <table border="1" width="100%" height="500px">
        <tr>
            <td colspan="3" height="100px" width="100%" align="middle">
                <h2>This is the Banner</h2>
            </td>
        <tr>
        <tr height="400px">
            <td width="25%" valign="top" align="middle">
                <br/>
                Menu Item 1<br/>
                Menu Item 2<br/>
                Menu Item 3<br/>
                Menu Item 4<br/>
                Menu Item 5<br/>
                Menu Item 6<br/>
            </td>
            <td width="50%" align="middle">
                Main Content Window
            </td>
            <td width="25%" valign="top" align="middle">
                <br/>Right Menu
            </td>
        <tr>
    </table>
    

This is the Banner


Menu Item 1
Menu Item 2
Menu Item 3
Menu Item 4
Menu Item 5
Menu Item 6
Main Content Window
Right Menu

8/19/2017 6:40:38 PM
Terms Of Use | Privacy Statement | Copyright 2006-2015 © Independence Software LLP