[HTML] Tabular data <table>

Frontend/HTML & CSS

Deeb 2022. 4. 5. 17:34

1. <table>

테이블을 생성할 때 사용하는 태그로 하나의 테이블을 정의한다.

컨테이너 요소로 내부의 요소들을 묶을 때 사용하는데

내부에는 제목(caption)과 행(tr), 열(col) 그리고 셀(td)과 셀의 제목(th) 역할을 하는 여러 요소들이 자식으로 사용된다.

제목부터 표까지 포함한 큰 영역을 의미한다.

2. <caption>

테이블의 제목이나 설명을 의미하므로 제목에 맞게 <table> 요소의 첫번째 자식으로 사용해야한다.

스크린리더를 고려해 달아주어야한다.

3. <thead>, <tbody>, <tfoot>

<thead> : 머리글

<tbody> : 본문

<tfoot> : 바닥 글

테이블의 내용이 많을 때 <thead>와 <tfoot>는 머리글과 바닥 글, 본문으로 테이블의 구역을 나누는 요소로 사용한다.

이 요소들은 테이블의 레이아웃에 영향을 미치지 않지만 CSS를 사용하여 디자인의 스타일을 지정할 수 있다.

4.<tr>, <th>, <td>

<tr> : 테이블의 행을 나눌 때

<th> : 행, 열의 머리말을 나타낼 때 사용하는 것으로 글씨를 굵게, 가운데 정렬하여 보여준다.

<td> : <tr> 태그로 나눈 행에서 셀을 분리할 때

HTML 요소의 모든 종류(텍스트, 이미지, 목록, 테이블 등)를 포함할 수 있다.

5. colspan, rowspan 속성

열(col) + 열(col) = 가로방향 병합 (colspan)

행(row) + 행(row) = 세로방향 병합(rowspan)

<td> 또는 <th> 태그 요소에 사용해 열간병합 또는 행간 병합을 할 수 있다. 그리고 병합하고 싶은 셀의 개수를 지정해 줍니다.

6. <colgroup>, <col>

<colgroup> 안의 <col> 요소는 각각 테이블의 ‘열’ 을 의미하는데 <colgroup>과 그 자식 요소로 쓰이는 <col> 요소를 통해 한 열에 공통적인 스타일을 주는것도 가능하다. <colgroup>을 적용하면 CSS할때도 유용하다.

7. scope

웹표준에 적합적인 코드로 <th> 요소에 scope 속성을 사용해 <td> 와의 연결 관계를 설정 할 수 있습니다.

실습