[HTML] 05

표는 행과 열 그리고 셀로 이루어진다.

표를 만드는 table, caption 태그

<table>
    <caption>표 제목</caption>
</table>

table 태그는 표의 시작과 끝을 알린다.
caption 태그는 표의 제목을 설정한다.

행을 만드는 tr 태그와 셀을 만드는 td, th 태그

<table>
    <tr>
    	<td>1행 1열</td>
        <td>1행 2열</td>
    </tr>
    <tr>
    	<td>2행 1열</td>
        <td>2행 2열</td>
    </tr>
</table>

표의 제목 행에 셀을 만들 때는 th 태그를 사용한다.

표의 구조를 지정하는 thead, tbody, tfoot 태그

표의 제목: thead
표의 본문: tbody
요약: tfoot

표의 구조를 지정하면 시각 장애인도 화면 낭독기를 통해 표를 쉽게 이해할 수 있다.
또한 CSS를 사용해 표의 제목, 본문, 요약에 각각 다른 스타일을 적용할 수 있다.

행이나 열을 합치는 rowspan, colspan 속성

행을 합치는 속성: rowspan
열을 합치는 속성: colspan

<td rowspan="합칠 셀의 개수">셀의 내용</td>
<td colspan="합칠 셀의 개수">셀의 내용</td>

열을 묶어주는 col, colgroup 태그

1개의 열을 지정하는 태그: col
2개 이상의 col 태그를 묶어 사용하는 태그: colgroup
col 태그는 닫는 태그가 없다.

colgroup, col 태그는 반드시 caption 태그 다음에 사용해야 한다.
즉 표의 내용이 시작되기 전에 열의 상태를 알려 주는 것이다.

실습을 위해 어떤 표를 만들어볼까 고민하다가, 내가 즐겨 마시는 초코라떼의 가격을 비교해보았다.
카페별 초코라떼 가격은 caption 태그를, 1행은 th 태그를 사용하여 구분하였다.
투썸 플레이스의 초코라떼는 사이즈가 한 개인 것 같아 colspan 속성을 사용하여 열을 합쳤다.