<table> Table Element
HTML에서 <table> 성분은 행과 열로 구성된 2차원의 테이블을 나타내기 위해 사용된다.
<table>
<!-- 행과 열이 여기에 들어간다. -->
</table>
<tr> Table Row Element
테이블 행(row) 성분인 <tr>은 테이블 데이터와 테이블 헤딩을 추가하기 전에 테이블에 행을 추가하기 위해 사용된다.
<table>
<tr>
...
</tr>
</table>
<td> Table Data Element
테이블 데이터 성분인 <td>는 테이블 행인 <tr> 안에 들어가는 내용이다. 이를 이용하여 테이블에 데이터셀을 추가할 수 있다.
<table>
<tr>
<td>1번째 데이터 셀</td>
<td>2번째 데이터 셀</td>
</tr>
</table>
위 코드의 결과는 아래와 같다.
| 1번째 데이터 셀 | 2번째 데이터 셀 |
<thead> Table Head Element
테이블 헤드 성분인 <thead>는 테이블 열들을 하나로 묶인 테이블 행의 헤딩headings을 정의한다.
<table>
<thead>
<tr>
<th>heading 1</th>
<th>heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>열 1</td>
<td>열 2</td>
</tr>
</tbody>
</table>
위 코드의 결과는 다음과 같다.
| heading 1 | heading 2 |
| 열 1 | 열 2 |
'rowspan' Attribute
colspan과 비슷하게, rowspan 속성은 테이블 헤더나 테이블 데이터 성분에 부여된다.
이때 테이블에서 행이 얼마나 많이 확장되는지를 나타낸다.
rowspan은 default 값으로 1이 정해져 있으며, 65534까지의 양의 정수 중 어떤 값이든 가질 수 있다.
<table>
<tr>
<th>행 1:</th>
<td>열 1</td>
<td>열 2</td>
</tr>
<tr>
<th rowspan="2">행 2 (이 행은 행 2개로 확장된다):</th>
<td>열 1</td>
<td>얄 2</td>
</tr>
<tr>
<td>열 1</td>
<td>열 2</td>
</tr>
<tr>
<th>행 3:</th>
<td>열 1</td>
<td>열 2</td>
</tr>
</table>
위 코드의 결과는 다음과 같다.
| 행 1: | 열 1 | 열 2 |
| 행 2 (이 행은 행 2개로 확장된다) | 열 1 | 열 2 |
| 열 1 | 열 2 | |
| 행 3: | 열 1 | 열 2 |
<tbody> Table Body Element
테이블 바디 성분인 <tbody>는 테이블 heading이나 테이블 footer가 아닌 모든 테이블 데이터를 포함할 수 있다.
만일 이 성분을 사용한다면, <tbody>는 모든 테이블 행 <tr> 성분들을 포함하며, <tr> 성분들은 테이블의 body를 구성한다.
<table>은 직계 자식으로 <tbody>와 <tr> 둘다 가질 수 없다.
<table>
<tbody>
<tr>
<td>행 1</td>
</tr>
<tr>
<td>행 2</td>
</tr>
<tr>
<td>행 3</td>
</tr>
</tbody>
</table>
<th> Table Heading Element
테이블 헤딩 성분인 <th>는 테이블의 행과 열에 제목을 추가하기 위해 사용된다.
<th>는 반드시 테이블 행 성분인 <tr> 안에 들어있어야만 사용할 수 있다.
<table>
<tr>
<th>첫번째 열</th>
<th>두번째 열</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
위 코드의 실행 결과는 다음과 같다.
| 첫번째 열 | 두번째 열 |
| 1 | 2 |
'colspan' Attribute
colspan 속성은 테이블 헤더 <th>나 테이블 데이터 <td> 성분에 부여되어 테이블에서 열이 얼마나 많이 확장되는지를 나타낸다.
colspan의 value는 1이 default로 부여되어 있으며, 1부터 1000 사이의 양의 정수 중 하나의 값을 가진다.
<table>
<tr>
<th>행 1:</th>
<td>열 1</td>
<td>열 2</td>
<td>열 3</td>
</tr>
<tr>
<th>행 2:</th>
<td colspan="2">열 1 (2개의 열로 확장된다)</td>
<td>열 2</td>
<td>열 3</td>
</tr>
</table>
위 코드의 결과는 다음과 같다.
| 행 1: | 열 1 | 열 2 | 열 3 |
| 행 2: | 열 1 (2개의 열로 확장된다) | 열 2 | |
대부분의 브라우저는 첫 번째 행의 열 수(4개)를 기준으로 표의 열 수를 결정하고, 초과되는 셀은 무시하거나 자동 조정한다.
따라서 열 3는 표의 열 수가 이미 초과되었기 때문에 무시되며, 결과적으로 두번째 행은:
- <th> 1칸
- <td colspan="2"> → 2칸
- <td> 1칸
- ⇒ 총 4칸
<tfoot> Table Footer Element
테이블 footer 성분인 <tfoot>은 테이블 행에 footer 내용을 넣거나 테이블의 끝에 내용을 요약하기 위해 사용된다.
<table>
<thead>
<tr>
<th>제목 1</th>
<th>제목 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>열 1</td>
<td>열 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>열 1의 요약</td>
<td>열 2의 요약</td>
</tr>
</tfoot>
</table>
위 코드의 결과는 다음과 같다.
| 제목 1 | 제목 2 |
| 열 1 | 열 2 |
| 열 1의 요약 | 열 2의 요약 |
참고자료
https://www.codecademy.com/learn/learn-html/modules/learn-html-tables/cheatsheet