How to use height attribute in HTML
- In the first example, The height attribute is used to set the height of a row. It is added in the <tr> tag.
- The height should be specified according to the content, either in pixels or percentages.
- If the content in the row is large, it will overflow.
- In the second example, we are fixing the height by using the height property in CSS, as much as content will increase the height must be increased.
Example 1: In this example, the height of the first row has been fixed, but the height of the second row has not been.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>How to fix height of table tr?</title>
<style>
table {
margin-left: auto;
margin-right: auto;
font-size: 10px;
width: 100%;
table-layout: fixed;
}
td {
border: 1px solid black;
text-align: center;
padding: 10px;
}
tr:nth-child(even) {
background-color: green;
}
</style>
</head>
<body>
<table>
<!-- row with fixed height-->
<tr height="300px">
<td>Height of this row remains same on varying screen-size</td>
<td>Geeks for Geeks</td>
<td>
Geeks for Geeks is a Computer Science
Portal created with the goal of
providing well written, well thought
and well-explained solutions for
selected questions.
</td>
</tr>
<!-- row without fixed height-->
<tr>
<td>Height of this row changes on varying screen-size</td>
<td>Geeks for Geeks</td>
<td>
Geeks for Geeks is a Computer Science
Portal created with the goal of
providing well written, well thought
and well-explained solutions for
selected questions.
</td>
</tr>
</table>
</body>
</html>
Output:
fixing the height of rows in the table Example Output
How to fix the height of rows in the table?
Fixing the height of rows in a table ensures uniformity and prevents dynamic resizing based on content. It’s achieved by setting a specific height for the `<tr>` elements using CSS, ensuring consistent presentation.
Here we are using some common approaches:
Table of Content
- Using height attribute
- Using height property in CSS