• 코드:
​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 {
13
            padding: 10px;
14
            border-bottom: 1px solid #CD5C5C;
15
        }
16
        tr:hover { background-color: #F5F5F5; }
17
    </style>
18
</head>
19
​
20
<body>
21
​
22
    <h1>hoverable table</h1>
23
​
24
    <table>
25
        <tr>
26
            <th>참치</th>
27
            <th>고래</th>
28
            <th>날치</th>
29
        </tr>
30
        <tr>
31
            <td>상어</td>
32
            <td>문어</td>
33
            <td>꽁치</td>
34
        </tr>
35
        <tr>
36
            <td>오징어</td>
37
            <td>고등어</td>
38
            <td>돌고래</td>
39
        </tr>
40
    </table>
41
    <p>tr 태그에만 :hover 선택자를 적용합니다.</p>
42
​
43
</body>
44
​
45
</html>