<!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>
보시는 바와 같이 를 사용하여 열 헤더를 정의했는데, 이는
에 표시된 데이터와 비교하여 굵은 모양을 제공합니다. 표준적인 모양의 태그입니다.
위 예를 브라우저에서 보면 다음과 같은 결과가 나옵니다.
HTML tr 태그의 속성
요소의
태그 :
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>
위 코드의 출력은 첫 번째 행의 배경색이 녹색으로 변경된 브라우저 창에서 다음과 같습니다.
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 요소를 사용하여 구조화된 데이터를 정의하고 표현할 수 있습니다. 동일한 테이블의 다른 행을 사용자 정의하여 행의 스타일을 변경할 수 있습니다. th와 td를 사용하여 테이블 헤더와 표준 테이블 데이터를 정의할 수도 있습니다. 글꼴 색상, 글꼴 크기, 글꼴 모음, 글꼴 장식 및 행 배경색을 추가로 사용자 정의할 수 있습니다.
위 내용은 HTML tr 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
