HTML tr 태그-HTML 튜토리얼-php.cn

HTML은 구조화된 데이터와 구조화되지 않은 데이터를 표현하는 다양한 옵션을 제공합니다. 이를 통해 단락, 정렬된 목록, 정렬되지 않은 목록, 표 등의 데이터를 표시할 수 있습니다. 이번 주제에서는 HTML tr 태그에 대해 알아 보겠습니다.

HTML 테이블은 테이블 태그

에서 테이블 행과 셀을 정의하여 생성됩니다. . 테이블의 행은 로 표시되는 tr 태그로 정의됩니다. ….. . HTML의 행에는 표준 데이터 셀이거나 <번째> … 헤더 셀인 경우 태그를 지정하세요.

HTML tr 태그 구문

테이블, 테이블 행 및 테이블 셀 계층 구조의 구문은 다음과 같습니다.

구문:

<table>
<tr>
<th> … </th>
<td> …. </td>
</tr>
</table>

로그인 후 복사

아래 예를 검토해 보겠습니다.

예:

<!DOCTYPE html>
<html>
<head>
<title>This is a table example</title>
<style>
th, td {
padding : 10px;
border : 1px solid #666;
}
</style>
</head>
<body>
<table style=" width:80%; margin : 30px auto; border-collapse : collapse;">
<tr>
<th> Sr. No. </th>
<th> Popular programming languages </th>
<th> Description </th>
</tr>
<tr>
<td> 1 </td>
<td> Java </td>
<td> Java has been holding position 1 or 2 for the world’s most popular languages since it’s inception. It was created in mid 90s and since then many large and small companies have adopted it for developing desktop and web applications</td>
</tr>
<tr>
<td> 2</td>
<td> C </td>
<td>C is a popular language for cars, sensors and embedded systems. It has been one of the top most popular languages mainly due to its universal compatibility</td>
</tr>
<tr>
<td>3</td>
<td>Python</td>
<td>Python is very popular in today’s era specially since it support quick development of application based on machine learning, big data and AI.</td>
</tr>
</table>
</body>
</html>

로그인 후 복사

보시는 바와 같이 를 사용하여 열 헤더를 정의했는데, 이는

요소의 태그 :

1. 정렬

정렬 속성을 사용하면

꼬리표. 다음 값으로 작동할 수 있습니다.

그렇습니다
왼쪽
센터
정당화
차르

그러나 이 속성은 HTML 5에서는 지원되지 않습니다.

2. 배경

스타일 태그의 배경 속성을 사용하여 행의 배경을 설정할 수 있습니다. 아래에서 동일한 예를 살펴보겠습니다.

코드:

<!DOCTYPE html>
<html>
<head>
<title>This is a table example</title>
<style>
th, td {
padding : 10px;
border : 1px solid #666;
}
</style>
</head>
<body>
<table style=" width:80%; margin : 30px auto; border-collapse : collapse;">
<tr>
<th> Sr. No. </th>
<th> Popular programming languages </th>
<th> Description </th>
</tr>
<tr style="background : #00ff3787"> // here we are setting the back ground color to #00ff3787
<td> 1 </td>
<td> Java </td>
<td> Java has been holding position 1 or 2 for the world’s most popular languages since it’s inception. It was created in mid 90s and since then many large and small companies have adopted it for developing desktop and web applications</td>
</tr>
<tr>
<td> 2</td>
<td> C </td>
<td>C is a popular language for cars, sensors and embedded systems. It has been one of the top most popular languages mainly due to its universal compatibility</td>
</tr>
<tr>
<td>3</td>
<td>Python</td>
<td>Python is very popular in today’s era specially since it support quick development of application based on machine learning, big data and AI.</td>
</tr>
</table>
</body>
</html>

로그인 후 복사

위 코드의 출력은 첫 번째 행의 배경색이 녹색으로 변경된 브라우저 창에서 다음과 같습니다.

HTML tr 태그

3. 색상

tr 태그의 color 속성을 사용하여 화살표 텍스트의 색상을 조작할 수 있습니다. 행 중 하나의 글꼴 색상을 회색으로 변경해 보겠습니다.

코드:

<!DOCTYPE html>
<html>
<head>
<title>This is an example of HTML table</title>
<style>
th, td {
padding : 10px;
border : 1px solid #666;
}
</style>
</head>
<body>
<table style=" width:80%; margin : 30px auto; border-collapse : collapse;">
<tr>
<th> Sr. No. </th>
<th> Popular programming languages in 2019 </th>
<th> Description </th>
</tr>
<tr style="color : grey"> // here we are setting the font color to grey
<td> 1 </td>
<td> Java </td>
<td> Java has been holding position 1 or 2 for the world’s most popular languages since it’s inception. It was created in mid 90s and since then many large and small companies have adopted it for developing desktop and web applications</td>
</tr>
<tr>
<td> 2</td>
<td> C </td>
<td>C is a popular language for cars, sensors and embedded systems. It has been one of the top most popular languages mainly due to its universal compatibility</td>
</tr>
<tr>
<td>3</td>
<td>Python</td>
<td>Python is very popular in today’s era specially since it support quick development of application based on machine learning, big data and AI.</td>
</tr>
</table>
</body>
</html>

로그인 후 복사

브라우저 창에서 위 코드의 출력은 다음과 같으며 여기서 표의 첫 번째 행에 적용되는 글꼴 색상을 확인할 수 있습니다.

HTML tr 태그

결론

위에서 본 것처럼 HTML 테이블과 tr 요소를 사용하여 구조화된 데이터를 정의하고 표현할 수 있습니다. 동일한 테이블의 다른 행을 사용자 정의하여 행의 스타일을 변경할 수 있습니다. th와 td를 사용하여 테이블 헤더와 표준 테이블 데이터를 정의할 수도 있습니다. 글꼴 색상, 글꼴 크기, 글꼴 모음, 글꼴 장식 및 행 배경색을 추가로 사용자 정의할 수 있습니다.

위 내용은 HTML tr 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!