..

Search

18) 테이블

HTML 테이블


HTML 테이블(Table)

테이블(Table)이란 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표를 의미합니다.

HTML에서는 <table>태그를 사용하여 이러한 테이블을 작성할 수 있습니다.

 

<table>태그는 다음과 같은 태그들로 구성됩니다.

 

1. <tr>태그는 테이블에서 열을 구분해 줍니다.

2. <th>태그는각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 됩니다.

3. <td>태그는 테이블의 열을 각각의 셀(cell)로 나누어 줍니다.

 

예제

<table style="width:100%">

    <tr style="background-color:lightgrey">

        <th>참치</th>

        <th>고래</th>      

    </tr>

    <tr>

        <td>상어</td>

        <td>문어</td>

    </tr>

    <tr>

        <td>오징어</td>

        <td>고등어</td>

    </tr>

</table>

코딩연습 ▶

 

CSS의 border 속성을 이용하여 테이블에 테두리를 표현할 수 있습니다.

border 속성값을 따로 명시하지 않으면, 해당 테이블은 언제나 빈 테두리를 가지게 됩니다.

 

예제

<style>

    table, th, tdborder: 1px solid black }

</style>

코딩연습 ▶

 

위의 예제에서 테이블의 테두리(border)가 두 줄씩 나타나는 이유는 <table>태그와 <th>태그, <td>태그가 모두 자신만의 테두리를 가지고 있기 때문입니다.

 

위와 같이 두 줄로 표현되는 테두리를 한 줄로 설정하려면 border-collapse 속성을 사용해야 합니다.

border-collapse 속성값을 collapse로 설정하면, 테이블의 테두리를 한 줄로 표현할 수 있습니다.

예제

<style>

    table, th, td { border: 1px solid black; border-collapse: collapse }

</style>

코딩연습 ▶


테이블의 열 합치기

colspan 속성을 사용하면 테이블의 열(column)을 합칠 수 있습니다.

예제

<table style="width:100%">

    <tr>

        <td>참치</td>

        <td colspan="2">고래</td>        

    </tr>

    <tr>

        <td>상어</td>

        <td>문어</td>        

        <td>꽁치</td>

    </tr>

</table>

코딩연습 ▶


테이블의 행 합치기

rowspan 속성을 사용하면 테이블의 행(row)을 합칠 수 있습니다.

예제

<table style="width:100%">

    <tr>

        <td rowspan="2">상어</td>

        <td>문어</td>        

        <td>꽁치</td>

    </tr>

    <tr>

        <td>고등어</td>        

        <td>돌고래</td>

    </tr>

</table>

코딩연습 ▶


테이블의 열과 행 합치기

colspan 속성과 rowspan 속성을 함께 사용하면, 더욱 복잡한 테이블도 표현할 수 있습니다.

예제

<table style="width:100%">

    <tr>

        <td colspan="6">1</td>

    </tr>

    <tr>

        <td colspan="6">2</td>

    </tr>

    <tr>

        <td rowspan="3">3</td>

        <td rowspan="3">4</td>

        <td colspan="2">5</td>

        <td>6</td>

        <td>7</td>

    </tr>

    <tr>

        <td colspan="3">8</td>

        <td>9</td>

    </tr>

    <tr>

        <td colspan="4">10</td>

    </tr>

</table>

코딩연습 ▶


테이블의 캡션(caption) 설정

<caption>태그를 사용하면 테이블 상단에 제목이나 짧은 설명을 붙일 수 있습니다.

예제

<table style="width:100%">

    <caption>해양 생물</caption>

    <tr>

        <td>참치</td>

        <td>고래</td>

        <td>날치</td>    

    </tr>

</table>

코딩연습 ▶


연습문제