table layout 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table</title>
    <style type="text/css">
        body {
            color: #999;
            font: 15px sans-serif;
        }
        hr {
            border: 0;
            height: 1px;
            background: #333;
        }
        table {
            margin: auto;
            width: 50%;
        }
        td {
            font-size: 20px;
            text-align: center;
            vertical-align: middle;
            padding: 10px;
        }
        .td1 {
            width: 30%;
        }
        .td2 {
            width: 40%;
        }
        .td3 {
            width: 30%;
        }
        .block {
            height: 80px;
        }
        .black {
            background: #333;
        }
        .border {
            border: 1px solid #333;
        }
        .content {
            height: 200px;
        }
    </style>
</head>
<body>

    <table>
        <tr>
            <td class="td1 border">Logo</td>
            <td class="td2"></td>
            <td class="td3 black"><div class="block"></div></td>
        </tr>
        <tr>
            <td colspan="3"><hr></td>
        </tr>
        <tr>
            <td colspan="3" class="border">navigasi</td>
        </tr>
        <tr>
            <td colspan="3"></td>
        </tr>
        <tr>
            <td colspan="3" class="border content">konten</td>
        </tr>
        <tr>
            <td colspan="3"><hr></td>
        </tr>
        <tr>
            <td class="black"><div class="block"></div></td>
            <td></td>
            <td class="black"><div class="block"></div></td>
        </tr>
    </table>

</body>
</html>