HTML Table Borders का उपयोग table, rows और cells को visually clear बनाने के लिए किया जाता है।
Borders से data readable बनता है और table का structure साफ दिखाई देता है।
Table Border क्या होता है
Table border एक line होती है जो: Table के outer edge
Rows
Columns
Cells
को अलग-अलग दिखाने में मदद करती है।
HTML Attribute से Table Border (Old Method)
HTML में पहले border attribute का उपयोग किया जाता था।
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Amit</td>
<td>25</td>
</tr>
</table>
यह method अभी भी काम करती है, लेकिन modern websites में recommended नहीं है।
CSS से Table Border (Recommended Method)
Modern और professional websites में CSS का उपयोग किया जाता है।
<style>
table, th, td {
border: 1px solid black;
}
</style>
यह table, header और data cells तीनों पर border लगाएगा।
Border Collapse Property
By default borders double दिखाई देते हैं।border-collapse से borders को merge किया जाता है।
<style>
table {
border-collapse: collapse;
}
</style>
यह clean और professional look देता है।
Complete Table Border Example
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #333;
padding: 10px;
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>Course</th>
<th>Duration</th>
<th>Fees</th>
</tr>
<tr>
<td>HTML</td>
<td>1 Month</td>
<td>Free</td>
</tr>
</table>
</body>
</html>
Different Border Styles
CSS में अलग-अलग border styles होते हैं।
th, td {
border-style: solid;
}
Common border styles: solid
dashed
dotted
double
groove
ridge
Example:
th, td {
border: 2px dashed blue;
}
Border Color
Border का color change किया जा सकता है।
th, td {
border: 1px solid red;
}
Border Width
Border की मोटाई control की जा सकती है।
th, td {
border-width: 2px;
}
Individual Borders
हर side के लिए अलग border लगाया जा सकता है।
td {
border-top: 1px solid black;
border-bottom: 1px solid gray;
}
Table Outer Border Only
अगर सिर्फ table के बाहर border चाहिए:
table {
border: 2px solid black;
border-collapse: collapse;
}
th, td {
border: none;
}
Row Borders
Sirf rows पर border लगाने के लिए:
tr {
border-bottom: 1px solid #ccc;
}
Header Border Styling
Table header को अलग style देने के लिए:
th {
border-bottom: 3px solid black;
}
Responsive Table Borders
Mobile devices पर thin borders बेहतर दिखते हैं।
th, td {
border: 0.5px solid #ddd;
}
Common Mistakes
border-collapse use न करना
बहुत मोटे borders लगाना
Poor color contrast
Old HTML border attribute पर depend रहना
Best Practices
CSS से borders apply करें
Clean look के लिए border-collapse: collapse रखें
Light colors का उपयोग करें
Consistent border width रखें
Summary
HTML Table Borders table को readable और structured बनाते हैं।
CSS के जरिए borders को fully control किया जा सकता है।
Proper border styling professional और user-friendly tables के लिए जरूरी होती है।