[HTML5] <tr>, <td>, <th> 활용하여 표 만들기 [표를 만드는 태그 사용하기]

---

- <tr>, <td>, <th> 활용하여 표 만들기

표를 만들기 위에서는 <table> 태그로 감싸고,
그 안에 행(row)인 <tr> 태그, 그 안에 셀인 <td> 태그를 넣으면 된다.
→ <th> 태그는 제목 셀로, 내용을 가운데 정렬하고 굵게 표시한다.

<table>
    <tr>
        <th>제목 셀</th>
        <td>1행 2열</td>
        <td>1행 3열</td>
    </tr>
    <tr>
        <th>제목 셀</th>
        <td>2행 2열</td>
        <td>2행 3열</td>
    </tr>
</table>

 

해당 표는 css를 따로 지정하였다.

---

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

일부 표에서는 제목과 본문 외에도 아래쪽에 합계나 요약 내용을 표시하기도 한다.
→ 이런 표는 화면낭독기 사용 및 스타일 적용 등을 위해 내용에 따른 영역을 구분하는 게 좋다.

• <thead> : 제목 부분
• <tbody> : 본문
• <tfoot> : 요약 부분

<table>
    <thead>
        <tr>
            <th>thead</th>
            <td>1행 2열</td>
            <td>1행 3열</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>tbody</th>
            <td>2행 2열</td>
            <td>2행 3열</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>tfoot</th>
            <td>3행 2열</td>
            <td>3행 3열</td>
        </tr>
    </tfoot>
</table>

 

thead, tbody, tfoot으로 테이블의 영역을 구분하였다.

 

참고문헌 : 고경희(2019), HTML5+CSS3 웹 표준의 정석, 이지스 퍼블리싱

---