HTML tr Tag-HTML Tutorial-php.cn

Table of Contents

Syntax of HTML tr Tag

Attributes of HTML tr Tag

1. Align

2. Background

3. Color

Conclusion

Home

Web Front-end

HTML Tutorial

HTML tr Tag

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:26 PM

html html5 HTML Tutorial HTML Properties HTML tags

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 rows in the table are defined by the tr tag represented as ….. . The rows in HTML contain data cells presented in … tag if it’s a standard data cell or in a … tag if it’s a header cell .

Syntax of HTML tr 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>

Copy after login

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>

Copy after login

As you see, we have defined the column headers using , which gives them a bold look as compared to data represented in tag, which has a standard look.

The above example gives us the following output when viewed in the browser:

HTML tr Tag

Attributes of HTML tr Tag

In order to further customize the data presented in an element, we can use the following attribute in the tag :

1. Align

With align attribute, we can customize the text alignment in a tag. It can work with the following values.

Right
Left
Center
Justify
Char

However, this property is not supported in HTML 5.

2. Background

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:

<!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>

Copy after login

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 :

HTML tr Tag

3. Color

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:

<!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>

Copy after login

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 :

HTML tr Tag

Conclusion

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn