html (8) table [tr, td, th, colspan, rowspan, caption, 표의 구조]

table

표를 이용한 형태를 만들 때 사용하는 태그
기본적으로 몇줄(=행) 몇칸(=열)

table 구조

table >> tr (가로줄/행) >> td (세로줄/칸,열)
칸의 기본적인 성격 t 축성 middle

1. tr

table row의 약자
가로로 된 선, 테이블의 행을 의미하는 태그
자식으로 th, td(칸/열)이 반드시 있어야 한다.

2. td

table data cell의 약자로 하나의 셀을 의미 (열)

코드

 	<table>
        <tr>
            <td>사과</td>
            <td>빨간색</td>
            <td>5,000원</td>
        </tr>
        <tr>
            <td>바나나</td>
            <td>노란색</td>
            <td>6,000원</td>
        </tr>
    </table>

결과

사과	빨간색	5,000원
바나나	노란색	6,000원

3. th

table header cell의 약자
table의 head를 구분지을 때 사용
부모인 tr 안에 있어야 한다.
테이블 제목 셀(칸)을 의미

th의 기본 스타일
text-align : center
font-weight : bold

코드

 <table>
        <tr>
            <th>품목</th>
            <th>가격</th>
        </tr>
        <tr>
            <td>딸기</td>
            <td>5,000원</td>
        </tr>
        <tr>
            <td>사과</td>
            <td>4,000원</td>
        </tr>
    </table>

결과

품목	가격
딸기	5,000원
사과	4,000원

4. colspan

가로 셀 병합 : colspan="합쳐지는열의개수"

코드

<table>
        <tr>
            <th colspan="2">품목</th>
        </tr>
        <tr>
            <td>딸기</td>
            <td>5,000원</td>
        </tr>
        <tr>
            <td>사과</td>
            <td>4,000원</td>
        </tr>
</table>

결과

품목
딸기	5,000원
사과	4,000원

### 5. rowspan

세로 셀 병합 : rowspan="합쳐지는행의개수"

코드

 <table>
        <tr>
            <th colspan="2">공휴일</th>
        </tr>
        <tr>
            <td rowspan="2">5월</td>
            <td>어린이날</td>
        </tr>
        <tr>
            <td>석가탄신일</td>
        </tr>
</table>

결과

공휴일
5월	어린이날
석가탄신일

### 6. caption

table의 제목이나 설명을 작성하는 태그 (center)

7. 표의 구조

화면 낭독기를 통해 표의 구조를 쉽게 이해 가능

thead : 제목 부분
tbody : 표의 부분 (본문)
tfoot : 표의 하단 부분 (요약)

코드

 <table>
        <caption>표의 구조 (의미)</caption>
        <thead>
            <tr>
                <th>th/ table 머리</th>
                <th>th/ table 머리</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td> td/ table 내용 </td>
                <td> td/ table 내용 </td>
            </tr>
        </tbody>
</table>

결과


표의 구조 (의미)

th/ table 머리	th/ table 머리
td/ table 내용	td/ table 내용