Open In App

HTML <th> width Attribute

Last Updated : 16 Sep, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

The HTML <th> width Attribute is used to specify the width of a table header cell. If the width attribute is not set then it takes the default width according to the content.

Syntax:

<th width="pixels | %">

Attribute Values:

Attributes values

Description

pixels

It sets the width of the table header cell in terms of pixels.

%

It sets the width of the table header cell in terms of percentage (%).

Example: In this example the <th> width attribute in this HTML example specifies the width of each table header cell in percentages. It adjusts the columns’ widths to 50%, 20%, and 30% of the table’s width.

HTML
<!DOCTYPE html>
<html>

<head>
    <title>
        HTML th width Attribute
    </title>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h2>HTML th width Attribute</h2>

    <table border="1" width="500">
        <tr>
            <th width="50%">NAME</th>
            <th width="20%">AGE</th>
            <th width="30%">BRANCH</th>
        </tr>

        <tr>
            <td>BITTU</td>
            <td>22</td>
            <td>CSE</td>
        </tr>

        <tr>
            <td>RAKESH</td>
            <td>25</td>
            <td>EC</td>
        </tr>
    </table>
</body>

</html>

Output:

Example: In this example we use the <th> width attribute to set specific widths for table headers: 100 pixels for “Header 1” and 200 pixels for “Header 2,” with “Header 3” taking the remaining space.

HTML
<!DOCTYPE html>
<html>

<head>
    <title>Table with th Width Attribute</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <table border="1">
        <tr>
            <th width="100">Header 1</th>
            <th width="200">Header 2</th>
            <th>Header 3</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
    </table>
</body>

</html>

Output:

Screenshot-2023-12-18-173919

Output



Next Article

Similar Reads