📝 Designing Tables Through CSS

HTML में <table> का उपयोग data को rows और columns के form में दिखाने के लिए किया जाता है।

लेकिन केवल HTML table बनाने से table बहुत simple दिखाई दे सकती है। CSS की मदद से हम table को:

• Attractive बना सकते हैं।
• Readable बना सकते हैं।
• Borders add कर सकते हैं।
• Alternate rows में different colors दे सकते हैं।
• Mouse hover करने पर row को highlight कर सकते हैं।

इसी process को Designing/Styling Tables through CSS कहा जाता है।

---

🔹 1. Adding Border to Table

Table में border लगाने से उसकी rows और cells clearly दिखाई देती हैं।

इसके लिए border property का उपयोग किया जाता है।

Syntax:

table, th, tr, td {
  border: 1px solid black;
}

यहाँ:

• table → पूरी table
• th → Table Header
• tr → Table Row
• td → Table Data/Cell
• 1px → Border की thickness
• solid → Border का style
• black → Border का color

इससे table के अलग-अलग parts पर border दिखाई देगा।

---

🔹 2. border-collapse Property

जब हम table और उसके cells दोनों पर border लगाते हैं, तो cells के बीच double borders दिखाई दे सकते हैं।

Example:

┌──────┬──────┐
│ Name │ Age  │
├──────┼──────┤
│ Ram  │ 20   │
└──────┴──────┘

इन borders को एक single border में merge करने के लिए border-collapse property का उपयोग किया जाता है।

Syntax:

table {
  border-collapse: collapse;
}

इसके मुख्य values:

collapse

Adjacent borders को combine करके single border बना देता है।

table {
  border-collapse: collapse;
}

यह table को ज्यादा clean और professional appearance देता है।

separate

यह default value है।

इसमें cells के borders अलग-अलग रहते हैं और उनके बीच spacing/double-border जैसा effect दिखाई दे सकता है।

table {
  border-collapse: separate;
}

याद रखें:

collapse → Single/merged border

separate → Separate borders

---

🔹 3. Making a Striped Table

एक striped table में alternate rows के background colors अलग-अलग होते हैं।

इससे ज्यादा rows वाली table को पढ़ना आसान हो जाता है क्योंकि एक row को दूसरी row से आसानी से अलग किया जा सकता है।

इसके लिए :nth-child() pseudo-class का उपयोग किया जाता है।

Example:

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

यहाँ:

• tr → सभी table rows को target करता है।
• :nth-child(even) → Even-numbered rows को target करता है।
• background-color → Row का background color change करता है।

इससे:

Row 1 → Normal
Row 2 → Gray
Row 3 → Normal
Row 4 → Gray
Row 5 → Normal
Row 6 → Gray

Odd Rows

अगर odd-numbered rows को target करना हो:

tr:nth-child(odd) {
  background-color: lightgray;
}

याद रखें:

even → 2, 4, 6, 8...

odd → 1, 3, 5, 7...

---

🔹 4. Making a Hoverable Table

Table को interactive बनाने के लिए हम :hover selector का उपयोग कर सकते हैं।

जब user mouse को किसी row के ऊपर ले जाता है, तो उस row का background color change हो जाता है।

Syntax:

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

यहाँ :hover तब apply होता है जब mouse pointer element के ऊपर होता है।

Example:

Before Hover:

Name       Age
----------------
Rahul      20
Aman       22
Riya       21


After Hover on Aman:

Name       Age
----------------
Rahul      20
Aman       22  ← Highlighted
Riya       21

इससे table ज्यादा interactive और user-friendly दिखाई देती है।

---

⭐ Question: Make a Good Looking Table Using Above Properties

नीचे दिए गए example में हमने ऊपर सीखी गई सभी properties का उपयोग किया है:

<!DOCTYPE html>
<html>
<head>
  <style>

    table {
      width: 70%;
      border-collapse: collapse;
      margin: 20px auto;
      font-family: Arial, sans-serif;
    }

    th, td {
      border: 1px solid black;
      padding: 12px;
      text-align: center;
    }

    th {
      background-color: #333;
      color: white;
    }

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

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

  </style>
</head>

<body>

  <table>

    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Course</th>
    </tr>

    <tr>
      <td>Rahul</td>
      <td>20</td>
      <td>BCA</td>
    </tr>

    <tr>
      <td>Aman</td>
      <td>21</td>
      <td>B.Tech</td>
    </tr>

    <tr>
      <td>Riya</td>
      <td>20</td>
      <td>BCA</td>
    </tr>

    <tr>
      <td>Priya</td>
      <td>22</td>
      <td>MCA</td>
    </tr>

  </table>

</body>
</html>

---

🔍 Code की Important Properties

width: 70%;

Table की width screen/container की लगभग 70% होगी।

border-collapse: collapse;

Cells के adjacent borders को single border में combine करेगा।

border: 1px solid black;

Table cells में 1px का black solid border लगाएगा।

padding: 12px;

Cell के अंदर content और border के बीच 12px की space देगा।

text-align: center;

Cell के अंदर text को center में रखेगा।

tr:nth-child(even)

Even rows को अलग background color देगा, जिससे striped effect बनेगा।

tr:hover

Mouse को किसी row पर ले जाने पर उसका background color change करेगा।

th

Table header को अलग color और white text देकर ज्यादा prominent बनाया गया है।

---

🧠 Quick Revision

Property/Selector	काम
border	Table/cells पर border लगाता है
border-collapse	Borders को merge या separate करता है
:nth-child(even)	Even rows को select करता है
:nth-child(odd)	Odd rows को select करता है
:hover	Mouse hover होने पर style change करता है
padding	Cell के अंदर space देता है
text-align	Text की alignment set करता है

सबसे important याद रखें:

Border → Structure दिखाता है

Border-collapse → Double border को single करता है

nth-child → Alternate rows को style करता है

hover → Mouse आने पर row highlight करता है