개발자의 길/Web Programming

<CSS> Table

모쿠 2017. 3. 30. 17:32

<CSS Table>



<10_table.html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS Table</title>
<style>
/*
table, th, td {
    border: 1px solid grey;
    border-collapse: collapse;
}
*/
th, td {
    border-bottom: 1px solid grey;
    border-collapse: collapse;
}
table {
    width: 100%;
}
thead tr {
    background: #ebebeb;
}
/*
:nth-child(even) - 짝수번째 자식 요소
:nth-chilc(odd) - 홀수번째 자식 요소
:nth-child(x) - x번째 자식 요소
*/
tbody tr:nth-child(even) {
    background: lightgreen;
}
tbody tr:hover {
    background: lightpink;
}
</style>
</head>
<body>
 
<h1>CSS Table</h1>
<!-- 
    table -> caption -> thead -> tfoot -> tbody
-->
<table>
    <caption style="caption-side: bottom">급여</caption>
    <thead>
        <tr>
            <th>월</th>
            <th>급역액</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>합계</td>
            <td>330,000</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>1월</td>
            <td>100,000</td>
        </tr>
        <tr>
            <td>2월</td>
            <td>110,000</td>
        </tr>
        <tr>
            <td>3월</td>
            <td>120,000</td>
        </tr>
        <tr>
            <td>4월</td>
            <td>130,000</td>
        </tr>
    </tbody>
    
</table>
 
</body>
</html>
cs



<출력화면>



저작자표시 비영리