HTML5
[HTML5] 표 태그 <table> / 셀 병합 속성 colspan, rowspan
FRDYtheme
2022. 9. 28. 12:43
- <table>, <tr>, <td>, <th> 은 함께 작성해야 표가 만들어 짐.
- <table> : 테이블 작성 시 시작을 알리는 태그
- <tr> : 테이블의 행(줄)
- <th> : 테이블의 셀(칸). 셀의 소제목
- <td> : 테이블의 셀(칸). 일반적인 셀
- * 셀 안의 컨텐츠는 세로 중앙 정렬이 기본.
- * 셀 안의 컨텐츠 경우 th는 가로 중앙 정렬, td는 가로 왼쪽 정렬
- * table 요소에 width 값 적용시 각 셀의 제어가 어려움
- * 셀 하나에 가로, 세로 값을 주면 일반적으로 나머지 셀들도 따라감
<table border="1"> <!--border 태그는 표 구현을 위해 사용. html에서는 더 이상 쓰지 않음.-->
<tr>
<th>소제목</th>
<td>셀</td>
<td>칸</td>
</tr>
<tr>
<td>1</td>
<td></td>
<td></td>
</tr>
<tr>
<td>테이블 셀의 크기는</td>
<td>다른 셀의</td>
<td>크기에 영향을 받는다</td>
</tr>
</table>
열 병합 colspan
- column + span의 합성어
- colspan은 속성이며 값을 가져야 한다.
- 뒤에 오는 셀(th, td)과 병합. 즉 다른 열과 합치는 속성
- <td colspan="값">으로 작성하며 값에 입력된 수만큼의 열을 병합한다.
- colspan은 값만큼의 셀 수를 가지기 때문에 병합당하는 셀 태그를 맞춰서 삭제해줘야 한다.
<h1>열 병합 colspan</h1>
<table border="1">
<tr>
<th></th>
<th>9am</th>
<th>10am</th>
<th>11am</th>
<th>12am</th>
</tr>
<tr>
<th>월요일</th>
<td colspan="2">UI 디자인</td>
<td>html</td>
<td>css</td>
</tr>
<tr>
<th>화요일</th>
<td colspan="3">체육</td>
<td>디자인</td>
</tr>
</table>
행 병합 rowspan
- column + span의 합성어
- rowspan은 속성이며 값을 가져야 한다.
- 아래에 오는 셀(th, td)과 병합. 즉 다른 행(셀)과 합치는 속성
- <td rowspan="값">으로 작성하며 값에 입력된 수만큼의 행(셀)을 병합한다.
- rowspan은 값만큼의 행(셀) 수를 가지기 때문에 병합당하는 행(셀) 태그를 맞춰서 삭제해줘야 한다.
<h1>행 병합 rowspan</h1>
<table border="1">
<tr>
<th></th>
<th>넷플릭스</th>
<th>티빙</th>
<th>apple TV</th>
</tr>
<tr>
<th>6pm - 7pm</th>
<td rowspan="2">영화</td>
<td>코미디</td>
<td rowspan="3">뉴스</td>
</tr>
<tr>
<th>7pm - 8pm</th>
<td rowspan="2">스포츠</td>
</tr>
<tr>
<th>8pm - 9pm</th>
<td>다큐멘터리</td>
</tr>
</table>
표 영역의 그룹화
- <thead></thead> : 표의 머릿말.
- <tbody></tbody> : 표의 본문.
- <tfoot></tfoot> : 표의 바닥글. HTML4까지는 thead 바로 아래 작성했지만 HTML5부터는 tbody 아래에 작성해야 한다.
- <caption></caption> : table 전용 캡션. 꼭 table 태그와 함께 작성하며, 표의 영역에 맞춰 가운데 정렬 출력