HTML 테이블

HTML로 테이블을 만들 수 있습니다.

예제

테이블
이 예제는 HTML 문서에서 테이블을 생성하는 방법을 보여줍니다.
테이블 테두리
이 예제는 다양한 유형의 테이블 테두리를 보여줍니다.

（이 페이지 하단에서 더 많은 예제를 찾을 수 있습니다。）

테이블

테이블은 <table> 태그로 정의됩니다. 각 테이블은 여러 행(각 행은 <tr> 태그로 정의됩니다)을 가지고, 각 행은 여러 셀(각 셀은 <td> 태그로 정의됩니다)로 나뉩니다. 'td' 문자는 테이블 데이터(table data)를 의미하며, 이는 데이터 셀의 내용을 의미합니다. 데이터 셀은 텍스트, 이미지, 목록, 문단, 양식, 수평선, 테이블 등을 포함할 수 있습니다.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

브라우저에서 다음과 같이 표시됩니다:

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

테이블과 테두리 속성

테두리 속성을 정의하지 않으면 테이블이 테두리를 표시하지 않습니다. 때로는 이렇게 하면 유용하지만, 대부분의 경우 테두리를 표시하고 싶습니다.

테두리 속성을 사용하여 테두리가 있는 테이블을 표시합니다:

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

테이블 헤더

테이블 헤더는 <th> 태그로 정의됩니다.

대부분의 브라우저는 테이블 헤더를 중앙에 잇달아 표시되는 텍스트로 표시합니다:

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

브라우저에서 다음과 같이 표시됩니다:

Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

표格의 비어 있는 셀

일부 브라우저에서 내용이 없는 테이블 셀은 잘 표시되지 않습니다. 빈 셀이면 브라우저가 해당 셀의 테두리를 표시하지 못할 수 있습니다.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>

브라우저는 다음과 같이 표시할 수 있습니다:

표格의 비어 있는 셀

주의:이 빈 셀의 테두리는 표시되지 않습니다. 이런 상황을 피하기 위해 빈 셀에 공백 점유자를 추가하면 테두리가 표시됩니다.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td> </td>
<td>row 2, cell 2</td>
</tr>
</table>

브라우저에서 다음과 같이 표시됩니다:

row 1, cell 1 row 1, cell 2
　 row 2, cell 2

更多例子

빈 테이블
경계가 없는 테이블을 보여줍니다。
테이블의 헤더(Heading)
테이블 헤더를 표시하는 방법을 보여줍니다。
공백 셀
" "를 사용하여 내용이 없는 셀을 처리하는 방법을 보여줍니다。
제목이 있는 테이블
제목이 있는 테이블을 보여줍니다。
행이나 열을 건너는 테이블 셀
행이나 열을 건너는 테이블 셀을 정의하는 방법을 보여줍니다。
테이블 내 태그
다른 요소 내에서 요소를 표시하는 방법을 보여줍니다.
셀 마argins(Cell padding)
셀 내용과 경계 사이의 공간을 만드는 방법을 보여줍니다.
셀 간 간격(Cell spacing)
셀 간의 거리를 늘리는 방법을 보여줍니다.
테이블에 배경색이나 배경 이미지를 추가합니다.
테이블에 배경을 추가하는 방법을 보여줍니다。
테이블 셀에 배경색이나 배경 이미지를 추가하는 방법
한 개나 여러 개의 테이블 셀에 배경을 추가하는 방법을 보여줍니다。
테이블 셀 내용을 정렬하는 방법
이 예제에서 "align" 속성을 사용하여 셀 내용을 정렬하여 아름다운 테이블을 만드는 방법을 보여줍니다。
프레임(frame) 속성
이 예제에서 "frame" 속성을 사용하여 테이블 주위의 경계를 제어하는 방법을 보여줍니다。

테이블 태그

테이블 설명
<table> 테이블을 정의합니다。
<caption> 테이블 타이틀을 정의합니다。
<th> 테이블의 헤더를 정의합니다。
<tr> 테이블의 행을 정의합니다。
<td> 테이블 셀을 정의합니다。
<thead> 테이블의 헤더를 정의합니다。
<tbody> 테이블의 본문을 정의합니다。
<tfoot> 테이블의 푸터를 정의합니다。
<col> 테이블 열에 사용되는 속성을 정의합니다。
<colgroup> 테이블 열 그룹을 정의합니다。