<tr>


HTML <tr> 태그

Instances

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>0</td>
  </tr>
  <tr>
    <td>February</td>
    <td></td>
  </tr>
</table>

</body>
</html>

인스턴스 실행»

온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요

브라우저 지원

1000.png

모든 주요 브라우저 <tr> 태그를 지원합니다.

태그 정의 및 사용 지침

<tr> 태그는 HTML 테이블의 행을 정의합니다.

<tr> 요소에는 하나 이상의 <th> 요소가 포함되어 있습니다.

HTML 4.01과 HTML5의 차이점

HTML 5에서는 HTML 4.01의 <tr> 태그 속성이 지원되지 않습니다.

Attribute

AttributeValueDescription
alignright
left
center
justify
char		5HTML5 지원되지 않습니다. 테이블 행의 내용 정렬을 정의합니다.
bgcolorrgb(x,x,x)
#xxxxxx
colorname		HTML5 지원되지 않습니다. HTML 4.01은 더 이상 사용되지 않습니다. 테이블 행의 배경색을 지정하세요.
charcharacterHTML5는 지원되지 않습니다. 텍스트 정렬에 사용할 문자를 지정합니다.
charoffnumberHTML5는 지원되지 않습니다. 첫 번째로 정렬된 문자의 오프셋을 지정합니다.
valigntop
middle
bottom
baseline		HTML5는 지원되지 않습니다. 테이블 행 내용의 수직 정렬을 지정합니다.

전역 속성

<tr> 태그는 HTML 전역 속성을 지원합니다.

이벤트 속성

<tr> 태그는 HTML 이벤트 속성을 지원합니다.

사용해 보기 - 예

Title in table
이 예는 표 제목을 표시하는 방법을 보여줍니다.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>表格使用水平标题:</h4>
<table border="1">
  <tr>
    <th>Name</th>
    <th>Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
  </tr>
</table>

<h4>表格使用垂直标题:</h4>
<table border="1">
  <tr>
    <th>First Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th>Telephone:</th>
    <td>555 77 854</td>
  </tr>
</table>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

빈 셀
이 예에서는 " "를 사용하여 내용이 없는 셀을 처리하는 방법을 보여줍니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<table border="1">
<tr>
  <td>一些文本</td>
  <td>一些文本</td>
</tr>
<tr>
  <td></td>
  <td>一些文本</td>
</tr>
</table>

<p>如果在上面的空单元格中没有边框，你可以插入一个空格 ： &nbsp;</p>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

제목이 있는 테이블
이 예에서는 캡션이 있는 테이블을 보여줍니다.

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>0</td>
  </tr>
  <tr>
    <td>February</td>
    <td></td>
  </tr>
</table>

</body>
</html>

예제 실행 »

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

테이블의 라벨
이 예는 다른 요소 내에 요소를 표시하는 방법을 보여줍니다.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>0</td>
  </tr>
  <tr>
    <td>February</td>
    <td></td>
  </tr>
</table>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

행이나 열에 걸쳐 테이블 셀

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

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>单元格跨两格:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

관련 기사

HTML 튜토리얼: HTML 테이블

HTML DOM 참조 매뉴얼: TR 개체