HTML Fixed Table Column Width
Web structure starts with solid HTML. Learn how HTML Fixed Table Column Width contributes to accessible and semantic web pages in the tutorial below.
In this tutorial, we will explore the concept of setting fixed column widths in HTML tables.
To adjust the width of table columns, we can utilize the table-layout CSS attribute along with the width CSS attribute. It is essential to specify the table-layout attribute's value as "fixed".
table-layout
The CSS property table-layout is employed to specify the algorithm that should be used by the browser for rendering the rows and columns of a table on a webpage.
The table-layout CSS property can be employed to establish a fixed width for the columns of a table.
Syntax:
table-layout: fixed;
width
The CSS property known as width is used to establish the width of an HTML element. In this case, we will employ this property to define the width of the column.
Syntax:
width: length;
Let's gain a thorough understanding through practical demonstrations.
Demonstration-1
In this example, we will establish a set column width for the student details table. We will employ a table-layout property to set the column width to 100px.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixing column of the Students' Details Table</title>
<style>
table, tr, th, td {
border: 1px solid red;
}
tr, th, td {
width: 100px;
}
table {
table-layout: fixed;
}
</style>
</head>
<body>
<h1>Fixing Column width of Students' Details Table to 100px</h1>
<table>
<caption>Students' Details Table</caption>
<tr>
<th>ID</th>
<th>Full Name</th>
<th>Course</th>
<th>Address</th>
</tr>
<tr>
<td>201</td>
<td>Rishab Singh</td>
<td>B. Tech</td>
<td>Noida</td>
</tr>
<tr>
<td>202</td>
<td>Mayank Kumar</td>
<td>B. BA</td>
<td>Noida</td>
</tr>
<tr>
<td>203</td>
<td>Ayushi yadav</td>
<td>B. CA</td>
<td>Meerut</td>
</tr>
<tr>
<td>204</td>
<td>Surbhi Sood</td>
<td>B. Tech</td>
<td>Meerut</td>
</tr>
</table>
</html>
Output:
Let's examine an example where the width of a table column is set to 100px using the table-layout CSS property.
Demonstration-2
In this demonstration, we will create a table displaying employees' information with fixed column widths. We will achieve this by using the table-layout property to set the column width to 45 pixels.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixing column of the Employees' Details Table</title>
<style>
table, tr, th, td {
border: 2px solid rgb(229, 105, 229);
}
th {
width: 45px;
}
table {
table-layout: fixed;
}
</style>
</head>
<body>
<h1>Fixing Column width of Employees' Details Table to 45px</h1>
<table>
<caption>Employees' Details Table</caption>
<tr>
<th>ID</th>
<th>Full Name</th>
<th>Department</th>
<th>Salary</th>
</tr>
<tr>
<td>301</td>
<td>Kartik Aryan</td>
<td>Software Engineer</td>
<td>50,000</td>
</tr>
<tr>
<td>302</td>
<td>Sneha Singh</td>
<td>Software Engineer</td>
<td>65,000</td>
</tr>
<tr>
<td>303</td>
<td>Ansh Chauhan</td>
<td>Finance</td>
<td>55,000</td>
</tr>
<tr>
<td>304</td>
<td>Chetna Chaudhary</td>
<td>Finance</td>
<td>50,000</td>
</tr>
</table>
</html>
Output:
Here is the result where we can observe the set width of 45 pixels for the column in the table generated using the table-layout CSS attribute.
Demonstration-3
In this demonstration, we will create a table layout with fixed column widths for displaying course details. The column width will be set to a fixed value of 200 pixels using the table-layout property.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixing column of the Courses' Details Table</title>
<style>
table, tr, th, td {
border: 2px solid rgb(19, 48, 218);
}
tr, th, td {
width: 200px;
}
table {
table-layout: fixed;
}
</style>
</head>
<body>
<h1>Fixing Column width of Courses' Details Table to 200px</h1>
<table>
<caption>Courses' Details Table</caption>
<tr>
<th>Courses</th>
<th>Description</th>
</tr>
<tr>
<td>Java</td>
<td>Java is a versatile and portable programming language. Learn Java to be a Java developer.</td>
</tr>
<tr>
<td>Python</td>
<td>Python is a widely utilized programming language. Learn Python to be a Python developer.</td>
</tr>
<tr>
<td>Web Development</td>
<td>If you want to be a web developer and want to create amazing websites then learn Web Development to be a web developer.</td>
</tr>
<tr>
<td>DBMS</td>
<td>DBMS course provides the knowledge of database. Learn DBMS to organize data systematically.</td>
</tr>
<tr>
<td>Android</td>
<td>Android is an Android operating system. Learn Android programming to be an Android developer.</td>
</tr>
</table>
</html>
Output:
Below is the result that demonstrates the set width of 200px for the table column created using the table-layout CSS attribute.
Conclusion:
In this tutorial, we have explored the concept of creating an HTML table with fixed column widths. The technique involves setting the width of each column in the table using the table-layout CSS property with a value of "fixed".
