table

table이란 ? 표를 나타내는 태그 ( 표 전체 테두리 박스)

tr : 행 (하나의 행을 의미) 

th/td : 열 (tr안의 한칸) 

th : 제목열 (가운데 정렬, 굵은 글씨)

td : 일반열 (왼쪽 정렬, 일반글씨)

 

예제

- 테이블 생성

- tr * 3 / td * 3*4 =12개

- css에서 모양, 색, 크기, 선 지정 가능

- border : 테두리 두께- borderColor: 테두리 색- width : 너비- colspan / rowspan : 셀 병합. 병합된 셀은 지워줘야 함.

 

thead / tbody / tfoot => 순서를 바꾸어 써도 head / body / foot 순서대로 나열
HTML5 = 시멘틱 태그 

 

<table border="1">
        <tr>
            <th width="100">이름</th>
            <th>국어</th>
            <th>영어</th>
        </tr>
        <tr>
            <td rowspan="2">영이</td>
            <td>70</td>
            <td>80</td>
        </tr>
        <tr>
            <td colspan="2">78</td>
        </tr>
    </table>

    <table border="1">
        <caption>테이블 제목</caption>
        <thead>
            <tr>
                <th>제목1</th>
                <th>제목2</th>
                <th>제목3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>푸터1</td>
                <td>푸터2</td>
                <td>푸터3</td>
            </tr>
        </tfoot>
    </table>

 

결과

이름	국어	영어
영이	70	80
	78

테이블 제목

제목1	제목2	제목3
1	2	3
1	2	3
1	2	3
푸터1	푸터2	푸터3

 

예제

- 다음 성적표 데이터를 테이블로 생성   

      번호    이름    성적
        1       길동    90
        2       순이    80
        3       영철    70
        합계            ???

<table border="1" style="width: 20%;">
        <caption>성적표</caption>
        <thead>
            <tr>
                <th>번호</th>
                <th>이름</th>
                <th>성적</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>길동</td>
                <td>90</td>
            </tr>
            <tr>
                <td>2</td>
                <td>순이</td>
                <td>80</td>
            </tr>
            <tr>
                <td>3</td>
                <td>영철</td>
                <td>70</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th colspan="2">합계</th>
                <th>240</th>
            </tr>
        </tfoot>
     </table>

 

결과

성적표

번호	이름	성적
1	길동	90
2	순이	80
3	영철	70
합계		240