Home >Web Front-end >HTML Tutorial >HTML tr Tag
HTML provides multiple options to represent structured as well as unstructured data. It allows us to present data in the paragraph, ordered lists, unordered lists, tables, etc. In this topic, we are going to learn about HTML tr Tag.
HTML tables are created defining the table rows and cells in the table tag
The syntax with the table, table row, and table cell hierarchy would be as follow :
Syntax:
<table> <tr> <th> … </th> <td> …. </td> </tr> </table>
Let’s review the below example:
Example:
<!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>
As you see, we have defined the column headers using The above example gives us the following output when viewed in the browser: In order to further customize the data presented in an With align attribute, we can customize the text alignment in a However, this property is not supported in HTML 5. We can set the background of a row by using the background property in the style tag. Let’s see an example for the same below. Code: The output of the above code would be as follows in the browser window where the background color of the first row has changed to green : We can manipulate the color of the text in an arrow by using the color property in a tr tag. Let’s change the font color for one of the rows to grey. Code: The output of the above code in the browser window would be as follows where we are able to spot the font color applies to the first row of the table : As seen above, we can use the HTML table and tr elements to define and represent structured data. We can customize different rows in the same table to change the row’s styling. We can also use th and td to define table headers and standard table data. We can further customize the font color, font size, font family, font decoration and background color of a row. The above is the detailed content of HTML tr Tag. For more information, please follow other related articles on the PHP Chinese website! tag, which has a standard look.
Attributes of HTML tr Tag
element, we can use the following attribute in the tag :
1. Align
tag. It can work with the following values.
2. 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. 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>
Conclusion