• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>HTML Layouts</title>
7
</head>
8
​
9
<body>
10
​
11
    <h1>table 요소를 이용한 레이아웃</h1>
12
    <table width="100%" style="text-align:center; border:none">
13
        <tr>
14
            <td colspan="2" style="background-color:lightgrey">
15
                <h2>HEADER 영역</h2>
16
            </td>
17
        </tr>
18
        <tr>
19
            <td style="background-color:#339999; color:white; width:20%">
20
                <h2>NAV 영역</h2>
21
            </td>
22
            <td style="height:200px; text-align:left">
23
                <p>SECTION 영역</p>
24
            </td>
25
        </tr>
26
        <tr>
27
            <td colspan="2" style="background-color:#FFCC00">
28
                <h2>FOOTER 영역</h2>
29
            </td>
30
        </tr>
31
    </table>
32
​
33
</body>
34
​
35
</html>