예제 5-10. 마우스가 올라오면 행의 배경색이 변하는 표 만들기. 3. 표 꾸미기

WEB/CSS3-CONCEPT 2017. 11. 6. 10:18 |

3. 표 꾸미기


* 표 테두리 제어, border

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기본 구조를 가진 표 만들기</title></head>
<body>
<h3>1학기 성적</h3>
<hr>
<table>
    <thead>
        <tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
    </thead>
    <tfoot>
        <tr><th>합</th><th>175</th><th>169</th></tr>
    </tfoot>
    <tbody>
        <tr><td>황기태</td><td>80</td><td>70</td></tr>
        <tr><td>이재문</td><td>95</td><td>99</td></tr>
    </tbody>
</table>
</body>
</html>
 
cs




그림 5-14. 표 테두리와 셀 테두리 꾸미기

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표 테두리</title>
<style>
table {
    border: 1px solid blue
}
td, th {
    border: 1px dotted green
}
</style>
</head>
<body>
<h3>1학기 성적</h3>
<hr>
<table>
    <thead>
        <tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
    </thead>
    <tfoot>
        <tr><th>합</th><th>175</th><th>169</th></tr>
    </tfoot>
    <tbody>
        <tr><td>황기태</td><td>80</td><td>70</td></tr>
        <tr><td>이재문</td><td>95</td><td>99</td></tr>
    <tbody>
</table>
</body>
</html>
 
cs

그림 5-15. 표와 셀의 중복된 테두리 합치기
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표 테두리</title>
<style>
table {
    border: 1px solid blue;
    border-collapse: collapse;
}
td, th {
    border: 1px dotted green
}
</style>
</head>
<body>
<h3>1학기 성적</h3>
<hr>
<table>
    <thead>
        <tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
    </thead>
    <tfoot>
        <tr><th>합</th><th>175</th><th>169</th></tr>
    </tfoot>
    <tbody>
        <tr><td>황기태</td><td>80</td><td>70</td></tr>
        <tr><td>이재문</td><td>95</td><td>99</td></tr>
    </tbody>
</table>
</body>
</html>
 
cs




* 셀 크기 제어, width height
그림 5-16. height와 width로 셀의 크기 지정
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표 테두리</title>
<style>
th {
    height: 40px;
    width: 100px;
}
td {
    height: 20px;
    width: 100px;
}
table {
    border: 1px solid blue;
}
td, th {
    border: 1px dotted green
}
</style>
</head>
<body>
<h3>1학기 성적</h3>
<hr>
<table>
    <thead>
        <tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
    </thead>
    <tfoot>
        <tr><th>합</th><th>175</th><th>169</th></tr>
    </tfoot>
    <tbody>
        <tr><td>황기태</td><td>80</td><td>70</td></tr>
        <tr><td>이재문</td><td>95</td><td>99</td></tr>
    </tbody>
</table>
</body>
</html>
 
cs


그림 5-17. <thead>의 자손 <th>만 40px로 높이 지정

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표 테두리</title>
<style>
thead th {
    height: 40px;
    width: 100px;
}
td, th {
    height: 20px;
    width: 100px;
}
table {
    border: 1px solid blue;
}
td, th {
    border: 1px dotted green
}
</style>
</head>
<body>
<h3>1학기 성적</h3>
<hr>
<table>
    <thead>
        <tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
    </thead>
    <tfoot>
        <tr><th>합</th><th>175</th><th>169</th></tr>
    </tfoot>
    <tbody>
        <tr><td>황기태</td><td>80</td><td>70</td></tr>
        <tr><td>이재문</td><td>95</td><td>99</td></tr>
    </tbody>
</table>
</body>
</html>
 
cs


표나 셀의 크기를 % 단위로 지정할 수도 있다. 표를 브라우저의 폭과 같은 크기로 출력하고자하면 다음과 같이 한다

table { width : 100% } // 표의 폭을 브라우저 폭과 항상 같게 출력


* 셀 여백 및 정렬

그림 5-18. 셀 데이터를 오른쪽 정렬시키고 셀 내에 10픽셀 패딩 삽입

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표</title>
<style>
table {
    border: 1px solid blue;
}
td, th {
    border: 1px dotted green;
    height: 20px; width: 100px;
    padding: 10px;
    text-align: right
}
</style>
</head>
<body>
<h3>1학기 성적</h3>
<hr>
<table>
    <thead>
        <tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
    </thead>
    <tfoot>
        <tr><th>합</th><th>175</th><th>169</th></tr>
    </tfoot>
    <tbody>
        <tr><td>황기태</td><td>80</td><td>70</td></tr>
        <tr><td>이재문</td><td>95</td><td>99</td></tr>
    </tbody>
</table>
</body>
</html>
 
cs


* 배경색과 테두리 효과

