[HTML/CSS] Table 꾸미기 / 배경색 추가하기
2021. 2. 23. 14:00728x90
배경색을 만드는 속성
배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, 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
43
44
45
46
47
48
|
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
table {
width: 100%;
border-top: 1px solid #444444;
border-collapse: collapse;
}
th, td {
border-bottom: 1px solid #444444;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Lorem</th><th>Ipsum</th><th>Dolor</th><th>Sit</th><th>Amet</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td><td>Sit</td><td>Amet</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td><td>Sit</td><td>Amet</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td><td>Sit</td><td>Amet</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td><td>Sit</td><td>Amet</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td><td>Sit</td><td>Amet</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td><td>Sit</td><td>Amet</td>
</tr>
</tbody>
</table>
</body>
</html>
|
cs |
표 전체에 배경색 추가하기
표 전체에 하나의 배경색을 넣을 때는 table에 배경색을 추가하는 게 편합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<style>
table {
width: 100%;
border-top: 1px solid #444444;
border-collapse: collapse;
}
th, td {
border-bottom: 1px solid #444444;
padding: 10px;
text-align: center;
}
table {
background-color: #bbdefb;
}
</style>
|
cs |
제목이 있는 행과 내용이 있는 행에 다른 색 추가하기
th 요소와 td 요소에 서로 다른 배경색을 추가합니다. (thead 요소와 tbody 요소에 서로 다른 배경색을 추가해도 됩니다.)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<style>
table {
width: 100%;
border-top: 1px solid #444444;
border-collapse: collapse;
}
th, td {
border-bottom: 1px solid #444444;
padding: 10px;
text-align: center;
}
table {
background-color: #bbdefb;
}
</style>
|
행의 배경색을 번갈아 넣기
홀수번째 행과 짝수번째 행의 배경색을 다르게 하고 싶다면 tr 요소에 nth-child 선택자를 이용하여 배경색을 추가합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<style>
table {
width: 100%;
border-top: 1px solid #444444;
border-collapse: collapse;
}
th, td {
border-bottom: 1px solid #444444;
padding: 10px;
text-align: center;
}
thead tr {
background-color: #0d47a1;
color: #ffffff;
}
tbody tr:nth-child(2n) {
background-color: #bbdefb;
}
tbody tr:nth-child(2n+1) {
background-color: #e3f2fd;
}
</style>
|
cs |
열의 배경색을 번갈아 넣기
홀수번째 열과 짝수번째 열의 배경색을 다르게 하고 싶다면 th 또는 td 요소에 nth-child 선택자를 이용하여 배경색을 추가합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<style>
table {
width: 100%;
border-top: 1px solid #444444;
border-collapse: collapse;
}
th, td {
border-bottom: 1px solid #444444;
padding: 10px;
text-align: center;
}
th:nth-child(2n), td:nth-child(2n) {
background-color: #bbdefb;
}
th:nth-child(2n+1), td:nth-child(2n+1) {
background-color: #e3f2fd;
}
</style>
|
cs |
728x90
'PROGRAMING > HTML , CSS' 카테고리의 다른 글
| [html/css] margin 속성 자세히 알아 보기(margin-top,margin-left, margin-bottom, margin-left 설정 방법) (0) | 2021.03.03 |
|---|---|
| [html/css] padding 속성 사용법(padding-right, padding-left, padding-top, padding-bottom) (0) | 2021.03.03 |
| [HTML,CSS] display:none 과 visibility:hidden 의 차이 (0) | 2021.03.03 |
| [HTML] Form 의 이해 (1) | 2021.02.23 |
| [HTML/CSS] DIV 중앙, 가운데 배치하기 (0) | 2021.02.23 |