html 테이블 태그 - table

테이블태그 <table>

 

이전까지는 div로 공간을 나눠서 사용했다면,

html5 에서는 테이블을 사용해 공간을 나눠 사용합니다.

 

테이블은 레이아웃을 구성할 때 중요한 틀이 됩니다.

 

네이버 홈페이지

 

네이버 홈페이지를 보면 검색창, 뉴스, 로그인, 오늘 읽을만한 글, 트렌드쇼핑 등 여러 공간으로 나뉘어 있습니다.

 

테이블 태그는 이처럼 각종 콘텐츠들을 원하는 위치에 배치하기 위해서

큰 하나의 화면을 구역별로 나누고, 원하는 구역에 콘텐츠를 배치하는 방식으로 웹 설계를 할 때 사용합니다.

 

테이블로 구성된 네이버 홈페이지 (실제와 무관)

이해가 쉽도록 빨간 선으로 가상의 테이블 구조로 나눠 보았습니다.

테이블을 생성하고, 행과 열의 병합을 거쳐 각 구역에 콘텐츠를 배치합니다.

 

 

테이블 생성

    <table width="500" height="600" border="1">
        <tr> <!-- 테이블 줄(행) -->
            <td></td> <!-- 테이블 칸(열) -->
            <td></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>

width와 height속성으로 테이블의 크기를 지정 해 줄 수 있습니다. 단위를 생략하면 px로 지정됩니다.

테이블만 생성하면 화면에 보이지 않기 때문에 border속성으로 선을 추가 해 주었습니다.

 

<tr>태그는 테이블의 행을 생성하고, <td>태그는 테이블의 열을 생성합니다.

태그의 갯수만큼 행과 열을 생성 할 수 있습니다.

 

2*2 테이블

 

 

열 합치기 열병합 colspan

<!-- 열(칸) 합치기 연습 -->

    <table width="500" height="600" border="1">
        <tr> <!--첫행-->
            <td colspan="4"></td>
            <!-- 삭제 -->
            <!-- 삭제 -->
            <!-- 삭제 -->
        </tr>

        <tr> <!--두번째행-->
            <td></td>
            <td colspan="3"></td>
            <!-- 삭제 -->
            <!-- 삭제 -->
        </tr>

        <tr> <!--세번째행-->
            <td></td>
            <td></td>
            <td colspan="2"></td>
            <!-- 삭제 -->
        </tr>

        <tr> <!--네번째행-->
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

 

여러칸(열)을 합치기 위해서는 colspan 태그를 이용합니다.

사용방법은 colspan="합칠 칸 수" 입니다. colspan태그를 사용하면 행(<tr>)내부의 태그 뒷 칸(<td>)와 합쳐집니다.

합쳐진 칸<td> 은 삭제해주며, colspan태그앞의 칸과는 합칠 수 없습니다.

 

칸 합치기 연습

 

 

행 합치기 행병합 rowspan

<!-- 행(줄) 합치기 -->
    <table width="400" height="400" border="1">
        <tr>
            <td rowspan="2"></td>
            <td></td>
        </tr>

        <tr>
            <!-- 삭제 -->
            <td></td>
        </tr>
    </table>    

 

여러줄(행)을 합치기 위해서는 rowspan태그를 사용합니다.

사용방법은 앞서 본 colspan과 동일하며, 다음 행(<tr>)의 <td>와 합쳐집니다.

이 역시 태그 다음의 줄과 합치는것만 가능하며 태그 앞의 줄과는 합칠 수 없습니다.

줄(행) 합치기

 

 

 

연습문제

아래와 같은 테이블을 생성하시오.

연습문제

연습문제 답

    <table width="500" height="600" border="1">
        <tr> <!--첫행-->
            <td rowspan="3"></td>
            <td colspan="3"></td>
            <!--삭제-->
            <!--삭제-->
        </tr>

        <tr> <!--두번째행-->
            <!--삭제-->
            <td rowspan="2"></td>
            <td colspan="2"></td>
            <!--삭제-->
        </tr>

        <tr> <!--세번째행-->
            <!--삭제-->
            <!--삭제-->
            <td></td>
            <td></td>
        </tr>

        <tr> <!--네번째행-->
            <td colspan="4"></td>
            <!--삭제-->
            <!--삭제-->
            <!--삭제-->
        </tr>
    </table>