A structured HTML table organizes data into columns based on data size and webpage layout. While the table columns are usually flexible to adjust automatically, users may occasionally want to set a specific width for the table.
Modifying the widths of columns in a table or adjusting the width of td tags is a straightforward process. You can specify the width attribute within the tag and assign the desired value. When the width attribute is empty, the column width will automatically adjust based on the content size. Column widths can be defined in either percentage or pixels.
Syntax:
The syntax below demonstrates the specified width of a column in a table.
<td width ="value"> </td>
Description
- The width of a column can be set using the width attribute.
- The width should be specified based on the content. The tag can insert the value either in percentage terms or in pixels.
- The material in the column will overflow if it is really large.
Examples
Below are some examples demonstrating how to set a fixed column width in an HTML table. You can specify the width using pixels (px), percentages, or other suitable values.
Example 1:
Below is an illustration demonstrating how to establish a constant column width in an HTML table. The column width can be defined by specifying a measurement in pixels.
<!DOCTYPE html>
<html>
<head>
<title> How to fixed table column width using HTML </title>
<style>
table {
margin-left: auto;
margin-right: auto;
font-size: 20px;
height: 100%;
table-layout: fixed;
}
td {
border: 1px solid black;
text-align: center;
padding: 8px;
}
tr:nth-child(even) {
background-color: orange;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h2> How to fixed table column width using HTML </h2>
<h3> We can use percentage value for the column width </h3>
<p>
Adjusting the table's column widths or td tags width is quite simple.
</p>
<table>
<tr style="color:aqua;
background-color:black;">
<td width = "120px"> Column 1 </td>
<td> Column 2 </td>
<td> Column 3 </td>
</tr>
<tr>
<td>
Width of the table is fixed after changing the screen size
</td>
<td>
Width of the table is not fixed after changing the screen size
</td>
<td>
Width of the table is not fixed after changing the screen size
</td>
</tr>
<tr>
<td> Example website 1 </td>
<td> Example website 2 </td>
<td> Example website 3 </td>
</tr>
<tr>
<td> Example website 4 </td>
<td> Example website 5 </td>
<td> Example website 6 </td>
</tr>
<tr>
<td> Example website 7 </td>
<td> Example website 8 </td>
<td> Example website 9 </td>
</tr>
</table>
</center>
</body>
</html>
Output
The output displays the predetermined width of each column in the table.
Example 2:
The code snippet below demonstrates how to set a fixed column width in an HTML table. Column width can be defined by specifying a percentage value.
<!DOCTYPE html>
<html>
<head>
<title> How to fixed table column width using HTML </title>
<style>
table {
margin-left: auto;
margin-right: auto;
font-size: 20px;
height: 100%;
table-layout: fixed;
}
td {
border: 1px solid black;
text-align: center;
padding: 8px;
}
tr:nth-child(even) {
background-color: orange;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h2> How to fixed table column width using HTML </h2>
<h3> We can use percentage value for the column width </h3>
<p>
Adjusting the table's column widths or td tags width is quite simple.
</p>
<table>
<tr style="color:aqua;
background-color:black;">
<td width = "20%"> Column 1 </td>
<td> Column 2 </td>
<td> Column 3 </td>
</tr>
<tr>
<td>
Width of the table is fixed after changing the screen size
</td>
<td>
Width of the table is not fixed after changing the screen size
</td>
<td>
Width of the table is not fixed after changing the screen size
</td>
</tr>
<tr>
<td> Example website 1 </td>
<td> Example website 2 </td>
<td> Example website 3 </td>
</tr>
<tr>
<td> Example website 4 </td>
<td> Example website 5 </td>
<td> Example website 6 </td>
</tr>
<tr>
<td> Example website 7 </td>
<td> Example website 8 </td>
<td> Example website 9 </td>
</tr>
</table>
</center>
</body>
</html>
Output
The output displays the predetermined width of the column in the table.
Example 3:
In the illustration below, the HTML table demonstrates the utilization of fixed column width. By specifying percentage values, we can determine the width of each column. In this case, the first and third columns are configured to occupy 20% each, while the second column is set to have a fixed width of 40%.
<!DOCTYPE html>
<html>
<head>
<title> How to fixed table column width using HTML </title>
<style>
table {
margin-left: auto;
margin-right: auto;
font-size: 20px;
height: 100%;
table-layout: fixed;
}
td {
border: 1px solid black;
text-align: center;
padding: 8px;
}
tr:nth-child(even) {
background-color: yellow;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h2> How to fixed table column width using HTML </h2>
<h3> We can use percentage value for the entire column width </h3>
<p>
Adjusting the table's column widths or td tags width is quite simple.
</p>
<table>
<tr style="color:aqua;
background-color:black;">
<td width = "20%"> Column 1 </td>
<td> Column 2 </td>
<td> Column 3 </td>
</tr>
<tr>
<td>
Width of the table is fixed after changing the screen size
</td>
<td>
Width of the table is not fixed after changing the screen size
</td>
<td>
Width of the table is not fixed after changing the screen size
</td>
</tr>
<tr>
<td> Example website 1 </td>
<td> Example website 2 </td>
<td> Example website 3 </td>
</tr>
<tr>
<td> Example website 4 </td>
<td> Example website 5 </td>
<td> Example website 6 </td>
</tr>
<tr>
<td> Example website 7 </td>
<td> Example website 8 </td>
<td> Example website 9 </td>
</tr>
</table>
</center>
</body>
</html>
Output
The output displays the predetermined width of the column in the table.
Example 4:
In this instance, the code snippet demonstrates how to establish fixed column widths within an HTML table. By utilizing the em unit, we are able to define the width of both the first and third columns. Specifically, the first and third columns are assigned a width of 90 em in the HTML table.
<!DOCTYPE html>
<html>
<head>
<title> How to fixed table column width using HTML </title>
<style>
table {
margin-left: auto;
margin-right: auto;
font-size: 20px;
height: 100%;
table-layout: fixed;
}
td {
border: 1px solid black;
text-align: center;
padding: 8px;
}
tr:nth-child(even) {
background-color: orange;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h2> How to fixed table column width using HTML </h2>
<h3> We can use percentage value for the column width </h3>
<p>
Adjusting the table's column widths or td tags width is quite simple.
</p>
<table>
<tr style="color:aqua;
background-color:black;">
<td width = "90em"> Column 1 </td>
<td> Column 2 </td>
<td width = "90em"> Column 3 </td>
</tr>
<tr>
<td>
Width of the table is fixed after changing the screen size
</td>
<td>
Width of the table is not fixed after changing the screen size
</td>
<td>
Width of the table is not fixed after changing the screen size
</td>
</tr>
<tr>
<td> Example website 1 </td>
<td> Example website 2 </td>
<td> Example website 3 </td>
</tr>
<tr>
<td> Example website 4 </td>
<td> Example website 5 </td>
<td> Example website 6 </td>
</tr>
</table>
</center>
</body>
</html>
Output
The result displayed indicates the set width of the column in the table.
Example 5:
In this instance, we demonstrate a specific column width setting in an HTML table. It is possible to define the width for both the initial and secondary columns within the second row of the table. By applying the width attribute to any td tag, we can establish a fixed width for the columns in the HTML table.
<!DOCTYPE html>
<html>
<head>
<title> How to fixed table column width using HTML </title>
<style>
table {
margin-left: auto;
margin-right: auto;
font-size: 20px;
height: 100%;
table-layout: fixed;
}
td {
border: 1px solid black;
text-align: center;
padding: 8px;
}
tr:nth-child(even) {
background-color: orange;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h2> How to fixed table column width using HTML </h2>
<h3> We can use pixel value for the column width </h3>
<p> The width element is used on any td tag to get entire columns width</p>
<table>
<tr style="color:aqua;
background-color:black;">
<td> Column 1 </td>
<td> Column 2 </td>
<td> Column 3 </td>
</tr>
<tr>
<td width = "20px">
Width of the table is fixed after changing the screen size
</td>
<td width = "20px">
Width of the table is not fixed after changing the screen size
</td>
<td>
Width of the table is not fixed after changing the screen size
</td>
</tr>
<tr>
<td> Example website 1 </td>
<td> Example website 2 </td>
<td> Example website 3 </td>
</tr>
</table>
</center>
</body>
</html>
Output
The output displays the predetermined width of the column in the table.
Conclusion
Ensuring a consistent fixed width is crucial for maintaining the functionality of sticky columns on a responsive web page. This ensures that data attributes and table columns are displayed based on the relevance and significance of the content.