HTML Table

1. HTML Table Kya Hai?

HTML Table ek structure hota hai jisme data ko rows aur columns mein arrange kiya jata hai. Ye spreadsheet ki tarah kaam karta hai jahan har row ek horizontal line hoti hai aur har column ek vertical line hoti hai. Tables ka use mainly tabular data display karne ke liye hota hai.

2. HTML Table Banane Ke Basic Tags

HTML Table banane ke liye kuch basic tags ka use hota hai:

• <table> – Table start karne ke liye. Is tag se ham table ko start karte hai aur sare table related tags isi mein hi likhte hai.
• <tr> – Table Row (row banane ke liye). Is tag se ham table mein rows define karte hai.
• <th> – Table Header (heading cells ke liye). Ye tag table ki heading row ke liye use hota hai jisse table ki heading row bold ho jaati hai.
• <td> – Table Data (normal cells ke liye). Ye tag normal tables mein data ko insert karne liye use hota hai.

<table>
 <tr>
  <th>Name</th>
  <th>Age</th>
  <th>City</th>
 </tr>
 <tr>
  <td>Rahul</td>
  <td>25</td>
  <td>Delhi</td>
 </tr>
 <tr>
  <td>Priya</td>
  <td>22</td>
  <td>Mumbai</td>
 </tr>
</table>

3. Table Borders

By default HTML tables ke paas koi border nahi hota, ye bilkul normal appearence mein show hoti hai, lekin ham isme border add kar sakte hai using border attribute ya CSS ka use bhi kar sakte hai.

<table border="1">
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Pen</td>
    <td>10</td>
  </tr>
</table>

Ya phir CSS ke sath:

<style>
  table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }
</style>

4. Table Head, Body, Aur Footer

Large tables mein data ko divide karne ke liye <thead>, <tbody>, aur <tfoot> ka use hota hai. Hum in tags ka use isliye karte hain taaki HTML tables zyada clean, understandable, accessible aur professional ban sake, aur browser bhi data ko better handle kar sake.

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>5000</td>
    </tr>
    <tr>
      <td>February</td>
      <td>7000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>12000</td>
    </tr>
  </tfoot>
</table>

5. Rowspan Aur Colspan

• rowspan – Ek cell ko multiple rows mein stretch karta hai.
• colspan – Ek cell ko multiple columns mein stretch karta hai.

<table border="1">
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Marks</th>
  </tr>
  <tr>
    <th>Math</th>
    <th>Science</th>
  </tr>
  <tr>
    <td>Ravi</td>
    <td>85</td>
    <td>90</td>
  </tr>
</table>

6. Styling Tables with CSS

Table ko attractive banane ke liye CSS use hoti hai.

<style>
  table {
    width: 50%;
    border-collapse: collapse;
    text-align: center;
  }
  th {
    background-color: #4CAF50;
    color: white;
    padding: 8px;
  }
  td {
    padding: 8px;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
</style>

7. Best Practices for HTML Tables

• Table ka use sirf tabular data ke liye karein, layout ke liye nahi.
• Accessibility improve karne ke liye <caption> tag ka use karein.
• Large data ke liye thead, tbody, tfoot ka use karein.

Conclusion

HTML Tables ek simple aur powerful tarika hai data ko organized tarike se display karne ka. Basic tags (<table>, <tr>, <th>, <td>) samajhkar aap easily apne webpage par neat aur readable tables bana sakte ho.