표에서 특정 셀 영역을 병합(확장) 하기위해서 사용되는 태그는
<colspan> 과 <rowspan> 입니다. 해당 예제를 살펴봅니다. span 이란 한국에서 흔히 말하는 "스판" 으로 잘 늘어나는 신축성 소재에서 사용되는 그 단어가 맞습니다. 즉, colspan 이라는 태그는 colum span 열을 늘인다. row span 행을 늘인다 라는 뜻이기에 병합(확장)한다고 이해할 수 있습니다.
위 표에서 '역사'를 나타내는 두개의 행 셀을 병합(확장)하기 위해서,
<th> <td> 태그에 행 을 합치는 rowspan 속성을 사용해서 크기를 설정합니다.
'생물'의 경우도 두개의 열 셀을 병합(확장)하기 위해서, colspan 으로 크기를 설정 합니다. 참고로, 합쳐지는 <td> 셀들은 주석 및 코드를 삭제해야 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table, th, td { border: 1px solid black; }
</style>
</head>
<body>
<!-- table을 정의합니다. -->
<table>
<!-- caption 은 표의 제목을 나타냅니다 -->
<caption>시간표</caption>
<!-- table row 행을 나타냅니다. -->
<tr>
<!-- table header cell의 약자로 제목행의 데이터를 표기한다. 진하고 중앙정렬로 표기 -->
<th>세션</th>
<th>월요일</th>
<th>화요일</th>
<th>수요일</th>
<th>목요일</th>
<th>금요일</th>
</tr>
<tr>
<!-- table data cell 의 약자로 열을 나타냅니다. -->
<td>1교시</td>
<td rowspan="2">역사</td>
<td>국어</td>
<td>체육</td>
<td>영어</td>
<td>과학</td>
</tr>
<tr>
<td>2교시</td>
<!-- <td>한문</td> 행 데이터를 합치기 위해서 주석처리-->
<td>영어</td>
<td>수학</td>
<td>국어</td>
<td>지리</td>
</tr>
<tr>
<td>3교시</td>
<td>미술</td>
<td>수학</td>
<td>과학</td>
<td colspan="2">생물</td>
<!-- <td>영어</td> -->
</tr>
<tr>
<td>4교시</td>
<td>음악</td>
<td>한문</td>
<td>체육</td>
<td>수학</td>
<td>과학</td>
</tr>
</table>
</body>
</html>셀 확장을 위한 <rowspan> <colspan>을 알아보았습니다
감사합니다.
표를 구성하는 태그
표를 구성하는 기본 태그 예제 입니다. 표는 , , , , 로 기본 구조를 이룹니다. 해당 태그의 예제를 살펴봅니다. 시간표 세션 월요일 화요일 수요일 목요일 금요일 1교시 역사 국어 체육 영어 과학
soo0100.tistory.com
반응형
'앱 만들기 > HTML5 study' 카테고리의 다른 글
| 비디오 태그 예제 (2) | 2023.03.07 |
|---|---|
| 오디오 태그 예제 (6) | 2023.03.06 |
| 이미지를 표현해주는 태그 예제 (2) | 2023.03.03 |
| html 표 만들기 (4) | 2023.02.28 |
| <dl> 태그 예제 (2) | 2023.02.27 |
댓글