CSS Lessons
Home / CSS / CSS Tables

CSS Tables

HTML tables का इस्तेमाल data को organized तरीके से दिखाने के लिए किया जाता है — जैसे result sheet, product comparison, attendance, price list, leaderboard वगैरह बिना CSS के table दिखती है simple और boring लेकिन CSS से आप उसे एकदम modern, clean और responsive बना सकते हैं!

सबसे पहले समझिए: Table Structure क्या है?

HTML table में ये basic tags इस्तेमाल होते हैं

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Row 1, Col 1</td>
    <td>Row 1, Col 2</td>
    <td>Row 1, Col 3</td>
  </tr>
  <tr>
    <td>Row 2, Col 1</td>
    <td>Row 2, Col 2</td>
    <td>Row 2, Col 3</td>
  </tr>
</table>

यहाँ:

  • <table> → पूरी टेबल
  • <tr> → table row
  • <th> → table heading cell
  • <td> → table data cell

बिना CSS वाली Default Table

Header 1Header 2Header 3
Row 1Row 1Row 1
Row 2Row 2Row 2

दिखने में बिलकुल basic — कोई spacing नहीं, कोई color नहीं, बस plain grid। अब CSS से इसे stylish बनाते हैं

Basic CSS Table Styling

table {
  width: 100%;
  border-collapse: collapse; /* double border हटाने के लिए */
}

th, td {
  border: 1px solid #ddd;
  text-align: left;
  padding: 8px;
}

th {
  background-color: #0077cc;
  color: white;
}

Result: अब table साफ, aligned और professional लगेगी।

Property Breakdown

Property (गुण) काम (Function)
**border** cell के चारों ओर **बॉर्डर** (Border around the cell)
**border-collapse** cell borders को **merge** करता है (Merges cell borders)
**padding** cell के अंदर **space** (Space inside the cell)
**text-align** **text alignment** (Text alignment)
**background-color** **color भरने** के लिए (For filling color)

Example – Stylish Table with Hover Effect

<style>
.nice-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Poppins", sans-serif;
}

.nice-table th, .nice-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

.nice-table th {
  background-color: #0077cc;
  color: white;
}

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

.nice-table tr:hover {
  background-color: #e8f4ff;
  transition: 0.3s;
}
</style>

<table class="nice-table">
  <tr>
    <th>Rank</th>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Ravi Kumar</td>
    <td>98</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Anjali Verma</td>
    <td>92</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Deepak Sharma</td>
    <td>89</td>
  </tr>
</table>

Result: alternate row color (striped effect) और hover highlight मिलेगा।

Border Collapse vs Border Spacing

border-collapse: collapse; - सभी cell borders merge हो जाते हैं (most common design) border-collapse: separate;ells के बीच spacing रखी जा सकती है उदाहरण के लिए 

table {
  border-collapse: separate;
  border-spacing: 10px;
}

Zebra-Striped Table (Alternate Row Colors)

tr:nth-child(even) {
  background-color: #f9f9f9;
}
tr:nth-child(odd) {
  background-color: #fff;
}

इससे data पढ़ने में clarity आती है — जैसे Excel sheet

Hover Effects for Rows

tr:hover {
  background-color: #e0f0ff;
  cursor: pointer;
}

Mouse लाने पर row highlighted होगी।

Responsive Table (Mobile Friendly)

Desktop पर तो table सही दिखती है, लेकिन mobile में overflow होने लगता है तो responsive design के लिए container पर scroll लगाएँ

<style>
.table-container {
  overflow-x: auto;
}
</style>
<div class="table-container">
  <table> ... </table>
</div>

अब mobile पर horizontal scroll आएगा, layout नहीं टूटेगा

Example – Modern Table Design

<style>
.modern-table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  border-radius: 10px;
  overflow: hidden;
}

.modern-table th {
  background-color: #0077cc;
  color: #fff;
  padding: 12px;
  text-align: left;
  font-size: 16px;
}

.modern-table td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.modern-table tr:hover {
  background-color: #f1f9ff;
}
</style>

<table class="modern-table">
  <thead>
    <tr>
      <th>Course</th>
      <th>Duration</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML & CSS</td>
      <td>1 Month</td>
      <td>₹499</td>
    </tr>
    <tr>
      <td>JavaScript Basics</td>
      <td>2 Months</td>
      <td>₹899</td>
    </tr>
    <tr>
      <td>Full Stack Development</td>
      <td>6 Months</td>
      <td>₹4999</td>
    </tr>
  </tbody>
</table>

यह design modern dashboards में इस्तेमाल किया जाता है।

Center Align & Width Control

td, th {
  text-align: center;
  width: 33%;
}
Columns को equal width देने में मदद मिलती है।

Alternate Header Colors (Fancy Touch)

th:first-child {
  background-color: #005fa3;
}
th:nth-child(2) {
  background-color: #0077cc;
}
th:nth-child(3) {
  background-color: #0099ff;
}

Multi-color headers — visual appeal बढ़ाते हैं।

Quick Recap

Property Description
**border-collapse** Borders **merge** करता है (बॉर्डर को आपस में मिला देता है)
**border-spacing** Cell **gaps** देता है (सेल्स के बीच की जगह निर्धारित करता है)
**:nth-child()** **Alternate row colors** (वैकल्पिक पंक्तियों को रंग देता है)
**overflow-x: auto** **Responsive scrolling** (क्षैतिज स्क्रॉलिंग देता है जब तालिका कंटेनर से बड़ी हो)
**tr:hover** **Hover effect** (जब माउस पंक्ति पर जाता है तो प्रभाव दिखाता है)

Common Mistakes

  • ❌ Table पर direct width set करना भूल जाना
  • ✅ हमेशा width: 100%; दें ताकि responsive रहे
  • ❌ बहुत ज्यादा thick border
  • ✅ Use subtle 1px solid #ddd style
  • ❌ Text cramped होना
  • ✅ Always padding: 8px–12px दें

Practice Task

  • एक “Student Result Table” बनाइए जिसमें:
  • Name, Subject, Marks, Grade columns हों
  • Header नीला और text white हो
  • Alternate row colors हों
  • Hover पर row highlight हो
  • Table mobile पर scroll हो सके

CSS Tables आपके data को professional look देते हैं। Zebra stripes, hover effects और subtle borders से आपकी table एकदम clean और readable लगती है

← CSS Syntax
category : CSS
Tags : CSS Tables Table Structure table table td table tr table th