<col> : 한 열이나 여러 열을 포함해서 모든 행에 같은 스타일을 적용
티스토리 뷰
1. 개념
<colgroup>,<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이라는 키워드를 사용했는데 이것은 지정한 개수만큼 같은 열에 스타일을 적용하는 것을 의미합니다.
'[개발]프로그래밍 > html5' 카테고리의 다른 글
| [html5] img - 웹 브라우저에 이미지 표시 (0) | 2021.01.25 |
|---|---|
| [html5] colspan , rowspan - 표에서 열,행 합치기 (0) | 2021.01.22 |
| [html5] <thead>,<tbody>,<tfoot> - 표에서 제목,본문,요약 구분 (0) | 2021.01.20 |
| [html5] <caption>,<figcaption> - 표에다가 제목 만들어 표시 (0) | 2021.01.19 |
| [html5] <table>,<tr>,<td>,<th> - 일반적인 표 만들기 (0) | 2021.01.14 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday