• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Lists</title>
7
    <style>
8
        table, th, td { border: 1px solid black; }
9
        table {
10
            border-collapse: collapse;
11
            width: 100%;
12
        }
13
        th { text-align: left; }
14
        td { text-align: center; }
15
    </style>
16
</head>
17
​
18
<body>
19
​
20
    <h1>text-align 속성을 이용한 테이블의 수평 정렬</h1>
21
​
22
    <table>
23
        <tr>
24
            <th>참치</th>
25
            <th>고래</th>
26
            <th>날치</th>
27
        </tr>
28
        <tr>
29
            <td>상어</td>
30
            <td>문어</td>
31
            <td>꽁치</td>
32
        </tr>
33
        <tr>
34
            <td>오징어</td>
35
            <td>고등어</td>
36
            <td>돌고래</td>
37
        </tr>
38
    </table>
39
    <p>th 태그 내부는 가운데 정렬이, td 태그 내부는 왼쪽 정렬이 기본 설정입니다.</p>
40
​
41
</body>
42
​
43
</html>