How to set the number of rows a table cell should span in HTML ?

How to fix the height of rows in the table?

Last Updated : 17 Sep, 2024

Fixing the height of rows in a table ensures that all rows have a uniform appearance, preventing them from resizing dynamically based on their content. This approach is useful for maintaining a consistent presentation, especially when dealing with tabular data that needs to be displayed neatly.

Here we are using some common approaches:

Table of Content

Using the height Attribute
Using the height Property in CSS

Approach 1: Using the height Attribute

Traditionally, the height attribute could be directly added to the <tr> tag to set the height of table rows. However, this approach is not recommended in modern web development because it has been deprecated in HTML5, and CSS should be used instead.

Example 1: Using the height Attribute

In this example, we set the height of the first row using the height attribute in the <tr> tag. Note that the height is fixed regardless of content size, and any overflow will be hidden or managed depending on the CSS settings.

html

<!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 — fixing the height of rows in the table Example Output

Approach 2: Using the height Property in CSS

Using CSS is the preferred method for setting the height of table rows, providing better control over the appearance and behavior of elements. By applying the height property to the <tr> elements via CSS, you can maintain a consistent row height regardless of the content or screen size.

Example 2: Using CSS to Fix Row Height

Here, we set the height of table rows using CSS, ensuring that all rows maintain a uniform height. This approach also allows for more flexibility with additional styling, such as handling overflow.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>How to fix height of table tr?</title>
    <style>
        table,
        td {
            border: 1px solid black;
        }

        tr {
            height: 200px;
        }
    </style>
</head>

<body>

    <table>
        <!-- row with fixed height-->
        <tr>
            <td>
                Height of this row remains the 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-2 — fixing the height of rows in the table Example Output

How to fix the height of rows in the table?

How to set the number of rows a table cell should span in HTML ?

S

shs_

Improve

Article Tags :

Similar Reads

How to Create Table in HTML?

HTML tables are used for organizing and displaying data in a structured format on web pages. Tables are commonly used for product information, presenting data analytics, or designing a pricing comparison chart. Elements of HTML TableTable ElementsDescription<table>The <table> element def

How to group the body content in a table using HTML5 ?

In this article, group the body content in an <table> element in a document. It is used to define a standard cell in an HTML table. Syntax: <tbody> ... </tbody> Example 1: In this example, we use some HTML tags and make the group the body content in a table. html <!DOCTYPE html

How create table without using <table> tag ?

HyperText Markup Language (HTML) is the standard markup language used to create web pages. HTML allows table creation using the <table> tag. However, tables can also be created in HTML without using <table> tag with the help of Cascading Style Sheet (CSS). CSS is a mechanism for adding s

What is the rule attribute in HTML Table ?

This is an HTML attribute, that is used to specify which parts of the inside borders should be visible. The HTML rule attribute is applicable on table tags. The <table> rules attribute is not supported by HTML 5. Syntax: <table rules="value"> Attributes: This attribute accepts 5 values a

Why should we avoid use of tables for layout in HTML ?

In this article, we will learn why we should avoid using tables for layout in HTML. A website can be divided into various sections comprising of header, menus, content, and footer based on which there are many different layout designs available for developers. Different layouts can be created by usi

How to fix the height of rows in the table?

Fixing the height of rows in a table ensures that all rows have a uniform appearance, preventing them from resizing dynamically based on their content. This approach is useful for maintaining a consistent presentation, especially when dealing with tabular data that needs to be displayed neatly.Here

How to set the number of rows a table cell should span in HTML ?

In this article, we will show how multiple rows are spanned by a table header cell. The task can be done by using the rowspan attribute while using the <th> tag. This property is used to merge one or more cells as well as increase the height of the single header cell automatically. Syntax:

How to set fixed width for <td> in a table ?

The requirement of a table is very normal in the process of designing a web page. HTML provides the <table> tag to construct the table and to define rows and columns <tr> and <td> tags respectively are used. By default, the dimensions of the rows and columns in a table are adjusted

How to merge table cells in HTML ?

The purpose of this article is to explore the method of merging table cells in HTML using the rowspan and colspan attributes. By utilizing rowspan, multiple cells in a row can be merged or combined, while colspan enables the merging of cells in a column within an HTML table. This technique proves es

How to Create Time-Table Schedule using HTML?

A time table or schedule is essential for organizing tasks, events, or classes. Weâ€™ll create a basic time-table layout using HTML. A Table is an arrangement of rows and columns. Anyone can create a table by knowing the basics of HTML(HyperText Markup Language). In HTML we can use the <table> t