Height is the measurement of something from the bottom to the top, or from the head to the foot. The height of the table row is defined as the distance between the top and the base of the row. In CSS, we have the “line-height” property which allows us to customize the height of the table row. The CSS “line-height” attribute can be used to alter the table’s row height. When we change the value of this “line-height” property, our table row is resized to that height. We’ll use this “line-height” property to set the height of the table row in this tutorial, and we’ll show you how it sets the height of the table row and how to adjust the table row height using several examples.

Example # 1:

To set the table’s row height, we must design the table in the HTML file. This HTML file is created here in Visual Studio Code. But you may use any software to create these codes. This software is being used to run the examples. We must select the language when creating a new file in Visual Studio Code. Otherwise, it will recognize it by default. When HTML is selected as the language, the file extension is created automatically when the file is saved under any name. We merely put “!” into this file after selecting HTML as a language and pressing “Enter”. The “HTML” code’s core tags are produced automatically.

The “table” in the “body” must now be created. The table is created by first creating the heading and then using the “<table>” tag. The table we’re creating has five columns and six rows. The table’s first row is the table’s heading row, and we use “th” to add data to it. The “td” tag is also used to put data into the table’s cells with “tr” for the table’s rows. After that, we’ll go on to the CSS file, which will be used to set the table’s row height.

Style the heading by naming “h1” and applying CSS properties. We chose “green” for the “color” parameter which is used to change the color of the text. This heading’s “font-family” is “Algerian” Then, apply a “border” of “2px” to the entire table, with the type set to “solid” and the border color set to “purple”. The table’s “width” is then specified with “auto” being the width. Then, we are utilizing the “border-collapse” property and set this to “collapse” for collapsing the border of the entire table.

After this, we must create the “border” for all cells. We set the same border for the cell that we use for the table here. The text in the cells will render in “green” as we set this “color” in the CSS property. Now, we are setting row height of the table. So, here we put “tr” which is used for the rows and set the height of the row by utilizing the CSS “line-height” property. We are setting “30px” for the height of the table’s row. This height will apply to all rows of the table.

The output shows the table. In this table, the height of the rows of the table is 30px each. We can set the height of the row according to our choice. We set it to 30px in this code and you can check this in the given output.

Example # 2:

The table we’re using here is the same as the one we used in the previous example. But we’re going to change the line-height property value to adjust the table’s row height. We are going to change the font’s “font-family” to “times New Roman”. Then, we are applying some attributes to the entire table and establish the border. First with a “border” of “2px” and in “solid” form, as well as in the color “green”. We use the “auto” keyword for the “width” property and the “collapse” keyword for the “border-collapse” property.

We also need to establish the border for the cells. So, we use the “border” property now for “th” and “tr”. The values are set to “2px solid green” and the cell’s text is color “blue”. Then, for all rows except the heading row, we are setting the “20px” height by utilizing the “line-height” property. But we also want to set the height of the heading row. For this, we use the “th” and utilize “line-height” here and set it to “80px”. When this table will render on the output screen, the heading row height will be “80px” and the height of the remaining rows will be “20px”.

Here, you can see that the height of the first row is greater than the remaining rows as we have set its height to “80px” and the other row’s height is “20px”. That’s why there is a difference between the height of the first row which is the header row and the height of the other rows.

Example # 3:

In this table, we give the name to each row as “t1”, “t2”, “t3”, and so on. Then, we set different heights for each row in CSS. We will apply the “line-height” property separately on each row by using the names of the rows which we have given here in this HTML file.

First, we are styling the heading which appears on the top to make it attractive by utilizing some properties. We are using the “color” which is the CSS property and set the “light coral” color for this heading. The heading’s “font-family” is “Algerian”. The table border is set as “maroon”. We set it to “solid” so it appears as a solid line border and it is “2px” in width. Then “collapse” the border so it will display as a single border.

Now, we are creating a “border” around all cells of the table. We apply the same border as the table border. The same “maroon” color and solid type of “2px”. The text “color” is “black”. Now, we are going to set the height of each row separately by using the name of the rows. We use “t1” with “tr” which represents the first row of the table and set its height by using the “line-height” property and putting “20px” as its value. Then, use “t2” with “tr” by placing “.” between them which is the second row. The height of this row is set to “30px”.

After this, we have “t3” which is the third row. We write it with “td” as we write the “t1” or “t2” but here its height is “50px”. We are setting “70px” for the fourth row using “t4” and “90px” for the fifth row. Also, set “120px” for the sixth rows and the name of the sixth row is “t6”. Now, we set different row heights for all six rows.

The height difference between all rows is seen in this given output. Here, the height of the first row is smaller than the second row and so on. All the rows are of different heights, so in this way, we can set the height of the rows in CSS.

Conclusion:

This tutorial demonstrated what the table’s row height is, how to set the table’s row height in CSS, and which CSS property is used to determine the table’s row height. As we have stated, the height of a table’s row is measured from top to bottom of the row and explained that the “line-height” property of CSS is used for setting the height of the rows. We have used this property on all rows combined, and on each table’s row separately. We have gone over various codes in this tutorial, as well as the results of these codes. After reading this tutorial thoroughly, you will set the height of the table’s row in projects.