HTML Table Styling का उपयोग tables को clean, readable और professional look देने के लिए किया जाता है।
Modern websites में tables को style करने के लिए हमेशा CSS का उपयोग किया जाता है।
Table Styling क्यों जरूरी है
Default HTML tables बहुत plain दिखती हैं।
CSS styling से:
Readability बढ़ती है
Data clear दिखता है
UI professional लगता है
User experience improve होता है
Basic Table Styling with CSS
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #333;
padding: 10px;
}
</style>
यह basic styling almost हर table के लिए जरूरी होती है।
Table Header Styling
Headers को visually अलग दिखाने के लिए style किया जाता है।
<style>
th {
background-color: #333;
color: white;
text-align: left;
}
</style>
यह table structure को समझने में मदद करता है।
Table Row Styling
Rows को अलग-अलग color देने से data पढ़ना आसान हो जाता है।
<style>
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
यह technique zebra striping कहलाती है।
Hover Effect on Table Rows
User interaction के लिए hover effect useful होता है।
<style>
tr:hover {
background-color: #ddd;
}
</style>
Reports और dashboards में यह बहुत common है।
Text Alignment in Table
<style>
td {
text-align: center;
}
</style>
Alignment options: left
center
right
Numeric data के लिए right alignment better होता है।
Vertical Alignment
<style>
td {
vertical-align: middle;
}
</style>
Content को vertically align किया जा सकता है।
Table Width और Column Styling
<style>
th:first-child {
width: 30%;
}
th:last-child {
width: 70%;
}
</style>
Specific columns को control करना आसान होता है।
Rounded Corners in Tables
<style>
table {
border-radius: 8px;
overflow: hidden;
}
</style>
Rounded corners modern UI में popular हैं।
Remove Table Borders
<style>
table, th, td {
border: none;
}
</style>
Minimal design tables के लिए useful।
Box Shadow for Table
<style>
table {
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
</style>
Card-style tables बनाने के लिए use होता है।
Complete Styled Table Example
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
th {
background-color: #2c3e50;
color: white;
padding: 12px;
text-align: left;
}
td {
padding: 10px;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Role</th>
<th>Status</th>
</tr>
<tr>
<td>Amit</td>
<td>Admin</td>
<td>Active</td>
</tr>
<tr>
<td>Ravi</td>
<td>User</td>
<td>Inactive</td>
</tr>
</table>
</body>
</html>
Responsive Table Styling
Small screens पर table को scrollable बनाना जरूरी होता है।
<style>
.table-wrapper {
overflow-x: auto;
}
</style>
Table को wrapper div के अंदर रखें।
Accessibility और Styling
Styling करते समय accessibility का ध्यान रखें:
Text readable हो
Color contrast sufficient हो
Headers clearly visible हों
Visual design कभी data clarity को compromise नहीं करना चाहिए।
Common Mistakes
बहुत dark colors use करना
Low contrast text
Over-styling tables
Mobile responsiveness ignore करना
Best Practices
CSS से styling करें, HTML attributes से नहीं
Simple और clean design रखें
Headers को highlight करें
Hover और spacing का balanced use करें
Summary
HTML Table Styling से tables professional और readable बनती हैं।
CSS की मदद से borders, colors, spacing और effects control किए जाते हैं।
Clean और accessible styling modern web design का essential part है।