<tr>
<tr> 태그는 표의 행을 설정합니다.
<table> 태그는 표를 만들 때 사용합니다. 테이블은 테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는 테이블을 이용해서 레이아웃을 표현한 적도 있지만 웹표준을 준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은 적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야 합니다.
테이블은 제목을 표시하기 위해 <caption>을 사용하고 셀 요소를 그룹화하기 위해 <colgroup>과 <col>을 사용합니다. 테이블 전체 구조를 분리하기 위해 <thead>, <tbody>, <tfoot>를 사용하며, 행과 열을 나타내는 <tr>, <td> <th>등을 사용합니다. 여기에 접근성을 위해 scope 속성을 사용하고 셀의 병합을 위해 colspan과 rowspan을 사용하게 됩니다.
<tr>
<tr> 태그는 표의 행을 설정합니다.
| 특징 | 설명 |
|---|---|
| 요소 | 해당없음(None) |
| 닫는 태그 | 닫는 태그 사용(<tr> ~ </tr>) |
| 버전 | HTML4 |
| 시각적 표현 | 행을 만듦 |
| 사용성 |
정의(Definition)
- <tr> 태그는 표의 행을 설정합니다.
- <tr>는 <td>(데이터 셀)와 <th>(헤더 셀) 요소를 같이 사용합니다.
table과 관련된 태그(Flex Related Tags)
- <table> 태그는 표를 설정합니다.
- <caption> 태그는 표의 제목을 설정합니다.
- <thead> 태그는 표의 헤더 영역을 그룹화합니다.
- <tbody> 태그는 표의 본문 영역을 그룹화합니다.
- <tfoot> 태그는 표의 푸터 영역을 그룹화합니다.
- <tr> 태그는 표의 행을 설정합니다.
- <td> 태그는 표의 열(셀)을 설정합니다.
- <th> 태그는 행이나 열에 타이틀을 설정합니다.
- <colgroup> 태그는 표의 열을 묶는 그룹을 설정합니다.
- <col> 태그는 <colgroup> 요소에 속하는 각 열의 속성을 설정합니다.
속성(Property)
| 속성 | 값(예) | 설명 | 버전 |
|---|---|---|---|
| align |
right left center justify char |
테이블의 행을 오른쪽으로 정렬합니다. 테이블의 행을 왼쪽으로 정렬합니다. 테이블의 행을 가운데로 정렬합니다. 테이블의 행을 양쪽으로 정렬합니다. 테이블의 문자를 설정합니다. |
 |
| bgcolor | bgcolor="red" | 테이블 행의 배경 색을 설정합니다. | |
| char | char="." | 테이블 요소의 소수점을 설정합니다. | |
| charoff | character | 테이블 요소의 문자 수를 설정합니다. | |
| valign |
top middle bottom baseline |
테이블 행의 수직 정렬을 위로 설정합니다. 테이블 행의 수직 정렬을 가운데로 설정합니다. 테이블 행의 수직 정렬을 밑으로 설정합니다. 테이블 행의 수직 정렬을 기본위치로 설정합니다. |
|
예제1(Sample)
표를 설정한 예제입니다.
| 표 제목1 | 표 제목2 | 표 제목3 | 표 제목4 | 표 제목5 |
|---|---|---|---|---|
| 표 내용1 | 표 내용1 | 표 내용1 | 표 내용1 | 표 내용1 |
| 표 내용2 | 표 내용2 | 표 내용2 | 표 내용2 | 표 내용2 |
| 표 내용3 | 표 내용3 | 표 내용3 | 표 내용3 | 표 내용3 |
| 표 내용4 | 표 내용4 | 표 내용4 | 표 내용4 | 표 내용4 |
| 표 내용5 | 표 내용5 | 표 내용5 | 표 내용5 | 표 내용5 |
HTML
CSS
SCRIPT
<table class="sample-table">
<caption>표 제목 설정</caption>
<colgroup>
<col>
<col class="blue">
<col class="red" span="2">
<col>
</colgroup>
<thead>
<tr>
<th>표 제목1</th>
<th>표 제목2</th>
<th>표 제목3</th>
<th>표 제목4</th>
<th>표 제목5</th>
</tr>
</thead>
<tbody>
<tr>
<td>표 내용1</td>
<td>표 내용1</td>
<td>표 내용1</td>
<td>표 내용1</td>
<td>표 내용1</td>
</tr>
<tr>
<td>표 내용2</td>
<td>표 내용2</td>
<td>표 내용2</td>
<td>표 내용2</td>
<td>표 내용2</td>
</tr>
<tr>
<td>표 내용3</td>
<td>표 내용3</td>
<td>표 내용3</td>
<td>표 내용3</td>
<td>표 내용3</td>
</tr>
<tr>
<td>표 내용4</td>
<td>표 내용4</td>
<td>표 내용4</td>
<td>표 내용4</td>
<td>표 내용4</td>
</tr>
<tr>
<td>표 내용5</td>
<td>표 내용5</td>
<td>표 내용5</td>
<td>표 내용5</td>
<td>표 내용5</td>
</tr>
</tbody>
</table>
table th,
table td {
border: 1px solid #ccc;
padding: 10px;
}
table .blue {background: #deeeff;}
table .red {background: #ffdddd;}
//javascript none
호환성(Compatibility)
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <tr> | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| align | 사용가능 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| bgcolor | 사용가능 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용가능 | 사용가능 |
| char | 사용가능 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| charoff | 사용가능 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| valign | 사용가능 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
