HTML - 표

<table>태그 사용

<caption>태그를 통해 표제목 표현 (필수)

<tr>로 행 생성

tr로 생성한 행 내부에 <th or td>로 열들 생성

 

th vs td

th태그는 표에서 제목성격을 나타내는 셀을 표현

td태그는 일반적인 셀

 

<td rowspan="2">1000원</td>를 통해 여러개의 행을 병합할 수 있음

<td colspan="3">2500원</td>를 통해 여러개의 열을 병합할 수 있음

 

구조화 (필수는 아님, 표에 따라 tfoot은 없어도 됨)

<thead> 표에서 제목을 나타내는 영역을 그룹화

<tbody> 순수한 데이터 부분 그룹화

<tfoot> 꼬릿말부분 그룹화

※주의 tbody태그 전에 tfoot태그 사용하기 (스크린 리더기 등의 웹 접근성 향상 관련 때문에)

 

+ caption태그 다음에 사용가능

<col style="wdith:80px"> 

<colgroup span="2" style="width:150px"></colgroup>

 

연관있는 데이터 셀 범위 지정 → scope사용

ex.

<th scope="col">구분</th>

<th scope="row">전공</th>

<th scope="row">교양</th>

 

<th scope="col" rowspan="2">구분</th>

<th scope="colgroup" colspan="2">1학년</th> (2개이상의 col이나 row 범위 지정 가능)