Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set fixed width for td in a table ?
To set the fixed width to the table's <td> element we can use multiple approaches. But before that we need to know about the <td> element.
HTML <td> element defines a data cell in an HTML table. It is used to display data in the table, such as text, images, or links. Each <td> element is enclosed within a <tr> element, which represents the row in the table.
Fixed Table Cell Width
It is important that the table looks consistent and easy to read when it displays on the web page. We can easily achieve this by setting a fixed width for the <td> elements in the table. With this, we ensure that each column in the table is the same width, which makes it easier for users to find the information.
Syntax
Following is the syntax for setting fixed width using HTML width attribute
<td width="value">Content</td>
Following is the syntax for setting fixed width using CSS width property
td { width: value; }
Ways to Set Fixed <td> Width
Using HTML width Attribute
To set cell width we can use HTML width attribute with specified values in pixels inside the <td> tag.
Example
<!DOCTYPE html>
<html>
<head>
<title>Fixed TD Width with HTML Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Table with Fixed Column Widths</h2>
<table border="1" style="border-collapse: collapse;">
<tr>
<td width="150px" style="padding: 8px; background-color: #f0f0f0;">Product Name</td>
<td width="100px" style="padding: 8px; background-color: #f0f0f0;">Price</td>
<td width="200px" style="padding: 8px; background-color: #f0f0f0;">Description</td>
</tr>
<tr>
<td style="padding: 8px;">Laptop</td>
<td style="padding: 8px;">$999</td>
<td style="padding: 8px;">High-performance laptop for work</td>
</tr>
<tr>
<td style="padding: 8px;">Mouse</td>
<td style="padding: 8px;">$25</td>
<td style="padding: 8px;">Wireless optical mouse</td>
</tr>
</table>
</body>
</html>
The output shows a table with fixed column widths
Table with Fixed Column Widths +----------------+--------+----------------------------+ | Product Name | Price | Description | +----------------+--------+----------------------------+ | Laptop | $999 | High-performance laptop... | | Mouse | $25 | Wireless optical mouse | +----------------+--------+----------------------------+
Using CSS width Property
To set cell width we can use CSS width property with specified values in pixels, percentages, or other units on the <td> tag.
Example Using CSS Classes
<!DOCTYPE html>
<html>
<head>
<title>Fixed TD Width with CSS</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
.col-name {
width: 150px;
background-color: #e8f4fd;
}
.col-price {
width: 100px;
background-color: #fff2e8;
}
.col-desc {
width: 200px;
background-color: #f0f8e8;
}
td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>CSS-based Fixed Column Widths</h2>
<table>
<tr>
<td class="col-name"><strong>Product</strong></td>
<td class="col-price"><strong>Cost</strong></td>
<td class="col-desc"><strong>Details</strong></td>
</tr>
<tr>
<td class="col-name">Smartphone</td>
<td class="col-price">$599</td>
<td class="col-desc">Latest Android smartphone with 128GB storage</td>
</tr>
<tr>
<td class="col-name">Headphones</td>
<td class="col-price">$89</td>
<td class="col-desc">Noise-canceling wireless headphones</td>
</tr>
</table>
</body>
</html>
The output displays a styled table with consistent column widths
CSS-based Fixed Column Widths +----------------+--------+----------------------------+ | Product | Cost | Details | +----------------+--------+----------------------------+ | Smartphone | $599 | Latest Android smartphone...| | Headphones | $89 | Noise-canceling wireless...| +----------------+--------+----------------------------+
Example Using Percentage Widths
CSS also allows setting widths using percentages for responsive design
<!DOCTYPE html>
<html>
<head>
<title>Percentage-based TD Width</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
.col-1 { width: 30%; }
.col-2 { width: 20%; }
.col-3 { width: 50%; }
td {
padding: 12px;
border: 1px solid #ccc;
vertical-align: top;
}
th {
background-color: #4CAF50;
color: white;
padding: 12px;
border: 1px solid #ccc;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Responsive Table with Percentage Widths</h2>
<table>
<tr>
<th class="col-1">Course Name (30%)</th>
<th class="col-2">Duration (20%)</th>
<th class="col-3">Description (50%)</th>
</tr>
<tr>
<td class="col-1">HTML5 Basics</td>
<td class="col-2">4 weeks</td>
<td class="col-3">Learn the fundamentals of HTML5 including semantic elements, forms, and multimedia integration</td>
</tr>
<tr>
<td class="col-1">CSS Advanced</td>
<td class="col-2">6 weeks</td>
<td class="col-3">Master advanced CSS techniques including flexbox, grid, animations, and responsive design</td>
</tr>
</table>
</body>
</html>
The percentage-based approach creates a responsive table that adapts to different screen sizes while maintaining proportional column widths.
Comparison of Methods
| Method | Advantages | Disadvantages | Best Use Case |
|---|---|---|---|
| HTML width attribute | Simple, direct implementation | Mixes content with presentation, not recommended in modern HTML | Quick prototyping or legacy support |
| CSS width property | Separates content from styling, more flexible, supports various units | Requires CSS knowledge | Production websites, maintainable code |
| Percentage widths | Responsive, adapts to container size | May not work well with very long content | Responsive web design |
Key Points
When setting fixed widths for table cells, consider these important points
-
CSS over HTML Use CSS width property instead of HTML width attribute for better separation of concerns and maintainability.
-
Units You can use pixels (px), percentages (%), em, rem, or other CSS units for width values.
-
Table Layout Consider using
table-layout: fixedCSS property on the table for more predictable width behavior. -
Content Overflow Fixed widths may cause content to wrap or overflow. Use
word-wrap: break-wordoroverflow: hiddenas needed.
Conclusion
Setting fixed widths for table cells improves layout consistency and readability. While both HTML width attributes and CSS width properties work, using CSS provides better maintainability and flexibility. Choose pixel values for precise control or percentage values for responsive designs based on your specific requirements.
10K+ Views
