06.08(table)

table 구성요소

태그	설명
<table></table>	테이블을 만드는 태그(테이블 관련 최상위태그)
<th></th>	테이블의 헤더부분을 만드는 태그
<tr></tr>	테이블의 행을 만드는 태그
<td></td>	테이블의 열을 만드는 태그

 

작성예시

<table border=1>
    <tr>
        <th>브라우져</th>
        <th>제조사</th>
        <th>홈페이지</th>
    </tr>
    <tr>
        <td>IE</td>
        <td>MS</td>
        <td>http://www.microsoft.com</td>
    </tr>
    <tr>
        <td>Chorme</td>
        <td>Google</td>
        <td>https://www.google.com</td>
    </tr>
    <tr>
        <td>Safari</td>
        <td>Apple</td>
        <td>https://www.apple.com</td>
    </tr>
    <tr>
        <td>FireFox</td>
        <td>Mozilla</td>
        <td>https://www.mozilla.com</td>
    </tr>
</table>

작성예시 테이블

 

 

테이블 디자인

속성	설명
border	테이블의 테두리
bordercolor	테이블의 테두리 색상
width	테이블 가로 크기
height	테이블 세로 크기
align	정렬
bgcolor	배경색
colspan	가로 합병(열 합병)
rowspan	세로 합병(행 합병)

 

table 관련 태그

필수 사항은 아니나 구분을 쉽게 하기위하여 사용

tfoot은 중간에 선언해도 맨 끝에 나옴

태그	설명
<thead></thead>	테이블 제목
<tbody></tbody>	테이블 내용
<tfoot></tfoot>	테이블 구성상 끝에 올 내용

 

작성예시

thead, tbody, tfoot과 colspan, rowspan을 사용

<table border="1">
    <thead>
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>주소</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>권정렬</td>
            <td>40</td>
            <td rowspan="2">전남 순천</td>
        </tr>
        <tr>
            <td>박보검</td>
            <td>25</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">총인원</td>
            <td>2명</td>
        </tr>
    </tfoot>
</table>

작성예시 테이블