HTML 테이블(table)은 HTML 마크업 언어를 사용하여 행과 열을 갖는 표 또는 정보를 표시하는 데 사용되는 HTML 요소입니다.
테이블은 여러 행과 열을 가지며, 각 셀은 데이터를 포함할 수 있습니다.
<table>
<tr>
<th>제목 1</th>
<th>제목 2</th>
</tr>
<tr>
<td>행 1, 열 1</td>
<td>행 1, 열 2</td>
</tr>
<tr>
<td>행 2, 열 1</td>
<td>행 2, 열 2</td>
</tr>
</table>
- <table> : 테이블을 구성하는 가장 외곽 태그입니다.
- <tr> : 행을 나타내는 태그입니다.
- <th> : 테이블 헤더를 나타내는 태그입니다.
- <td> : 테이블의 각 셀을 나타내는 태그입니다.
CSS를 사용하여 테이블의 레이아웃, 스타일, 그리고 다른 표시 기능을 조정할 수 있습니다.
# Table tag
HTML의 <table> 태그는 행과 열을 갖는 표를 만드는 데 사용됩니다.
테이블은 <tr>(행), <th>(헤더 셀), <td>(일반 셀) 태그를 사용하여 구성됩니다.
<table> 태그에서 사용 가능한 속성에는 border, cellpadding, cellspacing, width 등이 있습니다.
이 속성들을 사용하여 테이블의 스타일을 적용할 수 있습니다.
# 행(row)과 열(column)
HTML 테이블은 행(row)과 열(column)으로 구성됩니다.
행은 <tr> 태그로, 열은 <td> 또는 <th> 태그로 표시됩니다.
- <tr>: 행을 나타내는 태그입니다. 행은 여러 열(<td> 또는 <th>)로 구성됩니다.
- <td> : 테이블의 일반 셀(cell)을 나타내는 태그입니다. 각 셀은 하나의 데이터 값을 가집니다.
- <th> : 테이블의 헤더 셀(header cell)을 나타내는 태그입니다. 헤더 셀은 테이블의 행 또는 열을 나타내는 제목을 가집니다.
# Table Header
HTML 테이블에서 헤더(header)는 테이블의 행 또는 열을 나타내는 제목을 나타냅니다.
헤더는 <th> 태그를 사용하여 정의됩니다.
헤더 셀은 기본적으로 굵게 표시되며, 텍스트 정렬이 기본적으로 중앙정렬됩니다.
# Table Data
HTML 테이블에서 테이블 데이터(Table Data)는 테이블의 각 셀의 내용을 나타냅니다.
테이블 데이터는 <td> 태그를 사용하여 정의됩니다.
<td> 태그는 테이블의 셀을 나타내는 태그입니다.
각 셀은 기본적으로 텍스트 내용을 포함할 수 있으며, 텍스트 정렬, 색상, 배경색, 각도 등을 지정할 수 있습니다.
# 행과 열의 확장
테이블 행을 확장하려면, rowspan 속성을 사용하여 테이블 데이터(<td>) 태그에 지정할 수 있습니다.
rowspan 속성은 행을 몇 개의 행으로 확장할지 지정합니다.
다음은 테이블 행을 확장하는 예제입니다:
<table>
<tr>
<th>제목 1</th>
<th>제목 2</th>
<th>제목 3</th>
</tr>
<tr>
<td rowspan="2">행 1, 열 1</td>
<td>행 1, 열 2</td>
<td>행 1, 열 3</td>
</tr>
<tr>
<td>행 2, 열 2</td>
<td>행 2, 열 3</td>
</tr>
</table>
위의 예제에서, 행 1, 열 1은 rowspan="2" 속성을 사용하여 두 개의 행으로 확장됩니다.
마찬가지로, 테이블 열을 확장하려면, colspan 속성을 사용하여 테이블 데이터(<td>) 태그에 지정할 수 있습니다.
colspan 속성은 열을 몇 개의 열로 확장할지 지정합니다.
다음은 테이블 열을 확장하는 예제입니다:
<table>
<tr>
<th>제목 1</th>
<th>제목 2</th>
<th>제목 3</th>
<th>제목 4</th>
</tr>
<tr>
<td>행 1, 열 1</td>
<td colspan="2">행 1, 2열~3열에 걸쳐진 2열</td>
<td>행 1, 열 4</td>
</tr>
<tr>
<td>행 2, 열 1</td>
<td>행 2, 열 2</td>
<td>행 2, 열 3</td>
<td>행 2, 열 4</td>
</tr>
</table>
위의 예제에서, 행 1, 2열~3열에 걸쳐진 2열은 colspan="2" 속성을 사용하여 두 개의 열로 확장됩니다.