🔶 HTML Table Tag 


HTML में <table> टैग का उपयोग किसी भी वेब पेज पर Table (सारणी) बनाने के लिए किया जाता है। HTML tables की मदद से हम डेटा को rows (पंक्तियाँ) और columns (स्तंभ) के रूप में neatly organize कर सकते हैं।

🔸 HTML Table Tags List with Description (Basic + Advanced)

टैगउपयोग
<table>पूरी टेबल को define करता है
<tr>Table Row बनाता है
<th>Table Header Cell बनाता है
<td>Table Data Cell बनाता है
<thead>Table के Header Section को group करता है
<tbody>Table के मुख्य content (main body rows) को group करता है
<tfoot>Table के Footer Section को define करता है
colspanएक cell को multiple columns तक फैलाने के लिए
rowspanएक cell को multiple rows तक फैलाने के लिए


🔸 HTML Table Tags और उनका उपयोग (HTML Table Tags in Hindi)

टैगविवरण (Description)
<table>यह पूरी टेबल को define करता है।
<tr> (Table Row)यह टेबल की एक पंक्ति (row) को create करता है।
<th> (Table Header)यह हेडर सेल के लिए होता है, जो content को bold और center aligned दिखाता है।
<td> (Table Data)यह टेबल की सामान्य डेटा सेल को represent करता है।


🔹 HTML Table Example Code (HTML Table का उदाहरण):


<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table with thead tbody tfoot</title>
</head>
<body>
    <h1>Advanced HTML Table Structure</h1>
    
    <table border="1" width="100%">
        <thead>
            <tr>
                <th>क्रमांक</th>
                <th>नाम</th>
                <th>आयु</th>
            </tr>
        </thead>
        
        <tbody>
            <tr>
                <td>1</td>
                <td>राहुल</td>
                <td>25</td>
            </tr>
            <tr>
                <td>2</td>
                <td>सीमा</td>
                <td>30</td>
            </tr>
            <tr>
                <td>3</td>
                <td>अमन</td>
                <td>22</td>
            </tr>
        </tbody>
        
        <tfoot>
            <tr>
                <td colspan="3" align="center">Total Students: 3</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>


🔍 HTML Table Code Explanation

  • <table border="1"> – यह पूरी table को define करता है और border="1" से इसका बॉर्डर दिखाता है।

  • <tr> – यह एक row को represent करता है, जिसमें cells होते हैं।

  • <th> – यह header cells को दर्शाता है, जैसे "क्रमांक", "नाम", "आयु"। ये cells usually bold और center aligned होती हैं।

  • <td> – यह data cells को show करता है, जैसे "1, राहुल, 25"।

  • <thead> – टेबल के header section को group करता है।

  • <tbody> – main content (डेटा rows) को contain करता है।

  • <tfoot> – footer row को दर्शाता है (जैसे summary या totals)।

  • colspan="3" – यह एक cell को तीन कॉलम में फैला देता है।

  • rowspan="2" – यह एक cell को दो rows में फैला देता है (optional use case)।


🔸 HTML Table में colspan और rowspan का Use – Extra Example

<table border="1">
    <tr>
        <th rowspan="2">क्रमांक</th>
        <th colspan="2">स्टूडेंट की जानकारी</th>
    </tr>
    <tr>
        <th>नाम</th>
        <th>आयु</th>
    </tr>
    <tr>
        <td>1</td>
        <td>राहुल</td>
        <td>25</td>
    </tr>
</table>


📌 HTML Table Styling Tips (Extra SEO Tip)

  • CSS के साथ table को responsive और attractive बनाएं

  • Use <caption> टैग to add table title

  • Add class and id attributes for CSS styling

  • Responsive बनाने के लिए media queries या overflow-x: auto यूज़ करें


✅ HTML Table कहाँ Use होता है?

  • Online Result Sheet

  • Product Comparison Table

  • Attendance या Time Table

  • Data Reports या Invoice

  • Pricing Plan Layouts