There are different ways to represent data and information, such as charts, graphs, pictographs, or tabular forms. The table organizes data in rows and columns, making the data more readable and clear. The tabulated data also saves time and space. To make tables in HTML, we use <table> tag with <tr> tag, <th> tag for heading, and <td> for table data.

The learning outcomes of this article will be:

• What is HTML <tr> Tag?
• How to Create a Table in HTML?
• What are the Attributes of <tr> Tag?
• How to Create Vertical Header Table?

What is HTML <tr> Tag?

The HTML <tr> tag specifies a row in a table, the <th> tag is used for table heading, and <td> tag is for table data.

Syntax

The HTML tr tag has a starting tag <tr> and a closing tag </tr>.

How to Create a Table in HTML?

The below example will demonstrate how we can create a table in HTML. To do so, first, add a <table> tag and then specify a caption using the <caption> tag:

Within the table element, add <tr> tag after the caption. The first row will contain the heading of each column. For this <th> tags are used:

After creating three columns, let’s add data to the columns. The data will be added to each row in correspondence to the headings in the next row. So, to add data, the <td> tag is utilized:

Similarly, create two more rows as shown in the code snippet below:

The corresponding output of the code mentioned above will look like this:

Applying Styles to Table with CSS

In this section, we will apply some styling properties to the table we have created above.

Style caption Tag

The caption tag used in the HTML file will have the properties listed below:

• “font-size” property sets the size of the font.
• “padding” property is utilized to apply space around the element’s content.
• “text-decoration” property applies decoration to the text.

Style <table>, <th>, <td> Tags

The <table>, <th>, and <td> tags are styled with the CSS properties described below:

• “background-color” property is utilized to give background color to the table.
• “border” property sets a border around the table having a width, line type, and color.
• “font-size” property is utilized to set the size of the font as 25px.

Style table Element

Here:

• “margin” property with value “auto” places the table in the center spacing equal from each side.
• “width” property is utilized to set the table’s width.
• “height” property sets the height of the table.

Output

What are the Attributes of <tr> Tag?

There are many attributes associated with the HTML <tr> tag, such as:

• rowspan
• colspan

Attribute: rowspan

This attribute contains a non-negative value that specifies the number of rows the cell extends.
Its default value is 1.

Example: How to Add rowspan Attribute to a table row?
So, from the above example, we have taken the second row. Add the attribute rowspan with value 2 to the third table data:

It can be seen from the below image the second row’s third data has taken space of two rows:

Attribute: colspan

This attribute contains a non-negative value that specifies the number of columns the cell extends. The default value of the colspan is 1. Greater than 1000 values will be set as default because they are considered incorrect.

Example: How to Add Colspan Attribute to Table Row?
In the HTML file, the <th> tag is added below the <caption> tag and it is provided with the attribute colspan with a value of 3:

From the below image, it can be seen that the table header has taken space for three columns:

How to Create Vertical Header Table?

In HTML, add three <tr> tags. Inside each, other tags are placed, such as <th>, then <td> tags. In such a way, a table with vertical headings can be created:

Save the HTML file and open the file in a web browser:

It can be observed that the header of the table is placed vertically.

Conclusion

To create a table for our web application, HTML provides us with different tags for tables, rows, and columns as <table>, <tr>, and <td>, respectively. So, this blog has explained the HTML <tr> tag, its attribute, and the method to create a simple and vertical header table.