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 cell width and height in HTML?
In HTML tables, cell width and height can be controlled using CSS styling. The most common approach is to use inline CSS with the style attribute on <td> (table data) or <th> (table header) elements. You can specify dimensions in pixels, percentages, or other CSS units.
Syntax
Following is the syntax for setting cell width and height using inline CSS −
<td style="width: value; height: value;">Content</td>
You can also apply dimensions to header cells −
<th style="width: value; height: value;">Header</th>
Here, value can be specified in pixels (px), percentages (%), em units, or other CSS measurement units.
Setting Width and Height with Pixels
Using pixel values gives you precise control over cell dimensions. This method is ideal when you need fixed-size cells regardless of content or screen size.
Example
Following example demonstrates setting specific width and height for table cells using pixel values −
<!DOCTYPE html>
<html>
<head>
<title>Cell Width and Height</title>
<style>
table, tr, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Employee Table</h2>
<table>
<tr>
<th style="width: 150px; height: 50px;">Name</th>
<th style="width: 200px; height: 50px;">Job Role</th>
</tr>
<tr>
<td style="width: 150px; height: 40px;">Tharun</td>
<td style="width: 200px; height: 40px;">Content Writer</td>
</tr>
<tr>
<td style="width: 150px; height: 40px;">Akshaj</td>
<td style="width: 200px; height: 40px;">Content Writer</td>
</tr>
</table>
</body>
</html>
The output shows a table with fixed cell dimensions −
Employee Table ???????????????????????????????????????????? ? Name ? Job Role ? (headers: 150px × 50px, 200px × 50px) ???????????????????????????????????????????? ? Tharun ? Content Writer ? (cells: 150px × 40px, 200px × 40px) ???????????????????????????????????????????? ? Akshaj ? Content Writer ? (cells: 150px × 40px, 200px × 40px) ????????????????????????????????????????????
Setting Width and Height with Percentages
Percentage values make cells responsive to the table's overall width. This approach is useful for creating flexible layouts that adapt to different screen sizes.
Example
Following example uses percentage values for responsive cell sizing −
<!DOCTYPE html>
<html>
<head>
<title>Responsive Cell Dimensions</title>
<style>
table, tr, th, td {
border: 1px solid #333;
border-collapse: collapse;
}
table {
width: 100%;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Product Catalog</h2>
<table>
<tr>
<th style="width: 30%; height: 60px;">Product Name</th>
<th style="width: 20%; height: 60px;">Price</th>
<th style="width: 50%; height: 60px;">Description</th>
</tr>
<tr>
<td style="height: 80px;">Laptop</td>
<td style="height: 80px;">$999</td>
<td style="height: 80px;">High-performance laptop for professionals</td>
</tr>
<tr>
<td style="height: 80px;">Mouse</td>
<td style="height: 80px;">$25</td>
<td style="height: 80px;">Wireless optical mouse</td>
</tr>
</table>
</body>
</html>
The table adapts to the container width while maintaining proportional column sizes −
Product Catalog ???????????????????????????????????????????????????????????????????? ? Product Name ? Price ? Description ? (30%, 20%, 50% widths) ???????????????????????????????????????????????????????????????????? ? Laptop ? $999 ? High-performance laptop for professionals? ???????????????????????????????????????????????????????????????????? ? Mouse ? $25 ? Wireless optical mouse ? ????????????????????????????????????????????????????????????????????
Using CSS Classes for Cell Dimensions
For better maintainability, you can define CSS classes instead of using inline styles. This approach allows you to apply consistent sizing across multiple tables.
Example
Following example demonstrates using CSS classes to control cell dimensions −
<!DOCTYPE html>
<html>
<head>
<title>CSS Classes for Cell Sizing</title>
<style>
table, tr, th, td {
border: 1px solid #666;
border-collapse: collapse;
text-align: center;
}
.header-cell {
width: 120px;
height: 50px;
background-color: #f0f0f0;
font-weight: bold;
}
.data-cell {
width: 120px;
height: 35px;
}
.wide-cell {
width: 180px;
height: 35px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Team Schedule</h2>
<table>
<tr>
<th class="header-cell">Day</th>
<th class="header-cell">Time</th>
<th class="header-cell">Task</th>
</tr>
<tr>
<td class="data-cell">Monday</td>
<td class="data-cell">9:00 AM</td>
<td class="wide-cell">Team Meeting</td>
</tr>
<tr>
<td class="data-cell">Tuesday</td>
<td class="data-cell">2:00 PM</td>
<td class="wide-cell">Project Review</td>
</tr>
</table>
</body>
</html>
CSS classes provide cleaner HTML and easier maintenance for large tables −
Team Schedule ??????????????????????????????????????? ? Day ? Time ? Task ? (headers with gray background) ??????????????????????????????????????? ? Monday ? 9:00 AM ? Team Meeting ? (120px × 35px, 120px × 35px, 180px × 35px) ??????????????????????????????????????? ? Tuesday ? 2:00 PM ? Project Review ? ???????????????????????????????????????
Key Points
When setting cell dimensions in HTML tables, consider the following important points −
-
Border-collapse − Use
border-collapse: collapseto avoid double borders and get accurate cell sizing. -
Content overflow − If content exceeds the specified dimensions, cells will automatically expand unless you use
overflow: hidden. -
Column consistency − Setting width on any cell in a column affects the entire column width.
-
Responsive design − Use percentage values for responsive tables and pixel values for fixed layouts.
-
Table layout − Consider using
table-layout: fixedfor more predictable cell sizing behavior.
Conclusion
Setting cell width and height in HTML is achieved through CSS styling, either inline or through CSS classes. Use pixel values for precise control and percentage values for responsive designs. CSS classes provide the cleanest and most maintainable approach for styling table cells consistently across your web pages.
42K+ Views
