html tag(3) - table tag에 대하여 알아보자.

날짜:


목차

1. table 태그란

2. table 제목 태그

3. table 구조 태그 


1. table 태그란?

table tag란, 웹 문서에서 자료 등을 정리 할 때 주로 사용하는 tag이다.

table은 row, columm으로 이루어져 있으며, 이 2개가 만나는 영역은 cell이라고 한다. 



/* 기본 tag: */
<table> </table> /* 시작과 끝 */
<tr> </tr> /* Table Row / 표의 행을 나타냄 */
<th> </th> /* Table Header / 표의 제목 셀을 나타냄 */
<td> </td> /* Table Data / 일반 셀을 나타냄 */

/* 예시 */
<table border="1"> /* 테두리 생성 (border) */
<tr>
	<th>제목입니다</th>
</tr>
<tr>
	<td>데이터가 들어갑니다</td>
</tr>
</table>




tip: colspan을 사용하면 '가로로' 셀 합치기가 가능하다.






2. table 제목 태그

제목을 작성하는 caption tag는, table 내부에서 작성한다.

사용한 table의 제목은 table 상단 중앙에 표시된다. 


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




3.table 구조 태그


표의 구조를 정의하는 태그이며, 아래와 같은 태그가 있다. 

/* table 구조 태그 */
<thead></thead> -> 제목 영역으로 1개만 존재해야 한다.
<tbody></tbody> -> 본문 영역으로, <thead> 와 달리 여려 개가 존재할 수 있다.
<tfoot></tfoot> -> 요약 영역으로, <thed>처럼 1개만 존재해야 한다.





/* 예시 */
 <table border="1">
        <thead>
            <tr>
                <th>
                    스마트폰
                </th>
                <th>
                    제조사
                </th>
            </tr>
            <tr>
                <td>
                    갤22
                </td>
                <td>
                    삼성
                </td>
            </tr>
            <tr>
                <td>
                    아이폰
                </td>
                <td>
                    apple
                </td>
            </tr>
        </thead>
    </table>