지난 시간에는 기본적인 표(table)의 생성과 영역의 구분에 대해서 학습했습니다. 표의 외형과 스타일을 지정하는 부분에 대해서는 추구 CSS 학습을 통해 진행할 예정이니 조금만 기다려 주세요.
2. 내용 입력하기(3) - 표 생성하기 1
이제 html 문서 내에서 표를 만드는 방법을 살펴볼 차례입니다. 일반적으로 워드프로세서나 게시판의 텍스트 에디터에서는 표 생성 도구가 제공되기 때문에 아주 간편하게 드래그나 행/열 칸 수
nozeroslope.tistory.com
이번 시간에는, 표를 생성한 다음 각 행과 열의 셀을 합치는 기능에 대해서 살펴볼 것입니다. 워드나 엑셀, 스프레드 시트에서는 간단히 드래그하여 "합치기" 기능을 실행만 하면 되는 기능이지만, html 태그로 수행할 경우에는 다소 골치가 아픈 부분이기도 합니다. 하지만 알아둬서 나쁠 것 없는 법이죠? 한번 살펴보도록 하겠습니다.
우선 talble에서 행이나 열을 합칠 때는, <td> 또는 <tr> 태그 레벨에서 속성값을 부여해 합치기를 수행하게 됩니다. 그럼 행 또는 열을 각각 합칠 때 사용되는 태그의 속성 값을 살펴보겠습니다.
○ 행을 합치는 속성 - rowspan
세로 방향으로 행을 합치는 동작을 취할 때는 rowspan 속성을 사용하게 됩니다. 사용하는 방법은 다음과 같습니다.
<td rowspan="합칠 셀의 개수">셀 내용을 작성합니다.</td>
이전에 만들었던 표를 사용해 한 번 셀을 합치는 연습을 해보겠습니다. 우선 지난 시간에 만들어 보았던 표의 html코드를 이용해 행을 몇 개 추가해서 수정했습니다.
<!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>CPU</td>
<td>i9-13genth</td>
<td>black</td>
<td>재고없음</td>
</tr>
<tr>
<td>CPU</td>
<td>i7-11genth</td>
<td>white</td>
<td>재고있음</td>
</tr>
<tr>
<td>VGA</td>
<td>RTX9999</td>
<td>green</td>
<td>재고있음</td>
</tr>
<tr>
<td>VGA</td>
<td>GTX13999</td>
<td>black</td>
<td>재고없음</td>
</tr>
</tbody>
</table>
</body>
</html>
| 분류 | 이름 | 색상 | 비고 |
|---|---|---|---|
| CPU | i9-13genth | black | 재고없음 |
| CPU | i7-11genth | white | 재고있음 |
| VGA | RTX9999 | green | 재고있음 |
| VGA | GTX13999 | black | 재고없음 |
위의 표는 '분류' 열에 CPU와 VGA가 중복되는 내용이 있습니다. 이 분류 열의 CPU와 VGA가 공통되는 행 영역을 합치도록 해보겠습니다. 우선 방법을 설명하자면, CPU와 VGA가 등장하는 첫 번째 <td> 태그에 rowspan 속성을 추가해 줍니다. 여기서 CPU와 VGA는 각각 두 개의 열이 존재하므로, rowspan 속성은 '2'로 설정해 줍니다.
그리고 헷갈릴만한 부분이 등장합니다. 'i9-13genth'가 있는 열에는 위의 설명처럼 rowspan 속성이 포함된 <td> 태그를 작성하므로 <td> 태그가 총 4개가 존재하지만, 'i7-11genth'가 있는 열에는 <td> 태그를 3개만 작성합니다. 바로 rowspan 속성이 적용된 [분류] 열에 대한 정보를 생략하기 때문이지요. 비슷한 방식으로 'VGA'도 통일시켜 줍니다. 참고로, 두 개의 내용은 CPU와 VGA로 모두 동일하기 때문에 자동으로 통합해 줍니다. 만일 두 합치는 셀의 내용이 다르다면 텍스트는 각각 유지된 상태로 한 개의 셀에 입력됩니다.
<!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>black</td>
<td>재고없음</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>black</td>
<td>재고없음</td>
</tr>
</tbody>
</table>
</body>
</html>
| 분류 | 이름 | 색상 | 비고 |
|---|---|---|---|
| CPU | i9-13genth | black | 재고없음 |
| i7-11genth | white | 재고있음 | |
| VGA | RTX9999 | green | 재고있음 |
| GTX13999 | black | 재고없음 |
○ 열을 합치는 속성 - colspan
이제 이러한 방식을 응용하여 열도 셀을 합쳐보도록 하겠습니다. 위 표의 내용을 보면, '재고 없음'이라는 비고 항목이 있는 부분이 보일 것입니다. 그렇다면 재고가 없는 제품의 경우, 컬러 열의 내용을 표시할 필요가 없으므로 컬러와 비고 열을 통합해 버리도록 하고 '재고없음' 텍스트만 남기도록 하겠습니다.
<!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 | 재고없음 | ||
'Programming > HTML+CSS' 카테고리의 다른 글
| 2. 내용 입력하기(4) - 이미지 삽입 (0) | 2023.03.01 |
|---|---|
| 2. 내용 입력하기(3) - 표 생성하기 3 (0) | 2023.02.27 |
| 2. 내용 입력하기(3) - 표 생성하기 1 (0) | 2023.02.24 |
| 2. 내용 입력하기(2) - 목록 생성하기 (0) | 2023.02.23 |
| 2. 내용 입력하기(1) - 텍스트 입력 2 (0) | 2023.02.22 |
