태그 | 설명 | 비고 |
---|---|---|
<table> |
테이블 | |
<caption> |
표 설명 또는 제목 | 선택사항 |
<tr> |
테이블의 행 | |
<td> |
테이블의 데이터 셀 | |
<thead> | 테이블의 헤더 부분 | <tbody> 앞에 와야 함 |
<tbody> | 테이블의 본문 | 본 내용을 담음 |
<tfoot> | 테이블의 푸터 부분 | <tbody> 뒤에 와야 함 |
<th> | 열 또는 행의 헤더 | scope 속성으로 row, col 중 선택 |
속성 | 설명 |
---|---|
colspan |
열 병합 |
rowspan |
행 병합 |
<emmet 사용 예시>
<aside> 💡 table>caption+(thead>(th>td*n)n)+(tbody>(tr>tdn)*n)
</aside>
tr, th 태그와 thead, tbody 태그 사용 시 순서에 유의한다.
td{1} 과 같이 emmet을 사용하여 데이터를 삽입할 수 있다.
th 태그는 scope 속성을 가진다. 행과 열 중 어느 것의 중심 헤더가 되는 것인지 지정하는 역할이다.
<table>
은 표 용도로만 사용할 것! - 태그 | 설명 | 비고 |
---|---|---|
<colgroup> |
표에 열을 묶어서 속성 부여 | <caption> 보다 뒤, 그 외 요소보다 앞에 와야 함 |
<col> |
열의 묶음 | span 속성으로 열 수 지정 |
<colgroup>
<col class="weekend">
<col span="5">
<col class="weekend">
</colgroup>
span 은 기본 지정이 1이다.