<html>

<head>
    <title>Table Based Layout</title>
</head>

<body style="margin: 0px; padding: 0px; font-family: 'Helvetica', sans-serif; color: #000;">
    <table width="100%" style="height: 100%;" cellpadding="15" cellspacing="0" border="0">
        <tr>
            <td colspan="2" style="height: 100px;" bgcolor="#e17055">
                <h1>Header</h1>
            </td>
        </tr>
        <tr>
            <td width="20%" valign="top" bgcolor="#fab1a0">
                <h2>Navigation</h2>
                <a href="#">Menu link</a><br>
                <a href="#">Menu link</a><br>
                <a href="#">Menu link</a><br>
                <a href="#">Menu link</a>
            </td>
            <td width="80%" valign="top" bgcolor="#dfe6e9">
                <h2>Page heading</h2>
                Here's a two column layout with a header section that spans the width of both columns. The first table
                row creates the header and contains a single table cell which uses the colspan="2" attribute-value pair.
                The website logo typically goes in the header section.<br>
                <br>
                The second table row contains two table cells which create the menu column (left) and the content column
                (right). The colspan attribute is not set in either so they default to colspan="1".<br>
              <br>
              The last table
                row creates the footer and contains a single table cell which uses the colspan="2" attribute-value pair.
            </td>
        </tr>
        <tr>
            <td colspan="2" style="height: 100px;" bgcolor="#e17055">
                <h1>Footer</h1>
            </td>
        </tr>
    </table>
</body>

<html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.