HTML Table Sizes का मतलब है table, rows, columns और cells की width और height को control करना।
Proper sizing से table ज्यादा readable, responsive और professional दिखती है।
Table Size क्यों जरूरी है
Default table size content के हिसाब से auto adjust होती है।
लेकिन real websites में हमें अक्सर fixed या percentage-based size चाहिए होती है।
Uses: Layout control
Responsive design
Data readability
Consistent UI
Table Width Set करना
Percentage Width
<table style="width:100%;">
Table पूरे container की width ले लेगी।
Fixed Width (Pixels)
<table style="width:600px;">
Table की width fixed रहेगी, screen size change होने पर भी।
CSS से Table Width
Recommended तरीका CSS है।
<style>
table {
width: 80%;
}
</style>
Table Height Set करना
Table की height set की जा सकती है, लेकिन usually rows या cells पर height देना बेहतर होता है।
<table style="height:300px;">
अगर content ज्यादा हुआ तो height auto expand हो सकती है।
Row Height Control करना
<tr style="height:50px;">
यह पूरी row की height set करेगा।
Cell Size Control करना
Cell Width
<td style="width:200px;">Data</td>
Cell Height
<td style="height:60px;">Data</td>
Complete Table Size Example
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>City</th>
</tr>
<tr>
<td>Amit</td>
<td>Delhi</td>
</tr>
</table>
</body>
</html>
Column Width Set करना
Specific column की width set करने के लिए <th> या <td> पर width दें।
<th style="width:30%;">Name</th>
<th style="width:70%;">Address</th>
Browser बाकी columns automatically adjust कर लेता है।
Auto Table Layout vs Fixed Table Layout
Auto Layout (Default)
table {
table-layout: auto;
}
Browser content के आधार पर column width decide करता है।
Fixed Layout
table {
table-layout: fixed;
}
Columns की width fast calculate होती है और layout stable रहता है।
Fixed Table Layout Example
<style>
table {
width: 100%;
table-layout: fixed;
}
td {
width: 25%;
}
</style>
Large tables के लिए table-layout: fixed बेहतर performance देता है।
Responsive Table Size
Small screens पर table overflow हो सकती है।
Simple responsive solution:
<style>
.table-wrapper {
overflow-x: auto;
}
</style>
<div class="table-wrapper">
<table>
...
</table>
</div>
Percentage vs Pixel Width
Percentage: Responsive
Flexible layout
Pixels: Fixed layout
Precise control
Modern websites में percentage या max-width prefer किया जाता है।
Common Mistakes
Table width fix करके mobile ignore करना
Very small cell height रखना
Content overflow को handle न करना
Inline styles का ज्यादा use
Best Practices
CSS से table sizes control करें
Percentage width prefer करें
Mobile responsiveness जरूर check करें
Padding के साथ height balance रखें
Summary
HTML Table Sizes table की width और height control करने के लिए use की जाती हैं।
CSS के जरिए table, rows और cells का size manage करना best approach है।
Responsive और readable tables professional websites के लिए जरूरी होती हैं।