그림 5-19. <thead>의 배경색을 gray, <td>와 <tfoot>의 아래쪽 테두리만 회색으로 지정

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표</title>
<style>
table { /* 이중 테두리 제거 */
    border-collapse: collapse;
}
td, th { /* 모든 셀에 적용 */
    text-align : left;
    padding: 10px;
    height: 20px;
    width: 100px;
}
thead { /* <thead>의 모든 셀에 적용 */
    background : darkgray;
    color : yellow;
}
td, tfoot th { /* 아래쪽 테두리만 회색으로 */
    border-bottom: 1px solid gray;
}
</style>
</head>
<body>
<h3>1학기 성적</h3>
<hr>
<table>
    <thead>
        <tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
    </thead>
    <tfoot>
        <tr><th>합</th><th>175</th><th>169</th></tr>
    </tfoot>
    <tbody>
        <tr><td>황기태</td><td>80</td><td>70</td></tr>
        <tr><td>이재문</td><td>95</td><td>99</td></tr>
    </tbody>
</table>
</body>
</html>
 
cs


* 줄무늬 만들기

1
2
3
4
tr:nth-child(even) // 짝수 번째 <tr>에 적용
{
    background : aliceblue;
}

cs



* nth-child(even)은 짝수 번째 <tr>에 만 적용하고,
nth-child(odd)은 홀수 번째 <tr>에 만 적용한다.

그림 5-20. <tbody> 내의 짝수 번째 <tr>의 배경색을 aliceblue로 입혀 줄무늬 만들기
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표</title>
<style>
table { /* 이중 테두리 제거 */
    border-collapse: collapse;
}
td, th { /* 모든 셀에 적용 */
    text-align : left;
    padding: 5px;
    height: 15px; width: 100px;
}
thead, tfoot { /* <thead>의 모든 셀에 적용 */
    background : darkgray;
    color : yellow;
}
tbody tr:nth-child(even) { /* 짝수 <tr>에 적용*/
    background: aliceblue;
}
</style>
</head>
<body>
<h3>1학기 성적</h3>
<hr>
<table>
    <thead>
        <tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
    </thead>
    <tfoot>
        <tr><th>합</th><th>310</th><th>249</th></tr>
    </tfoot>
    <tbody>
        <tr><td>황기태</td><td>80</td><td>70</td></tr>
        <tr><td>이재문</td><td>95</td><td>99</td></tr>
        <tr><td>이병은</td><td>85</td><td>90</td></tr>
        <tr><td>김남윤</td><td>50</td><td>40</td></tr>
    </tbody>
</table>
</body>
</html>
 
cs


* 응용 : 마우스가 올라갈 때 행의 배경색이 변하는 표 만들기(:hover 이용)

1
2
3
4
tr:hover // 모든 행(<tr>)에 대해 마우스가 올라갈 때 배경색을 pink로 변경
{
    background : pink;
}
cs

<tbody>의 행에 대해서만 적용하려면 다음과 같이 한다
1
2
3
4
tbody tr:hover // <tbody>에 속한 ㅐㅇ에 마우스가 올라갈 때 배경색을 pink로 변경
{
    background : pink;
}
cs




예제 5-10. 마우스가 올라오면 행의 배경색이 변하는 표 만들기
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표 응용</title>
<style>
table { /* 이중 테두리 제거 */
    border-collapse : collapse;
}
td, th { /* 모든 셀에 적용 */
    text-align : left;
    padding : 5px;
    height : 15px;
    width : 100px;
}
thead, tfoot { /* <thead>의 모든 셀에 적용 */
    background : darkgray;
    color : yellow;
}
tbody tr:nth-child(even) { /* 짝수 <tr>에 적용*/
    background : aliceblue;
}
tbody tr:hover { /* 마우스가 올라오면 pink 배경 */
    background : pink;
}
</style></head>
<body>
<h3>1학기 성적</h3>
<hr>
<table>
    <thead>
        <tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
    </thead>
    <tfoot>
        <tr><th>합</th><th>310</th><th>249</th></tr>
    </tfoot>
    <tbody>
        <tr><td>황기태</td><td>80</td><td>70</td></tr>
        <tr><td>이재문</td><td>95</td><td>99</td></tr>
        <tr><td>이병은</td><td>85</td><td>90</td></tr>
        <tr><td>김남윤</td><td>50</td><td>40</td></tr>
    </tbody>
</table>
</body></html>
 
cs











저작자표시 비영리 동일조건

'WEB > CSS3-CONCEPT' 카테고리의 다른 글

예제 5-12. 애니메이션 만들기 연습. 예제 5-13. font-size에 대한 전환 효과 만들기. 예제 5-14. 다양한 변환 사례. 5. CSS3 스타일로 태그에 동적 변화 만들기  (0) 2017.11.06
예제 5-11. CSS3 스타일로 폼 꾸미기. 4. 폼 꾸미기  (0) 2017.11.06
예제 5-9. CSS3 스타일을 응용하여 리스트로 메뉴 만들기  (0) 2017.11.06
예제 4-21. 마우스 커서 제어, cursor  (0) 2017.11.04
예제 4-20. box-shadow 프로퍼티로 박스 그림자 만들기  (0) 2017.11.04
Posted by 너래쟁이
:

티스토리툴바