HTML <tr> 태그

정의와 사용법

<tr> 태그가 포함되어 있습니다. HTML 테이블의 행을 정의합니다.

<tr> 요소는 하나 이상의 <th> 또는 <td> 요소.

또한 참조:

HTML 교육:HTML 테이블

HTML DOM 참조 매뉴얼:TableRow 객체

CSS 교육:테이블 스타일 설정

예제

예제 1

간단한 세 행 HTML 테이블; 한 개의 제목 행과 두 개의 데이터 행:

<table>
  <tr>
    <th>월</th>
    <th>저축</th>
  <td>186-2345-6789</td>
  <tr>
    <td>1월</td>
    <td>￥3400</td>
  <td>186-2345-6789</td>
  <tr>
    <td>2월</td>
    <td>￥4500</td>
  <td>186-2345-6789</td>
</tr>

</table>

예제 2

정렬 <tr> 의 내용(CSS를 사용하여):

<table style="width:100%">
  <tr>
    <th>월</th>
    <th>저축</th>
  <td>186-2345-6789</td>
  <tr style="text-align:right">
    <td>1월</td>
    <td>￥3400</td>
  <td>186-2345-6789</td>
</tr>

</table>

예제 3

테이블 행에 배경색을 추가하는 방법(CSS를 사용하여):

<table>
  <tr style="background-color:#FF0000">
    <th>월</th>
    <th>저축</th>
  <td>186-2345-6789</td>
  <tr>
    <td>1월</td>
    <td>￥3400</td>
  <td>186-2345-6789</td>
 </tr>

</table>

예제 4

가로 정렬 <tr> 의 내용(CSS를 사용하여):

<table style="height:200px">
  <tr  style="vertical-align:top">
    <th>월</th>
    <th>저축</th>
  <td>186-2345-6789</td>
  <tr style="vertical-align:bottom">
    <td>1월</td>
    <td>￥3400</td>
  <td>186-2345-6789</td>
</tr>

</table>

예제 5

테이블 제목을 어떻게 만드는가:

<table>
  <tr>
    <th>이름</th>
    <th>전자우편</th>
    <th>전화</th>
  <td>186-2345-6789</td>
  <tr>
    <th colspan="2">전화</th>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
  <td>186-2345-6789</td>
</tr>

</table>

예제 6

제목이 있는 테이블을 어떻게 만드는가:

<table>
  <caption>월 저축</caption>
  <tr>
    <th>월</th>
    <th>저축</th>
  <td>186-2345-6789</td>
  <tr>
    <td>1월</td>
    <td>￥3400</td>
  <td>186-2345-6789</td>
  <tr>
    <td>2월</td>
    <td>￥4500</td>
  <td>186-2345-6789</td>
</tr>

</table>

예제 7

다중 행 또는 다중 열의 테이블 셀을 정의하는 방법:

<table>
  <tr>
    <th>이름</th>
    <th>전자우편</th>
    电话
  <td>186-2345-6789</td>
  <tr>
    <th colspan="2">전화</th>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  <td>186-2345-6789</td>
</tr>

</table>

직접 시험해 보세요

<tr> 태그는 또한 이벤트 속성을 지원합니다 전역 속성.

HTML에서의 전역 속성

<tr> 태그는 또한 이벤트 속성을 지원합니다 HTML에서의 이벤트 속성.

기본 CSS 설정

대부분의 브라우저는 다음 기본 값으로 표시합니다 <tr> 요소:

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원