HTML Tables

अब हम HTML के एक बहुत ही उपयोगी और मजेदार टॉपिक पर आ रहे हैं — जो हर वेबसाइट, रिजल्ट पेज, प्राइस लिस्ट या रिपोर्ट में काम आता है।

HTML Table क्या होता है?

जब आपको डेटा को row (पंक्तियों) और column (स्तंभों) के रूप में दिखाना होता है, तो उसके लिए HTML में table का इस्तेमाल किया जाता है।

सरल शब्दों में — “Table” एक ऐसा बॉक्स है जिसमें डेटा को लाइन से सजा कर दिखाया जाता है।

HTML Table के Tags

टैग	उपयोग
<table>	पूरी टेबल को define करता है
<tr>	Table Row (एक पंक्ति)
<th>	Table Header Cell (शीर्षक)
<td>	Table Data Cell (डाटा सेल)

Table Structure Example

<table>
  <tr>
    <th>नाम</th>
    <th>उम्र</th>
    <th>शहर</th>
  </tr>
  <tr>
    <td>राम</td>
    <td>25</td>
    <td>जयपुर</td>
  </tr>
  <tr>
    <td>सीता</td>
    <td>22</td>
    <td>दिल्ली</td>
  </tr>
</table>

Output:

नाम	उम्र	शहर
राम	25	जयपुर
सीता	22	दिल्ली

Table के Elements को समझिए

<table> → पूरी table
<tr> → एक row (horizontal line)
<th> → header cell (bold & center aligned)
<td> → normal cell (data)

Table को Design करना (Borders, Padding, Width)

डिफॉल्ट रूप में HTML table में कोई border नहीं होता। आप CSS से इसे सुंदर बना सकते हैं।

Example:

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

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>Mobile</td>
    <td>₹15,000</td>
    <td>Available</td>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>₹45,000</td>
    <td>Out of Stock</td>
  </tr>
</table>

Output:

Product	Price	Stock
Mobile	₹15,000	Available
Laptop	₹45,000	Out of Stock

Border Collapse क्या है?

border-collapse: collapse; का मतलब होता है कि दो सेल के बीच का डबल बॉर्डर हटाकर एक ही लाइन दिखाना। अगर इसे हटाओ तो बॉर्डर डबल लाइन में दिखेगा।

Example: Table में Caption जोड़ना

आप किसी table को नाम दे सकते हैं <caption> टैग से।

<table border="1">
  <caption>छात्रों की जानकारी</caption>
  <tr>
    <th>नाम</th>
    <th>कक्षा</th>
    <th>अंक</th>
  </tr>
  <tr>
    <td>मोहन</td>
    <td>10वीं</td>
    <td>89%</td>
  </tr>
</table>

Output:

नाम	कक्षा	अंक
मोहन	10वीं	89%

Table में colspan और rowspan

कभी-कभी हमें एक सेल को दो या ज़्यादा कॉलम/रो में फैलाना पड़ता है। इसके लिए colspan और rowspan attribute का इस्तेमाल किया जाता है।

Example: colspan (कॉलम मिलाना)

<table border="1">
  <tr>
    <th colspan="3">Student Details</th>
  </tr>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Ravi</td>
    <td>21</td>
    <td>Mumbai</td>
  </tr>
</table>

Output:

Student Details
Name	Age	City
Ravi	21	Mumbai

Example: rowspan (रो मिलाना)

<table border="1">
  <tr>
    <th rowspan="2">Name</th>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <th>Science</th>
    <th>85</th>
  </tr>
</table>

Table Background & Alignment

आप हर row या column का रंग और alignment बदल सकते हैं।

<style>
th {
  background-color: #4CAF50;
  color: white;
  text-align: left;
}
td {
  background-color: #f9f9f9;
}
</style>

Example: Stylish Table Design

<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<title>HTML Stylish Table</title>
<style>
  table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Segoe UI', sans-serif;
  }
  th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  th {
    background-color: #0078D7;
    color: white;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  caption {
    font-size: 1.2em;
    margin: 10px;
    font-weight: bold;
  }
</style>
</head>
<body>

<table>
  <caption>Monthly Sales Report</caption>
  <tr>
    <th>Month</th>
    <th>Sales (₹)</th>
    <th>Profit (%)</th>
  </tr>
  <tr>
    <td>January</td>
    <td>25,000</td>
    <td>12%</td>
  </tr>
  <tr>
    <td>February</td>
    <td>30,000</td>
    <td>15%</td>
  </tr>
  <tr>
    <td>March</td>
    <td>28,500</td>
    <td>14%</td>
  </tr>
</table>

</body>
</html>

Output: एक सुंदर, प्रोफेशनल टेबल रंगों और borders के साथ।

Table के साथ Best Practices

Table का उपयोग सिर्फ tabular data के लिए करें, layout के लिए नहीं।
हर <th> और <td> को <tr> के अंदर रखें।
Caption का प्रयोग टेबल के अर्थ को स्पष्ट करने के लिए करें।
Styling के लिए CSS का उपयोग करें, border, bgcolor आदि नहीं।
Table को responsive बनाएं — overflow-x:auto का उपयोग करें।

Responsive Table (Mobile Friendly)

<div style="overflow-x:auto;">
  <table border="1">
    <tr><th>नाम</th><th>उम्र</th><th>शहर</th></tr>
    <tr><td>राजू</td><td>24</td><td>दिल्ली</td></tr>
    <tr><td>सीमा</td><td>21</td><td>पटना</td></tr>
  </table>
</div>

Output: मोबाइल पर scroll करने योग्य table बनेगा।