CSS टेबल्स

सादी HTML table काम तो करती है, पर वह खाली-खाली दिखती है — पतली grey लाइनें, सिकुड़ा हुआ text, कोई रंग नहीं। CSS उसी table को साफ़ मेनू, सुथरी timetable या पढ़ने लायक marksheet में बदल देता है। आप HTML नहीं बदलते। आप सिर्फ style जोड़ते हैं।

Diagram — देखें, यह सब कैसे जुड़ता है

Tables हर जगह इस्तेमाल होती हैं: चाय की दुकान का मेनू, स्कूल की timetable, क्रिकेट scorecard, परीक्षा की result list। अगर लोगों को rows में data पढ़ना है, तो table आँखों को आसान लगनी चाहिए। CSS tables का यही पूरा काम है।

Borders — पहला कदम

Table, headings और cells को border property से border दें। एक और property के बिना, आपको अजीब नतीजा मिलता है: हर cell अपनी border खुद बनाता है, इसलिए cells के बीच आपको दोहरी लाइनें दिखती हैं। हल है table पर border-collapse: collapse। यह छूती हुई borders को एक साफ़ लाइन में मिला देता है।

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #999;
  padding: 10px;
}

चौड़ाई, padding और alignment

तीन छोटी properties सबसे ज़्यादा काम करती हैं। width तय करती है कि table कितनी चौड़ी है — 100% उसे अपने container को भर देता है। padding हर cell के अंदर साँस लेने की जगह देता है, ताकि text border को छुए नहीं। text-align text को सीधा करता है: headings और नाम बाईं ओर, नंबर और कीमतें दाईं ओर।

th, td {
  padding: 12px;
  text-align: left;
}
.price {
  text-align: right;
}

Zebra stripes — हर दूसरी पंक्ति को रंग

जब table में बहुत-सी rows होती हैं, तो आँख गलत लाइन पर फिसल जाती है। Zebra stripes इसे ठीक करते हैं: हर even row को हल्का background colour दें। Selector tr:nth-child(even) rows 2, 4, 6 वगैरह को चुनता है। आप :nth-child से pseudo-classes वाले पाठ में ठीक से मिलेंगे।

tr:nth-child(even) {
  background-color: #f2f2f2;
}

Hover वाली पंक्तियाँ

Hover row mouse के नीचे वाली row को जला देता है। यह छोटा-सा स्पर्श है, पर लंबी table को पढ़ना बहुत आसान कर देता है — पढ़ने वाला हमेशा जानता है कि वह किस row पर है।

tr:hover {
  background-color: #ddd;
}

Responsive tables — छोटी स्क्रीन पर

चौड़ी table phone की screen तोड़ देती है: वह या तो text को सिकोड़ देती है या पेज को बगल की ओर धकेल देती है। आसान हल है table को overflow-x: auto वाले <div> में लपेट देना। छोटी screen पर table अपने बॉक्स के अंदर बगल की ओर scroll होती है, और बाकी पेज स्थिर रहता है।

<div style="overflow-x: auto;">
  <table> ... </table>
</div>

आम गलतियाँ

• border-collapse: collapse भूल जाना और हैरान होना कि borders दोगुने क्यों दिखते हैं।
• Border सिर्फ table पर लगाना और cells को भूल जाना — तब सिर्फ बाहरी किनारा दिखता है।
• Cells के अंदर जगह के लिए padding की जगह <br> या extra spaces इस्तेमाल करना।
• Table को तय pixel चौड़ाई देना, जिससे वह phone screen पर बाहर निकल जाती है।
• हर row को एक ही गहरा रंग देना, जिससे zebra stripes और hover effect गायब हो जाते हैं।

याद रखें

• border-collapse: collapse दोहरी borders को एक साफ़ लाइन में बदल देता है।
• padding text को cell के अंदर जगह देता है; text-align उसे सीधा करता है।
• tr:nth-child(even) zebra stripes बनाता है; tr:hover mouse के नीचे वाली row को जलाता है।
• चौड़ी table को overflow-x: auto वाले div में लपेटें ताकि वह छोटी screens पर scroll हो।
• Heading row (th) को data rows (td) से अलग style करें।
• तरकीब: border-collapse लगाओ, डबल लाइन भगाओ।

उदाहरण समझिए

• table { width: 80%; margin: 20px auto; border-collapse: collapse; } — table पेज की चौड़ाई का 80% लेती है, बीच में बैठती है, और उसकी borders एक लाइन में मिल जाती हैं।
• th, td { border: 1px solid #d97706; padding: 12px; text-align: left; } — हर heading cell और data cell को एक ही गर्म भूरा border, हवादार padding और बाईं ओर रखा text मिलता है।
• th { background-color: #92400e; color: white; } — heading row को गहरा भूरा background और सफ़ेद text मिलता है, इसलिए column के नाम अलग दिखते हैं।
• tr:nth-child(even) { background-color: #fef3c7; } — हर even row को हल्का पीला background मिलता है, जिससे मेनू में zebra stripes बनती हैं।
• tr:hover { background-color: #fde68a; } — mouse के नीचे वाली row गहरी पीली हो जाती है, इसलिए पाठक अपनी जगह कभी नहीं खोता।
• .price { text-align: right; } — कीमत वाला column दाईं ओर सीधा होता है, जैसे कीमतें आम तौर पर पढ़ी जाती हैं।