[HTML] 테이블 만들기 (table,tr,th,td)

테이블 만들기

table

테이블(Table)이란 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표를 의미합니다. HTML에서는 <table>태그를 사용하여 이러한 테이블을 작성할 수 있습니다.

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

• 1. <tr>태그는 테이블에서 열을 구분해 줍니다.
• 2. <th>태그는각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 됩니다.
• 3. <td>태그는 테이블의 열을 각각의 셀(cell)로 나누어 줍니다.

<talbe 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의 CSS의 border 속성을 이용하여 테이블에 테두리를 표현할 수 있습니다. border 속성값을 따로 명시하지 않으면, 해당 테이블은 언제나 빈 테두리를 가지게 됩니다.

<style>
	table, th, td { border: 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)

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

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

테이블의 행 합치기(rowspan)

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

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

테이블의 캡션(caption)설정

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

<table style="width:100%">
    <caption>해양 생물</caption>
    <tr>
        <td>상어</th>
    	<td>문어</td>
    	<td>꽁치</td>
    </tr>
</table>