Last Updated : 16 Sep, 2024
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:
OutputRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4