[HTML] 테이블(Table)

테이블(Table)이란?

여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표

<table>태그를 사용하여 이러한 테이블을 작성

---

<table> 태그 구성

• <thead> : 테이블 제목 행
• <tboby> : 테이블 몸통 행(내용)
• <tfoot> : 테이블 요약
• <tr> 태그는 테이블에서 열을 구분
• <th> 태그는 각 열의 제목을 나타냄, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬
• <td> 태그는 테이블의 열을 각각의 셀(cell)로 나눔

<table>
        <thead>
            <tr>
                <th>브라우져명</th>
                <th>제조사</th>
                <th>홈페이지</th>
            </tr>
        </thead>
        <!-- tr>td*3-->
        <tbody>
            <tr>
                <td>크롬</td>
                <td>Google</td>
                <td><a href="http://google.com">http://google.com</a></td>
            </tr>
            <tr>
                <td>사파리</td>
                <td>Apple</td>
                <td><a href="http://apple.com">http://apple.com</a></td>
            </tr>
            <tr>
                <td>파이어폭스</td>
                <td>Mozilla</td>
                <td><a href="http://Mozilla.com">http://Mozilla.com</a></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
		<!-- colspan="2" 열(가로)을 2개 합치기 -->
                <th colspan="2">브라우져 수</th>
                <td>3</td>
            </tr>
        </tfoot>
	<!-- tfoot(표맨아래)에 <caption> 요소는 표의 설명 또는 제목 -->
        <caption style="caption-side: bottom;">웹브라우져 표</caption>
</table>

---

결과화면