4. HTML 테이블

테이블

정보를 이차원적으로 표현하기 위해서 사용하며 웹 문서에서 테이블을 이용하여 데이터를 효과적으로 표현할 수 있다.

테이블 작성

• <table> : 테이블 생성을 위한 태그
• <tr> : table row으로써 테이블에 하나의 행 생성
• <td> : table data으로써 테이블에 하나의 셀 생성
• <th> : table header으로써 테이블의 제목으로 표시되는 셀 생성
• <caption>: 테이블의 제목

테이블 선언 태그

<table> ~ </table>

으로 테이블을 선언해주고 <table>태그 안에서 <tr>, <td>, <th> 태그를 사용한다.

<table border="1">
            <tr>
                <td>first data</td>
                <td>second data</td>
            </tr>
</table>

테이블 제목 태그

<th> 와 <caption>과 같은 역할(제목)을 수행하지만 차이점이 있는데 <th> 태그는 제목으로 표시되는 셀이다.

<caption> 테이블의 제목 </caption>

<table border="1">
                <caption>Real Title</caption>
                <tr>
                    <th>hello</th>
                    <td>first data</td>
                    <td>second data</td>
                </tr>

                <tr>
                    <th>world</th>
                    <td>third data</td>
                    <td>fourth data</td>
                </tr>
</table>

테이블의 셀 합치기 태그

테이블의 셀을 가로 또는 세로로 확장시켜 셀들이 합쳐진 효과를 낼 수 있는데 이 때는 <td>, <th> 태그의 rowspan이나 colspan 속성을 이용한다

세로로 셀 합치기

• <td rowspan="n"> ~ </td> : n은 합칠 셀의 수
• <th rowspan="n"> ~ </th> : n은 합칠 셀의 수

만약 <th rowspan="3"> 이라는 태그를 사용했다면 세로 3칸을 합치게 된다.

가로로 셀 합치기

• <td colspan="n"> ~ </td> : n은 합칠 셀의 수
• <th colspan="n"> ~ </th> : n은 합칠 셀의 수

실행 예제

<table border="5">
                <tr>
                    <th rowspan="3">Nations</th>
                    <td>Korea</td>
                    <td>seoul</td>
                </tr>

                <tr>
                    <td>Japan</td>
                    <td>Tokyo</td>
                </tr>

                <tr>
                    <td colspan="2">Singapore</td>
                </tr>
  </table>

테이블 서식

테이블을 꾸미기 위한 스타일 지정을 배워보자.

테이블 외곽 선 지정

테이블에서도 테두리를 표시하고 그 굵기를 지정할 수 있는데 픽셀의 수가 큰 값일 수록 테두리가 커지고 0으로 설정하면 선이 보이지 않는다. 최초 default값은 0 이므로 참고하자.

<table border="픽셀 수"> ~ </table>

테이블 크기 조절

테이블의 크기를 조절하기 위해서는 <table>태그의 width 과 height 속성을 이용한다. 세밀한 제어를 위해 비율을 사용하는것이 권장

width(너비)
<table width="픽셀 수 / 너비에 대한 비율(%)"> ~ </table>

height(높이)
<table height="픽셀 수/ 너비에 대한 비율(%)"> ~ </table>

셀 간격과 여백 조절

cellspacing의 속성을 이용하여 셀과 셀 사이의 간격을 조절할 수 있고 cellpadding 속성을 이용하여 셀 경계와 내부 텍스트 사이의 여백을 조절할 수 있다.

• <table cellspacing="픽셀 수"> :셀과 셀 사이 간격
• <table cellpadding="픽셀 수"> :셀 내부의 여백