HTML में टेबल रो और कॉलम कैसे बनाएं?

परिचय

HTML में टेबल रो और कॉलम बनाने के लिए, <table> टैग का उपयोग करें। एक टेबल में रो और कॉलम होते हैं, जिन्हें एक या अधिक <tr>, <th>, और <td> एलिमेंट्स का उपयोग करके सेट किया जा सकता है। एक टेबल रो को <tr> टैग द्वारा परिभाषित किया जाता है। टेबल रो और कॉलम के लिए, <tr> टैग और <td> टैग का उपयोग क्रमशः किया जाता है।

महत्वपूर्ण नोट

बहुत सारे टेबल एट्रिब्यूट्स जैसे align, bgcolor, border, cellpadding, cellspacing HTML5 द्वारा समर्थित नहीं हैं। इनका उपयोग न करें। टेबल पर बॉर्डर जोड़ने के लिए CSS प्रॉपर्टीज जोड़ने के लिए style एट्रिब्यूट का उपयोग करें। हम टेबल बॉर्डर्स को स्टाइल करने के लिए <style> टैग का भी उपयोग कर रहे हैं।

उदाहरण

<!DOCTYPE html> <html> 
    <head> 
        <style> 
            table, th, td { 
                border: 1px solid black; 
            } 
        </style> 
    </head> 
    <body> 
        <h2>टेबल्स समझना</h2> 
        <table> 
            <tr> 
                <th>हेडर: यह रो1 कॉलम1 है</th> 
                <th>हेडर: यह रो1 कॉलम2 है</th> 
            </tr> 
            <tr> 
                <td>यह रो2 कॉलम1 है</td> 
                <td>यह रो2 कॉलम2 है</td> 
            </tr> 
        </table> 
    </body> 
</html>

आउटपुट

टेबल स्ट्रक्चर समझाया गया

<table>
    <caption>टेबल कैप्शन (वैकल्पिक)</caption>
    <thead>
        <tr>
            <th scope="col">कॉलम 1 हेडर</th>
            <th scope="col">कॉलम 2 हेडर</th>
            <th scope="col">कॉलम 3 हेडर</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>डेटा 1-1</td>
            <td>डेटा 1-2</td>
            <td>डेटा 1-3</td>
        </tr>
        <tr>
            <td>डेटा 2-1</td>
            <td>डेटा 2-2</td>
            <td>डेटा 2-3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>कुल</td>
            <td>100</td>
            <td>200</td>
        </tr>
    </tfoot>
</table>

मुख्य टेबल एलिमेंट्स

महत्वपूर्ण एट्रिब्यूट्स

उन्नत उदाहरण: Colspan और Rowspan

<table>
    <caption>साप्ताहिक शेड्यूल</caption>
    <thead>
        <tr>
            <th scope="col">समय</th>
            <th scope="col">सोमवार</th>
            <th scope="col">मंगलवार</th>
            <th scope="col">बुधवार</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">9:00-10:00</th>
            <td colspan="2">गणित (2 घंटे)</td>
            <td>विज्ञान</td>
        </tr>
        <tr>
            <th scope="row">10:00-11:00</th>
            <td>अंग्रेजी</td>
            <td rowspan="2">लैब (2 घंटे)</td>
            <td>इतिहास</td>
        </tr>
        <tr>
            <th scope="row">11:00-12:00</th>
            <td>हिंदी</td>
            <td>भूगोल</td>
        </tr>
    </tbody>
</table>

CSS स्टाइलिंग (आधुनिक)

<style>
    table {
        width: 100%;
        border-collapse: collapse; /* बॉर्डर्स मिलाएं */
        font-family: system-ui, sans-serif;
    }
    
    th, td {
        border: 1px solid #dee2e6;
        padding: 12px 16px;
        text-align: left;
    }
    
    thead th {
        background: #f8f9fa;
        font-weight: 600;
        position: sticky;
        top: 0;
        z-index: 1;
    }
    
    tbody tr:nth-child(even) {
        background: #f8f9fa;
    }
    
    tbody tr:hover {
        background: #e9ecef;
    }
    
    caption {
        caption-side: bottom;
        padding: 10px;
        font-style: italic;
        color: #6c757d;
    }
    
    /* रिस्पॉन्सिव: हॉरिजॉन्टल स्क्रॉल */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
</style>

सर्वोत्तम अभ्यास

1. सिमेंटिक स्ट्रक्चर उपयोग करें - thead, tbody, tfoot, caption
2. scope एट्रिब्यूट जोड़ें - scope="col" या scope="row"
3. लेआउट के लिए टेबल्स उपयोग न करें - केवल टेबुलर डेटा के लिए
4. रिस्पॉन्सिव बनाएं - overflow-x: auto कंटेनर के साथ
5. बड़े टेबल्स के लिए स्टिकी हेडर - position: sticky; top: 0
6. जेबरा स्ट्रिपिंग - वैकल्पिक रो रंग

डिप्रिकेटेड एट्रिब्यूट्स (उपयोग न करें)

<!-- ये HTML5 में काम नहीं करते -->
<table border="1" cellpadding="5" cellspacing="0" align="center" bgcolor="#f0f0f0">
<tr bgcolor="#fff">
<td align="center" valign="middle">