HTML Table Layout

Table layout styled with CSS attributes and managed by HTML class attribute.

Other examples in Layout (Advanced HTML)

Result from the Online TryIt-Editor

<!doctype html>
<html>
<head>
    <title>HtmlNest.com live html example</title>
    <style type="text/css">
        .leftside
        {
            background-color: #FFD700;
            width: 80px;
            vertical-align: top;
        }
        .header
        {
            background-color: #726959;
             text-align: center;
       }
        .content
        {
            background-color: #860404;
            height: 100px;
            width: 200px;
            vertical-align: top;
        }
        .footer
        {
            background-color: #726959;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td colspan="2" class="header">
                <h1> Main Title</h1>
            </td>
        </tr>
        <tr class="leftside">
            <td>
                Left side text
            </td>
            <td class="content">
                Content goes here
            </td>
        </tr>
        <tr>
            <td colspan="2" class="footer">
                Footer text here.
            </td>
        </tr>
    </table>
</body>
</html>

^1.0

^1.0

^1.0

^4.0

^4.0

HTML Table Layout

Useful Information