02-4 표를 만드는 태그

표(table)

행(row) : 가로, 열(column) : 세로

셀(cell) : 행과 열이 만나 이루는 영역

<table>, <tr>, <td>, <th> 태그 - 기본적인 표 만들기

기본적인 표 만들기

1. <table> 태그를 이용해 표 전체 윤곽을 잡는다.
2. <tr> 태그를 이용해 행(row)을 먼저 만든다.
3. <td> 태그를 이용해 각 행마다 몇 개의 셀(cell)이 들어갈지 결정한다.

<table>
    <!-- table row -->
    <tr>
        <!-- table data -->
        <td>내용</td>
        <td>내용</td>
        <td>내용</td>
    </tr>
    <tr>
        <td>내용</td>
        <td>내용</td>
        <td>내용</td>
    </tr>
</table>

<th> 태그 - 표에 제목 셀 만들기

<table border="1"> <!-- 표에 테두리 표시 -->
    <!-- table row -->
    <tr>
        <!-- table heading -->
        <th>제목 셀(1행 1열)</th>
        <!-- table data -->
        <td>1행 2열</td>
        <td>1행 3열</td>
    </tr>
    <tr>
        <th>제목 셀(2행 1열)</th>
        <td>2행 2열</td>
        <td>2행 3열</td>
    </tr>
</table>

colspan, rowspan 속성 - 행 또는 열 합치기

여기서 헷갈릴만한 게 보기에는 가로를 합치는데 colspan을 쓰고, 세로를 합치는데 rowspan을 쓴다.

예를 들어 2행 3열 표라고 했을 때,

1행 2열과 1행 3열을 합칠 때 - 열을 합치므로 colspan

1행 1열과 2행 1열을 합칠 때 - 행을 합치므로 rowspan

이렇게 이해하면 될 듯 하다.

<!-- 열 합치기(가로) -->
<th colspan="합칠 셀의 개수">내용</th>
<td colspan="합칠 셀의 개수">내용</td>

<!-- 행 합치기(세로) -->
<th rowspan="합칠 셀의 개수">내용</th>
<td rowspan="합칠 셀의 개수">내용</td>

<caption> 태그, <figcaption> 태그 - 표에 제목 붙이기

<caption> 태그 사용하기

<caption> 안에는 다른 태그를 사용해 제목을 여러 줄로 표시하거나 텍스트를 꾸밀 수도 있다.

<table border="1">
    <caption>
        <strong>표 제목</strong>
        <p>표 제목 설명</p>
    </caption>
    <tr>
        <th></th>
        <td></td>
    </tr>
</table>

<figcaption> 태그 사용하기

figure와 caption의 합성어.

설명 글을 붙이고 싶은 대상을 <figure> 태그로 감싼 후 <figcaption> 태그를 이용해 제목이나 설명 글을 입력한다.

<caption> 태그와 달리 중앙에 정렬되지 않는다. 또한 <caption> 태그를 사용하면 제목이 위쪽 중앙에 표시되는 반면, <figcaption> 태그를 <table> 태그보다 앞에 사용하면 표 위에 제목이 표시되고 </table> 태그 다음에 추가하면 표 아래에 제목이 표시된다.

<figure>
    <table border="1">
        <tr>
            <th></th>
            <td></td>
        </tr>
    </table>
    <figcaption>
        <p>[표1-1]표 설명<b>표 제목</b></p>
    </figcaption>
</figure>

aria-describedby 속성 - 표에 대한 설명 제공하기

화면 낭독기에서 표를 읽어줄 때 도움이 되도록 표 설명을 별도의 문장으로 작성한 후 <table> 태그 안에 aria-describedby 속성을 추가해 연결하면 표를 이해하는 데 도움이 된다.

<p id="summary">표 설명</p>
    <table border="1" aria-describedby="summary">
        <caption>표 제목</caption>
        <tr></tr>
    </table>

<thead>, <tbody>, <tfoot> 태그 - 표 구조 정의하기

<!-- table head -->
<thead>
</thead>
<!-- table body -->
<tbody>
</tbody>
<!-- table foot -->
<tfoot>
</tfoot>

표의 본문이 길어 한 화면을 넘어갈 경우, 자바스크립트를 이용해 제목 부분(<thead>)과 요약부분(<tfoot>)은 표의 위아래에 고정하고 본문(<tbody>)만 스크롤되도록 만들 수 있다.

<col>, <colgroup> 태그 - 여러 열 묶어 스타일 지정하기

<col> 태그는 한 열에 있는 모든 셀에 같은 스타일을 적용하려고 할 때 사용하는 것으로 닫는 태그가 없다.

<colgroup> 태그는 <col> 태그에서 span속성을 이용해 열을 묶는 것 처럼, <colgroup> 태그 안에 묶는 열의 개수만큼 <col> 태그를 넣음으로써 여러 열을 묶어 스타일을 적용할 수 있다.