[개발]프로그래밍/html5
[html5] <colgroup>,<col> - 표에서 열(col) 스타일 적용
좋은 블로그
2021. 1. 21. 15:36
1. 개념
<colgroup>,<col> - 표에서 열(col) 스타일 적용
<col> : 한 열이나 여러 열을 포함해서 모든 행에 같은 스타일을 적용
2. 태그
<colgroup>,<col>
html5 코드
|
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
|
<!
DOCTYPE
html>
<html lang
=
"kr"
>
<head>
<meta charset
=
"utf-8"
>
<title>
키보드와 하루
</title>
</head>
<body>
<table style
='
border
:
1px solid #000
;
width
:
100%
'
>
1
<colgroup>
<col span
=
"2"
style
='
background
:
yellow
'
>
<col style
='
background
:
blue
'
>
<col style
='
background
:
red
'
>
</colgroup>
<tr>
<td>
1행1열
</td>
<td>
1행2열
</td>
<td>
1행3열
</td>
<td>
1행4열
</td>
</tr>
<tr>
<td>
2행1열
</td>
<td>
2행2열
</td>
<td>
2행3열
</td>
<td>
2행4열
</td>
</tr>
</table>
</body>
</html>
|
결과 화면
코드 설명
1
<thead>
......
</thead>
cols를 보면은 기준은 영어 그래도 열에 해당하는 것을 적용합니다.
colgroup에 cols를 넣어서 각각의 열에 스타일을 적용할 수 있습니다.
그리고 span이라는 키워드를 사용했는데 이것은 지정한 개수만큼 같은 열에 스타일을 적용하는 것을 의미합니다.
colgroup에 cols를 넣어서 각각의 열에 스타일을 적용할 수 있습니다.
그리고 span이라는 키워드를 사용했는데 이것은 지정한 개수만큼 같은 열에 스타일을 적용하는 것을 의미합니다.