> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/web/develop-page/html/table.md).

# \<TABLE>

## Table tag

`table` 태그는 행과 열로 구성된 표를 만드는 데 사용한다. 연관된 태그가 많이 등장하기 때문에 역할별로 구분하여 이해할 필요가 있다.

* `<table>` - 테이블 영역
* `<thead>` - 테이블 상단 제목 영역
* `<tbody>` - 테이블 중단 데이터 영역
* `<tfoot>` - 테이블 하단 보조 영역
* `<tr>` - 줄 영역
* `<th>` - 칸 영역(제목용)
* `<td>` - 칸 영역(데이터용)

{% embed url="<https://codepen.io/hiphop5782/pen/QWMEevj>" %}

### \<thead>, \<tbody>

`<thead>`는 **table header**라는 의미로 테이블 상단 제목 영역을 표시하기 위해 사용한다. `<tbody>`는 **table body**라는 의미로 테이블 중단 데이터 영역을 표시하기 위해 사용한다. 경우에 따라서는 제목이 좌측에 있는 테이블도 있으나 흔치 않기 때문에 기본적으로 제목이 상단에 있는 테이블을 위하여 각각의 태그들이 존재한다.

{% embed url="<https://codepen.io/hiphop5782/pen/RwZRXgv>" %}

### border

### border

`border` 속성을 통해 테이블에 테두리를 부여할 수 있다. 0으로 설정할 경우 테두리가 사라지며, 숫자가 커질 수록 두꺼워진다.

{% embed url="<https://codepen.io/hiphop5782/pen/wvqWVXa>" %}

### width, height

`width` 속성을 이용하여 <mark style="color:blue;">테이블</mark> 또는 <mark style="color:blue;">칸</mark>의 폭을 조절할 수 있다. 부여하지 않을 경우 내용에 맞춰 자동으로 설정되며, 단위 설정은 불가능하다. 기본적으로 [픽셀(px)](/web/develop-page/css/develop-guide/size/pixel.md#pixel-px)로 설정되며, 비율(%)로 지정 가능하다.

`height` 속성은 <mark style="color:blue;">테이블</mark> 또는 <mark style="color:blue;">칸</mark>의 높이를 조절할 수 있다. 부여하지 않을 경우 내용에 맞춰 자동으로 설정되며 width 속성과 동일하게 설정할 수 있다. 테이블에 작성된 행의 수에 따라 높이가 변하는 경우가 많아 설정하지 않는 경우가 많다.

{% content-ref url="/pages/H7sjGkGYQwWLHVTz2S9p" %}
[픽셀(px)](/web/develop-page/css/develop-guide/size/pixel.md)
{% endcontent-ref %}

{% embed url="<https://codepen.io/hiphop5782/pen/porbMxe>" %}

### align

`align` 속성을 이용하여 테이블 또는 내용에 대한 정렬을 설정할 수 있다.

* `left` - 왼쪽 정렬
* `center` - 가운데 정렬
* `right` - 오른쪽 정렬

{% embed url="<https://codepen.io/hiphop5782/pen/zYdBgbj>" %}

{% hint style="info" %}
`align` 속성이 여러 개 지정되어 있을 경우 **가장 가까운 영역**에 부여된 속성이 적용된다.
{% endhint %}

### colspan, rowspan

`colspan`과 `rowspan` 속성을 이용하여 셀 병합 효과를 낼 수 있다.

* `colspan` -  칸(th/td)을 작성된 숫자만큼의 칸에 걸쳐 자리할 수 있도록 설정
* `rowspan` - 칸(th/td)을 작성된 숫자만큼의 줄에 걸쳐 자리할 수 있도록 설정

{% embed url="<https://codepen.io/hiphop5782/pen/NWvRKPd>" %}

{% hint style="info" %}
rowspan과 colspan을 동시에 사용하면 온전한 테이블 모양이 나오지 않을 가능성이 높다.
{% endhint %}

### \<tfoot>

`<tfoot>`은 **table footer**라는 의미로 테이블 하단 영역을 표시하기 위해 사용한다. 테이블에 부가적인 도구들을 추가하고 싶을 때 사용한다.

{% embed url="<https://codepen.io/hiphop5782/pen/PoKGYZN>" %}

### 주의 사항

* 글자는 반드시 칸(th/td)에 작성해야 한다.
* table 부터 칸(th/td) 사이에 다른 태그나 글자를 넣지 말아야 한다.