[HTML]표를 만드는 <table> 태그

표 생성. data 관리.

 

1. <table> 기본 구조

<caption>
<th>	<th>	<th>	← 1행
<td>	<td>	<td>	← 2행
↑ 1열	↑ 2열	↑ 3열

-<caption>  :  표 제목

-<th>  :  표 머리 정의, 셀 제목 글자 강조.

-<tr>  :  행

-<td>  :  열

 

(ex) 2행 3열 표 만드는 코드

<table>
    <caption>2행 3열 table</caption>
        <tr>
            <th>1행 1열</th>
            <th>1행 2열</th>
            <th>1행 3열</th>
        </tr>
        <tr>
            <td>2행 1열</td>
            <td>2행 2열</td>
            <td>2행 3열</td>
        </tr>
</table>

 

 

2. <table> 태그 셀 병합

-rowspan : 행 병합. 셀을 세로로 병합.

-colspan : 열 병합. 셀을 가로로 병합.

 

(ex) 아래와 같은 표를 만들고자 할 때

Alpha	Beta
	Gamma	Delta
Epsilon	Zeta

 

소스코드

<table border="1"><!--HTmL5에서 border 미지원. 병합된 걸 보기 위해 적어둠.-->
    <caption>행 병합, 열 병합</caption>
    <tr>
        <th rowspan="2">Alpha</th>
        <th colspan="2">Beta</th>
    </tr>
    <tr>
        <td>Gamma</td>
        <td>Delta</td>
    </tr>
    <tr>
        <td>Epsilon</td>
        <td colspan="2">Zeta</td>
    </tr>
</table>

 

 

3. 시멘틱 태그

HTML5에서 필요성이 대두되었음.

틀은 두고 입력된 데이터를 리셋시킬때 이용(?) Ajax

기준 틀을 만들고 안 의 내용을 비우고 다시 입력할 때 유용. 항상 쓰는 건 아님. 필요할 때만.

-<thead> : 표 머리말(head) 부분의 그룹 태그

-<tbody> : 표 본문(body) 부분의 그룹 태그

-<tfoot>  :  표 꼬리말(footer) 부분의 그룹 태그. 가계부 적을때 마지막에 적는 합계 같은 것.

                 위치 중요! <thead> → <tfoot> → <tbody>

 

(ex) <thead>, <tfoot>, <tbody> 이용해 table 만들기

소스 코드

<table>
    <caption>Semantic Table Tag</caption>
    <thead>
        <tr>
            <th>태그 명칭</th>
            <th>셜명</th>
            <th>사용 여부</th>
        </tr>
    </thead>
    <tfoot> <!--tfoot 위치 중요!! -->
        <tr>
            <td colspan="3">참고 사이트 : http://www.w3.org/</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>thead</td>
            <td>표 머리말(head) 부분의 그룹 태그</td>
            <td>가능</td>
        </tr>
        <tr>
            <td>tfoot</td>
            <td>표 꼬리말(footer) 부분의 그룹 태그</td>
            <td>가능</td>
        </tr>
        <tr>
            <td>tbody</td>
            <td>표 본문(body) 부분의 그룹 태그</td>
            <td>가능</td>
        </tr>
    </tbody>
</table>

 

 

4. <table> 태그 속성

HTML5에서 지원하지 않는 속성. CSS에서 지정.

align, bgcolor, border, cellpadding, cellspacing, frame, rules, summary, width 등