[Html] 테이블 요소 - 테두리, 합치기, 캡션

테이블(Table)

• <tr> (table row)는 테이블에서 열(줄)을 구분해 준다.
• <th> (table heading)는 제목 칸으로 자동으로 굵은 글씨에 가운데 정렬이 된다.
• <td> (table data)는 테이블의 열을 각각의 칸으로 나누어 준다.

<table border="1">
    <tr>
        <th>참치</th>
        <th>고래</th>      
    </tr>
    <tr>
        <td>상어</td>
        <td>문어</td>
    </tr>
    <tr>
        <td>오징어</td>
        <td>고등어</td>
    </tr>
</table>

 

테두리 표현

• CSS의 border 속성값을 따로 명시하지 않으면 테이블은 언제나 빈 테두리다.

<style>
      table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
      }
      th, td {
        padding: 15px;
      }
</style>

 

테이블 합치기

열 합치기 - colspan

<table style="width:100%">
    <tr>
        <td>참치</td>
        <td colspan="2">고래</td>        
    </tr>
    <tr>
        <td>상어</td>
        <td>문어</td>        
        <td>꽁치</td>
    </tr>
</table>

행 합치기 - rowspan

<table style="width:100%">
    <tr>
        <td rowspan="2">상어</td>
        <td>문어</td>        
        <td>꽁치</td>
    </tr>
    <tr>
        <td>고등어</td>        
        <td>돌고래</td>
    </tr>
</table>

열과 행 합치기

<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>태그를 사용하면 테이블 상단에 제목이나 짧은 설명을 붙일 수 있다.

<table style="width:100%">
    <caption>해양 생물</caption>
    <tr>
        <td>참치</td>
        <td>고래</td>
        <td>날치</td>    
    </tr>
</table>

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/