-
colspan과 rowspanHTML 2023. 11. 27. 17:26영역별 크기가 다른 테이블을 만드는 방법
colspan, rowspan 사용시
th, td 태그 사용시 두 span 속성을 사용할 수 있다.
th colspan = "3" 으로 지정시, 가로로 3칸짜리 데이터가 들어갈 수 있는 크기를 합쳐서 하나의 데이터가 들어갈 수 있는 칸이 만들어 진다.
이후 똑같은 크기의 행을 만들지 않는다면, 크기 1을 가진 데이터 3개를 계속 넣어줘야 한다.
예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th colspan = "2"> 지역별 홍차 </th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan = "3"> 중국</th>
<td>정산소종</td>
</tr>
<tr><td>기문</td></tr>
<tr><td>운남</td></tr>
<tr>
<th rowspan = "4"> 인도 및 스리랑카</th>
<td>아삼</td>
</tr>
<tr><td>실론</td></tr>
<tr><td>다질링</td></tr>
<tr><td>닐기리</td></tr>
</tbody>
</table>
</body>
</html>
thead와 tbody를 구분하여 사용해보려 했으나, rowspan이 들어간 두 칸도 어쩌면 메타데이터를 표기하는 head와 유사하지 않은가 고민이 되어서, 사용하지 않는게 좋았을 것 같다는 생각이 든다.
마무리
colspan과 rowspan의 총합만큼 테이블 크기가 나오는 것을 유의해야 한다. 엑셀의 셀 병합과 비슷한 기능이고, 셀 분할과 유사한 기능은 따로 없어서 처음 테이블을 생성할 때 총 크기를 어떻게 할 것인지 잘 생각하고 두 속성을 사용해야겠다.
'HTML' 카테고리의 다른 글
문서 객체 모델 (0) 2023.12.06 JS 기초 (0) 2023.12.04 CSS 기초 (2) 2023.11.30 양식 <form> 태그 (2) 2023.11.28 스크립트 언어,HTML 시작 (3) 2023.11.27