지금까지는 주로 html에서 테이블을 생성하고 내용을 작성한 다음, 셀을 합치는 기능까지 살펴보았습니다. 오늘은 CSS 레벨이 아닌 html 태그 레벨에서 스타일을 지정할 수 있는 태그를 살펴보려고 합니다. 바로 열을 중심으로 스타일을 묶어서 지정할 수 있는 <col>과 <colgroup> 태그입니다.
○ 열 단위의 스타일 적용 태그 - <col>, <colgroup>
우선 특정 열을 기준으로 스타일을 일괄적으로 지정할 수 있는 태그는 <col>과 <colgroup>입니다. 이 태그를 사용하려면 약간의 조건과 적용 구조를 알아두어야 합니다.
기본적으로 <col>과 <colgroup> 태그를 작성하는 위치는 <caption> 바로 다음입니다. 즉, <table> 태그로 표를 선언하고 제목을 지정한 다음 본격적으로 표의 내용(row를 정의하는) 태그가 작성되기 전에 작성해야 합니다. 즉, 표의 기본 생성 이전에 미리 전제 조건을 선언해 주는 것이라고 생각하면 됩니다.
두 번째로 알아두어야 할 것은, <col>과 <colgroup>의 차이점입니다. 간단히 말하자면, <col>은 한 개의 열을 지정할 때 사용하는 태그이며 <colgroup>은 복수의 <col> 태그를 묶어주는 상위의 개념이 됩니다. 특히, <colgroup>은 </colgroup>이라는 종료 태그를 함께 사용하지만 <col>은 <br>처럼 단독으로 사용하는 태그입니다. 실제로 해당 태그를 사용할 때는, <colgroup> </colgroup> 태그 사이에 <col> 태그를 해당 테이블의 열 개수만큼 삽입해 줍니다. 주의할 점은, 특정 열에만 스타일이 적용되고 어떤 열에는 스타일이 적용되지 않는다고 해서 임의로 열의 개수를 생략해서는 안된다는 것입니다.
실제로 열이 4개 있고, 그중 2개의 열에만 스타일이 적용된다고 하더라도 <colgroup> </colgroup> 태그 사이에는 4개의 <col> 태그가 입력되어야 한다는 뜻이지요.
또한, 열 합치기를 배울 때 적용했던 span 속성을 여기서도 사용합니다. 당연히 해당 지점부터 2개 이상의 열에 동일한 스타일을 적용하기 위한 용도겠죠? 더불어 이것을 사용할 경우에는 일괄 적용되는 열을 위한 <col> 태그는 생략하게 됩니다.
앞서 만들어보았던 표 예제를 이용해 <colgroup>과 <col> 태그를 적용해 보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table>
<caption>표 제목 예시</caption>
<thead>
<tr>
<th>분류</th>
<th>이름</th>
<th>색상</th>
<th>비고</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">CPU</td>
<td>i9-13genth</td>
<td colspan="2">재고없음</td>
</tr>
<tr>
<td>i7-11genth</td>
<td>white</td>
<td>재고있음</td>
</tr>
<tr>
<td rowspan="2">VGA</td>
<td>RTX9999</td>
<td>green</td>
<td>재고있음</td>
</tr>
<tr>
<td>GTX13999</td>
<td colspan="2">재고없음</td>
</tr>
</tbody>
</table>
</body>
</html>
| 분류 | 이름 | 색상 | 비고 |
|---|---|---|---|
| CPU | i9-13genth | 재고없음 | |
| i7-11genth | white | 재고있음 | |
| VGA | RTX9999 | green | 재고있음 |
| GTX13999 | 재고없음 | ||
위 예제는 앞선 아티클에서 만들어보았던 표입니다. 여기에서 우선 첫 번째 열에 배경색 스타일을 지정하고, 세 번째와 네 번째 열에 너비 160px을 일괄적으로 지정해 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table>
<caption>표 제목 예시</caption>
<colgroup>
<col style="background-color: #eee;">
<col>
<col span="2" style="width: 160px;">
</colgroup>
<thead>
<tr>
<th>분류</th>
<th>이름</th>
<th>색상</th>
<th>비고</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">CPU</td>
<td>i9-13genth</td>
<td colspan="2">재고없음</td>
</tr>
<tr>
<td>i7-11genth</td>
<td>white</td>
<td>재고있음</td>
</tr>
<tr>
<td rowspan="2">VGA</td>
<td>RTX9999</td>
<td>green</td>
<td>재고있음</td>
</tr>
<tr>
<td>GTX13999</td>
<td colspan="2">재고없음</td>
</tr>
</tbody>
</table>
</body>
</html>
| 분류 | 이름 | 색상 | 비고 |
|---|---|---|---|
| CPU | i9-13genth | 재고없음 | |
| i7-11genth | white | 재고있음 | |
| VGA | RTX9999 | green | 재고있음 |
| GTX13999 | 재고없음 | ||
위와 같이 첫 번째 열에 백그라운드 컬러가 지정되고, 세 번째와 네 번째 열에 너비가 일괄적으로 적용된 것을 확인할 수 있습니다.
'Programming > HTML+CSS' 카테고리의 다른 글
| 2. 내용 입력하기(5) - 오디오/비디오 삽입 (0) | 2023.03.02 |
|---|---|
| 2. 내용 입력하기(4) - 이미지 삽입 (0) | 2023.03.01 |
| 2. 내용 입력하기(3) - 표 생성하기 2 (0) | 2023.02.26 |
| 2. 내용 입력하기(3) - 표 생성하기 1 (0) | 2023.02.24 |
| 2. 내용 입력하기(2) - 목록 생성하기 (0) | 2023.02.23 |
