HTML Tables Kya Hain?

HTML Tables ka Introduction

HTML tables ka use structured data ko row aur column format mein dikhane ke liye hota hai. Yeh ek systematic tareeke se information ko organize karne ka prabhavi tarika hai. Tables mein hum text ke saath images, links, aur buttons bhi add kar sakte hain.

Har table <table> tag se shuru hoti hai, aur usme <tr> (table row), <th> (table header), aur <td> (table data) tags ka use hota hai.

Basic Table Structure

<table>
  <tr>
    <th>Naam</th>
    <th>Umar</th>
    <th>Shaher</th>
  </tr>
  <tr>
    <td>Amit</td>
    <td>25</td>
    <td>Delhi</td>
  </tr>
  <tr>
    <td>Neha</td>
    <td>22</td>
    <td>Mumbai</td>
  </tr>
</table>

Core Table Tags

• <table>: Pure table ko define karta hai.
• <tr> (Table Row): Table ke andar ek row create karta hai.
• <th> (Table Header): Header cell banata hai. By default, iska text bold aur center-aligned hota hai.
• <td> (Table Data): Standard data cell banata hai.

Semantic Table Structure (thead, tbody, tfoot)

Large tables ko better structure aur accessibility ke liye <thead>, <tbody>, aur <tfoot> tags me group karna chahiye.

• <thead>: Table ke header content ko group karta hai.
• <tbody>: Table ke main body content ko group karta hai.
• <tfoot>: Table ke footer content (jaise summary ya total) ko group karta hai.

Example:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>$2</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>$1</td>
      <td>10</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total</td>
      <td>15</td>
    </tr>
  </tfoot>
</table>

Merging Cells (rowspan aur colspan)

Kabhi kabhi humein multiple rows ya columns ko ek single cell me merge karne ki zaroorat padti hai. Iske liye rowspan aur colspan attributes use hote hain.

Colspan (Column Merge)

colspan attribute ek cell ko horizontally multiple columns tak expand karta hai.

<table border="1">
  <tr>
    <th colspan="2">Student Information</th>
  </tr>
  <tr>
    <td>Amit</td>
    <td>Delhi</td>
  </tr>
</table>

Rowspan (Row Merge)

rowspan attribute ek cell ko vertically multiple rows tak expand karta hai.

<table border="1">
  <tr>
    <th>Name</th>
    <td>Amit</td>
  </tr>
  <tr>
    <th rowspan="2">Contact</th>
    <td>Email: amit@example.com</td>
  </tr>
  <tr>
    <td>Phone: 1234567890</td>
  </tr>
</table>

Styling Tables with CSS

Purane HTML me cellspacing aur cellpadding attributes use hote the, lekin ab yeh obsolete ho chuke hain. Modern web development me table styling ke liye CSS ka use karna best practice hai. Aap border, padding, aur border-collapse jaise properties use kar sakte hain.

table {
  width: 100%;
  border-collapse: collapse; /* Merges cell borders */
}

th, td {
  border: 1px solid #ccc;
  padding: 8px; /* Replaces cellpadding */
  text-align: left;
}

thead {
  background-color: #f2f2f2;
}

Key Takeaways

• Tables ka use data ko row aur column me organize karne ke liye hota hai.
• Core tags hain: <table>, <tr>, <th>, aur <td>.
• Semantic structure ke liye <thead>, <tbody>, aur <tfoot> use karein.
• colspan aur rowspan attributes se cells ko merge kiya ja sakta hai.
• Styling ke liye hamesha CSS ka use karein, na ki outdated HTML attributes ka.