24xhtml.com: Table base Layout

Thursday, 6 September 2012

Table base Layout

The table structure layout is a very basic format and it’s useful for the beginner to clear some concept about the layout. The table can contain any elements including tables themselves.

A standard layout consists of a banner near the top, navigation, Website content and footer. These are the backbone to any good website.

Example:

<table width="600" border="0" cellspacing="1" cellpadding="5" bgcolor="#ccc">
    <tr bgcolor="#FFFFFF">
        <td colspan="2"><img src="images/banner.jpg" alt="" width="600" 
height="150" /></td> <!-- BANNER AREA -->
    </tr>
    <tr bgcolor="#FFFFFF">
        <td width="180" valign="top"> <!-- LEFT PANEL -->
            <table width="180" border="0" cellspacing="1" cellpadding="0"
 bgcolor="#ffffff">
                <tr bgcolor="#DDF5FF">
                    <td><a href="#">Home</a></td>
                </tr>
                <tr bgcolor="#DDF5FF">
                    <td><a href="#">About us</a></td>
                </tr>
                <tr bgcolor="#DDF5FF">
                    <td><a href="#">Services</a></td>
                </tr>
                <tr bgcolor="#DDF5FF">
                    <td><a href="#">Faq</a></td>
                </tr>
                <tr bgcolor="#DDF5FF">
                    <td><a href="#">Contact us</a></td>
                </tr>
            </table>
        </td>
        <td width="420" valign="top"> <!-- CONTENT AREA -->
            <h3>Welcome to my website!</h3>
            <p>
            Thanks to visit my website. Hope you are enjoying the tutorial.
            <br />
            Please feel free to contact us.
            </p>
        </td>
    </tr>
    <tr bgcolor="#f3f3f3">
        <td colspan="2" align="center"> <!-- FOOTER -->
            &copy; 2012 All Rights Reserved
        </td>
    </tr>
</table>