테이블(표형식)을 만들기 위해서는 <table>을 사용한다.
<table> 의 자식요소
- caption (제목)
- tr (행)
- col (열)
- th (셀의 제목)
- td (셀)
자식요소에 대해 알아보자
1. <caption>
테이블의 제목이나 설명을 의미함! 시각장애인들을 위해 사용할수있으면 사용해주자.
<table>
<caption> 이달의 책 판매량 </caption>
<tr>
<th>구분</th>
<th>이름</th>
<th>판매량</th>
</tr>
</table>
2. <thead>, <tbody>, <tfoot>
각각 테이블의 머리글, 본문, 바닥글을 의미함. 꼭 써야하는건 아님.
테이블 내용이 많을때 구역을 보기쉽게 나누기위해 사용하자.
tfoot에는 주로 결론, 합계 이런거 넣음
3. <tr>, <th>, <td>
<tr>은 테이블 행을 나눌때 사용한다.
<td>는 <tr>태그로 나눈 행에서 셀을 분리할때 사용한다.
<th>는 행,열의 머리말로 나타날때 씀. 굵게, 가운데정렬로 표현됨
<table>
<caption> 이달의 책 판매량 </caption>
<tr>
<th>구분</th>
<th>이름</th>
<th>판매량</th>
</tr>
<tr>
<td>1</td>
<td>해리포터</td>
<td>100</td>
</tr>
</table>
4. <colspan, rowspan>
colspan을 하면 열간 병합 (세로)
rowspan을 하면 행간병합 (가로)
<caption> 이달의 책 판매량 </caption>
<tr>
<th>구분</th>
<th colspan="2">이름</th>
<!-- <th>판매량</th> -->
</tr>
<tr>
<td>1</td>
<td>해리포터</td>
<td rowspan="2">100</td>
</tr>
<tr>
<td>1</td>
<td>해리포터2</td>
<!-- <td>100</td> -->
</tr>
</table>
5. <scope>
<scope>를 이용해서 <th>요소에 <td>와의 연결관계를 설정할수있음.
<table>
<caption>요일별 급식 만족도</caption>
<tbody>
<tr>
<th></th>
<th scope="col">월요일</th>
<th scope="col">화요일</th>
<th scope="col">수요일</th>
<th scope="col">목요일</th>
<th scope="col">금요일</th>
<th scope="col">토요일</th>
</tr>
<tr>
<th scope="row">메뉴</th>
<td>돈까스</td>
<td>짜장면</td>
<td>볶음밥</td>
<td>해물라면</td>
<td>잔치국수</td>
<td>떡볶이</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">만족도</th>
<td>3/5</td>
<td>4/5</td>
<td>1/5</td>
<td>5/5</td>
<td>2/5</td>
<td>3/5</td>
</tr>
</tfoot>
</table>
'HTML & CSS' 카테고리의 다른 글
| [7일차] CSS 기초 + 과제 (0) | 2022.04.05 |
|---|---|
| [7일차] Block 요소 Inline 요소 (0) | 2022.04.05 |
| [4일차] Forms (0) | 2022.04.03 |
| [3일차] Embedded contents (0) | 2022.04.03 |
| [3일차] Text-level semantics (0) | 2022.04.03 |