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>登入後複製
如您所見，我們使用 定義了列標題，與 | 中表示的資料相比，它們具有粗體外觀。標籤，具有標準外觀。
上面的範例在瀏覽器中查看時為我們提供了以下輸出：
HTML tr 標籤的屬性
為了進一步自訂
|
中呈現的資料；元素，我們可以在
中使用以下屬性：標籤：
1.對齊
使用align屬性，我們可以自訂
中的文字對齊方式。標籤。它可以使用以下值。
但是，HTML 5 不支援此屬性。
2.背景
我們可以使用 style 標籤中的 background 屬性來設定行的背景。讓我們看一下下面的範例。
代碼：
<!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 標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！
您如何在PHP中解析和處理HTML/XML？
Feb 07, 2025 am 11:57 AM
