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 table width in HTML?
Setting table width in HTML controls how much horizontal space the table occupies on a web page. You can set table width using the inline style attribute with the width CSS property. The width can be specified in percentage (relative to parent container) or pixels (fixed width).
Syntax
Following is the syntax to set table width using inline styles −
<table style="width: value"> <!-- table content --> </table>
The width value can be specified as −
Percentage −
width: 50%(relative to container width)Pixels −
width: 400px(fixed width)Keywords −
width: 100%(full container width)
Using Percentage Width
Percentage width makes the table responsive by scaling relative to its parent container. A table with width: 50% will occupy half the available width.
Example
<!DOCTYPE html>
<html>
<head>
<title>Table Width - 50%</title>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Employee Table (50% Width)</h2>
<table style="width: 50%">
<tr>
<th>Name</th>
<th>Job Role</th>
</tr>
<tr>
<td>John Doe</td>
<td>Developer</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>Designer</td>
</tr>
</table>
</body>
</html>
The table occupies 50% of the browser width and adjusts when the window is resized −
Employee Table (50% Width) ????????????????????????????? ? Name ? Job Role ? ????????????????????????????? ? John Doe ? Developer ? ????????????????????????????? ? Jane Smith ? Designer ? ????????????????????????????? (Table spans 50% of container width)
Using Full Width
Setting width: 100% makes the table span the entire width of its container, providing maximum space utilization.
Example
<!DOCTYPE html>
<html>
<head>
<title>Table Width - 100%</title>
<style>
table, th, td {
border: 1px solid green;
border-collapse: collapse;
}
th, td {
padding: 12px;
text-align: left;
}
th {
background-color: mediumseagreen;
color: white;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Cricket Players (Full Width)</h2>
<table style="width: 100%">
<tr>
<th>S.No</th>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>1</td>
<td>Babar Azam</td>
<td>29</td>
<td>Pakistan</td>
</tr>
<tr>
<td>2</td>
<td>Mohammed Shami</td>
<td>33</td>
<td>India</td>
</tr>
<tr>
<td>3</td>
<td>Pat Cummins</td>
<td>30</td>
<td>Australia</td>
</tr>
</table>
</body>
</html>
The table extends across the full browser width with evenly distributed columns −
Cricket Players (Full Width) ???????????????????????????????????????????? ? S.No ? Name ? Age ? Country ? (green header) ???????????????????????????????????????????? ? 1 ? Babar Azam ? 29 ? Pakistan ? ???????????????????????????????????????????? ? 2 ? Mohammed Shami ? 33 ? India ? ???????????????????????????????????????????? ? 3 ? Pat Cummins ? 30 ? Australia ? ???????????????????????????????????????????? (Table spans full container width)
Using Fixed Pixel Width
Pixel values create tables with fixed width that remain constant regardless of screen size. This is useful when you need precise control over table dimensions.
Example
<!DOCTYPE html>
<html>
<head>
<title>Fixed Width Table</title>
<style>
table {
border: 2px solid #333;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
border: 1px solid #666;
padding: 8px;
text-align: center;
}
th {
background-color: #f4f4f4;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Product Catalog (400px Width)</h2>
<table style="width: 400px">
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td>Laptop</td>
<td>$899</td>
<td>15</td>
</tr>
<tr>
<td>Phone</td>
<td>$599</td>
<td>23</td>
</tr>
</table>
</body>
</html>
The table maintains exactly 400 pixels width regardless of browser size −
Product Catalog (400px Width) ??????????????????????????? ? Product ? Price ? Stock ? (gray header) ??????????????????????????? ? Laptop ? $899 ? 15 ? ??????????????????????????? ? Phone ? $599 ? 23 ? ??????????????????????????? (Table width: exactly 400 pixels)
Comparison of Width Methods
| Width Method | Example | Behavior | Best Use Case |
|---|---|---|---|
| Percentage | width: 75% |
Scales with container size | Responsive layouts, mobile-friendly design |
| Fixed Pixels | width: 500px |
Always same size | Precise layouts, desktop applications |
| Full Width | width: 100% |
Uses entire container | Data tables, maximum content display |
| Auto (default) | No width specified | Fits content naturally | Small tables, minimal content |
Conclusion
Table width in HTML is set using the style="width: value" attribute. Use percentage values like 50% or 100% for responsive designs, and pixel values like 400px for fixed-width layouts. Choose the method based on whether you need responsive behavior or precise control over table dimensions.
27K+ Views
