CSS के साथ टेबल्स स्टाइल करना

CSS से टेबल स्टाइलिंग

CSS के साथ टेबल्स को स्टाइल करने के लिए हम बॉर्डर्स सेट कर सकते हैं, कॉलैप्स कर सकते हैं, चौड़ाई और ऊंचाई सेट कर सकते हैं। पैडिंग, टेक्स्ट अलाइनमेंट आदि भी सेट कर सकते हैं।

उदाहरण 1: टेबल बॉर्डर्स

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 2px dashed orange;
}
</style>
</head>
<body>
<h2>टीम रैंकिंग टेबल</h2>
<table>
  <tr><th>टीम</th><th>रैंक</th><th>पॉइंट्स</th></tr>
  <tr><td>भारत</td><td>1</td><td>200</td></tr>
  <tr><td>इंग्लैंड</td><td>2</td><td>180</td></tr>
  <tr><td>ऑस्ट्रेलिया</td><td>3</td><td>150</td></tr>
  <tr><td>न्यूजीलैंड</td><td>4</td><td>130</td></tr>
  <tr><td>दक्षिण अफ्रीका</td><td>5</td><td>100</td></tr>
  <tr><td>वेस्टइंडीज</td><td>6</td><td>80</td></tr>
  <tr><td>पाकिस्तान</td><td>7</td><td>70</td></tr>
</table>
</body>
</html>

आउटपुट

नारंगी डैश्ड बॉर्डर्स के साथ टेबल - प्रत्येक सेल की अपनी बॉर्डर (सेपरेट मॉडल)।

उदाहरण 2: कॉलैप्स्ड बॉर्डर्स

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  background-color: black;
  color: white;
}
th, td {
  border: 2px dashed yellow;
}
</style>
</head>
<body>
<h2>टीम रैंकिंग टेबल</h2>
<table>
  <tr><th>टीम</th><th>रैंक</th><th>पॉइंट्स</th></tr>
  <tr><td>भारत</td><td>1</td><td>200</td></tr>
  <tr><td>इंग्लैंड</td><td>2</td><td>180</td></tr>
  <tr><td>ऑस्ट्रेलिया</td><td>3</td><td>150</td></tr>
  <tr><td>न्यूजीलैंड</td><td>4</td><td>130</td></tr>
  <tr><td>दक्षिण अफ्रीका</td><td>5</td><td>100</td></tr>
  <tr><td>वेस्टइंडीज</td><td>6</td><td>80</td></tr>
  <tr><td>पाकिस्तान</td><td>7</td><td>70</td></tr>
</table>
</body>
</html>

आउटपुट

कॉलैप्स्ड बॉर्डर्स - सेल्स के बीच सिंगल पीली डैश्ड लाइन, काला बैकग्राउंड।

उदाहरण 3: पैडिंग और टेक्स्ट अलाइनमेंट

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border: 1px solid black;
  background-color: blue;
  color: white;
}
th, td {
  border: 1px solid black;
  padding: 20px;
  text-align: center;
}
table#demo {
  table-layout: fixed;
  width: 100%;
}
</style>
</head>
<body>
<h2>टीम रैंकिंग टेबल</h2>
<table id="demo">
  <tr><th>टीम</th><th>रैंक</th><th>पॉइंट्स</th></tr>
  <tr><td>भारत</td><td>1</td><td>200</td></tr>
  <tr><td>इंग्लैंड</td><td>2</td><td>180</td></tr>
  <tr><td>ऑस्ट्रेलिया</td><td>3</td><td>150</td></tr>
  <tr><td>न्यूजीलैंड</td><td>4</td><td>130</td></tr>
  <tr><td>दक्षिण अफ्रीका</td><td>5</td><td>100</td></tr>
</table>
</body>
</html>

आउटपुट

20px पैडिंग, सेंटर अलाइन टेक्स्ट, फिक्स्ड लेआउट, नीला बैकग्राउंड के साथ टेबल।

टेबल स्टाइलिंग के लिए उपयोगी CSS प्रॉपर्टीज:

मॉडर्न टेबल स्टाइलिंग टिप्स:

• :nth-child(even/odd) जेबरा स्ट्रिपिंग के लिए
• thead th { position: sticky; top: 0; } स्टिकी हेडर के लिए
• overflow-x: auto मोबाइल पर हॉरिजॉन्टल स्क्रॉल के लिए
• border-radius टेबल कंटेनर पर (collapse के साथ काम नहीं करता)