HTML 목록

테이블은 여러 작은 셀로 구성되며, 이러한 작은 셀은 여러 행과 열로 정렬되어 있습니다. 이러한 행과 열로 구성된 레이아웃을 테이블이라고 합니다. 테이블은 'table' 태그로 정의됩니다.

HTML 테이블 예제:

온라인 예제

HTML 테이블
이 예제에서는 HTML 문서에서 테이블을 생성하는 방법을 보여줍니다.

<table　border="1"　width="300">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>

HTML 목록

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

테이블 예제

<table　border="1">
　　　　<tr>
　　　　　　　　<td>행　1,　열　1</td>
　　　　　　　　<td>행　1,　열　2</td>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>행　2,　열　1</td>
　　　　　　　　<td>행　2,　열　2</td>
　　　　</tr>
</table>

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

HTML 테이블과 경계선 속성

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

테이블에 경계선을 표시하려면 경계선 속성을 사용합니다：

<table　border="1">
　　　　<tr>
　　　　　　　　<td>행　1,　열　1</td>
　　　　　　　　<td>행　1,　열　2</td>
　　　　</tr>
</table>

HTML 테이블 표두

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

대부분의 브라우저는 표두를 중앙에 정렬된粗体 텍스트로 표시합니다：

<table　border="1">
　　　　<tr>
　　　　　　　　<th>첫 번째 표두</th>
　　　　　　　　<th>두 번째 표두</th>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>행　1,　열　1</td>
　　　　　　　　<td>행　1,　열　2</td>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>행　2,　열　1</td>
　　　　　　　　<td>행　2,　열　2</td>
　　　　</tr>
</table>

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

更多示例

경계선이 없는 테이블
경계선이 없는 테이블을 보여줍니다.

테이블의 표두(제목)
이 예제에서는 테이블 표두를 표시하는 방법을 보여줍니다.

제목이 있는 테이블
제목(caption)이 있는 테이블을 보여줍니다.

행이나 열을 건너는 테이블 셀
이 예제에서는 행이나 열을 건너는 테이블 셀을 정의하는 방법을 보여줍니다.

테이블 내 태그
이 예제에서는 다른 요소 내에서 요소를 표시하는 방법을 보여줍니다.

셀 패딩(셀 내백)
이 예제에서는 셀 패딩을 사용하여 셀 내용과 경계선 간의 공백을 만드는 방법을 보여줍니다.

셀 스페이싱(셀 간 간격)
이 예제에서는 셀 스페이싱을 사용하여 셀 간의 거리를 늘이는 방법을 보여줍니다.

HTML 테이블 태그