HTML Tutorial

Tutorials in Hindi » HTML » HTML Table – Colspan & Rowspan
← Previous Next →

HTML Table – Colspan & Rowspan

📘 HTML Table – Colspan & Rowspan Explained in Hindi

HTML Tables में कभी-कभी ज़रूरत होती है कि एक cell एक से अधिक columns या rows में फैले। इसके लिए HTML हमें दो attributes देता है:

इस chapter में हम इन दोनों का प्रयोग करके merged cells, complex headers, और advanced layouts बनाना सीखेंगे।

🔷 1. colspan – एक cell को कई कॉलम में फैलाना

जब आप चाहते हैं कि एक cell दो या अधिक कॉलम की जगह ले ले, तो colspan का उपयोग करें।

✅ Example:

<table border="1">
  <tr>
    <th colspan="2">विद्यार्थी की जानकारी</th>
  </tr>
  <tr>
    <td>नाम</td>
    <td>राम</td>
  </tr>
</table>

📌 यहाँ पहली row का cell दो कॉलम को cover कर रहा है।

🔷 2. rowspan – एक cell को कई rows में फैलाना

जब आप चाहते हैं कि एक cell ऊपर-नीचे की दो या अधिक rows को जोड़ दे, तो rowspan का उपयोग करें।

✅ Example:

<table border="1">
  <tr>
    <th rowspan="2">दिन</th>
    <th>सुबह</th>
  </tr>
  <tr>
    <td>योग</td>
  </tr>
</table>

📌 “दिन” वाला cell दो rows में फैला है।

🔷 3. Combined Example – Colspan और Rowspan साथ में

<table border="1">
  <tr>
    <th rowspan="2">दिन</th>
    <th colspan="2">समय</th>
  </tr>
  <tr>
    <th>सुबह</th>
    <th>शाम</th>
  </tr>
  <tr>
    <td>सोमवार</td>
    <td>योग</td>
    <td>पढ़ाई</td>
  </tr>
</table>

📌 इस table में:

🔷 4. colspan और rowspan कब उपयोग करें?

स्थितिक्या करें
Header को merge करना हैcolspan
एक ही data को multiple rows के लिए दिखाना हैrowspan
Weekly Schedule या Report card बनाना हैदोनों का प्रयोग करें

🔷 5. CSS Styling के साथ प्रयोग

<style>
  th {
    background-color: #f2f2f2;
    text-align: center;
    padding: 10px;
  }
  td {
    text-align: center;
    padding: 8px;
  }
</style>

🧪 Practice Task

  1. एक table बनाइए जिसमें “Course Info” नाम का cell दो columns को कवर करे।
  2. एक table बनाइए जिसमें “दिन” cell दो rows को कवर करे।
  3. एक table बनाइए जो timetable की तरह structured हो और उसमें rowspan और colspan दोनों का प्रयोग हो।

❗ ध्यान रखें:

गलतीसमाधान
Extra cells error आ रही हैcolspan या rowspan से cell count सही manage करें
Borders mismatch हो रहे हैंtable को grid layout में पहले draw करें, फिर cells assign करें
Text align गड़बड़ हैtext-align, padding, vertical-align CSS से सुधारें

🔚 Conclusion

← Previous Next →