HTML Table Padding और Spacing का उपयोग table के अंदर data को readable और clean दिखाने के लिए किया जाता है।
इनसे table crowded नहीं लगता और professional look मिलता है।
Table Padding क्या होता है
Padding का मतलब है cell के अंदर content और border के बीच की space।
यह <th> और <td> के अंदर apply होती है।
Padding बढ़ाने से text border से चिपका हुआ नहीं दिखता।
CSS से Table Padding
Modern HTML में padding हमेशा CSS से दी जाती है।
<style>
th, td {
padding: 10px;
}
</style>
यह हर cell के अंदर 10px space add कर देगा।
Padding का Practical Example
<table>
<tr>
<th>Name</th>
<th>City</th>
</tr>
<tr>
<td>Amit</td>
<td>Delhi</td>
</tr>
</table>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
अब table ज्यादा clean और readable लगेगी।
Individual Side Padding
हर side की padding अलग-अलग भी दी जा सकती है।
td {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
}
Table Spacing क्या होता है
Table spacing का मतलब है cells के बीच की space।
HTML में इसे border-spacing से control किया जाता है।
यह तब काम करता है जब border-collapse off हो।
Border Spacing Example
<style>
table {
border-spacing: 10px;
}
</style>
Cells के बीच 10px का gap आ जाएगा।
Horizontal और Vertical Spacing
table {
border-spacing: 10px 20px;
}
यहाँ: 10px = horizontal spacing
20px = vertical spacing
Padding vs Spacing में Difference
Padding: Cell के अंदर space
Text और border के बीच gap
Spacing: Cells के बीच space
Table layout open दिखता है
Padding और Border Collapse Relation
अगर border-collapse: collapse; लगा है, तो border-spacing काम नहीं करता।
table {
border-collapse: collapse;
}
इस case में spacing के लिए सिर्फ padding use करें।
Cellspacing Attribute (Old Method)
HTML में पहले cellspacing attribute use होता था।
<table cellspacing="10">
यह method outdated है और modern websites में avoid किया जाता है।
Cellpadding Attribute (Old Method)
<table cellpadding="10">
यह भी deprecated है और CSS preferred है।
Complete Padding & Spacing Example
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-spacing: 8px;
}
th, td {
border: 1px solid #333;
padding: 12px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Laptop</td>
<td>₹50000</td>
</tr>
</table>
</body>
</html>
Best Padding Values
Small tables:
Padding 8px – 10px
Large tables:
Padding 12px – 16px
Too much padding table को unnecessary बड़ा बना देता है।
Common Mistakes
Padding बिल्कुल न देना
Spacing और padding को confuse करना
Old HTML attributes use करना
Mobile screen के लिए padding adjust न करना
Best Practices
Padding के लिए CSS use करें
Readable spacing रखेंborder-collapse के साथ padding prefer करें
Mobile devices पर padding slightly कम रखें
Summary
HTML Table Padding content को readable बनाता है।
Table Spacing cells के बीच distance control करता है।
Modern HTML में padding और spacing हमेशा CSS से manage करनी चाहिए।