• 코드:
​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 {
9
            border-collapse: collapse;
10
            width: 100%;
11
        }
12
        th, td { padding: 10px; }
13
        tr:nth-child(odd) { background-color: #F3F3F3; }
14
    </style>
15
</head>
16
​
17
<body>
18
​
19
    <h1>striped table</h1>
20
​
21
    <table>
22
        <tr>
23
            <th>참치</th>
24
            <th>고래</th>
25
            <th>날치</th>
26
        </tr>
27
        <tr>
28
            <td>상어</td>
29
            <td>문어</td>
30
            <td>꽁치</td>
31
        </tr>
32
        <tr>
33
            <td>오징어</td>
34
            <td>고등어</td>
35
            <td>돌고래</td>
36
        </tr>
37
    </table>
38
    <p>tr 태그에만 background-color 속성과 :nth-child 선택자를 적용합니다.</p>
39
​
40
</body>
41
​
42
</html>