HTML Table in Hindi

जब कभी भी जानकारी को अच्छे से दिखाने की बात आती है, तो Table Format हमेशा प्रमुख भुमिका निभाता है।

अगर आपको टेबल टैग का इस्तेमाल करना नहीं आता तो आप खुद को एक अच्छा वेब डेवलपर नहीं बोल सकते।

तो इस ब्लॉग में सब <table> टैग क्या है? कैसे इस्तेमाल करते है और उसके Attributes के बारे में जानेगे।

<table> टैग क्या है?

<table> टैग का इस्तेमाल करके हम जानकारी को टेबल के फॉर्मैट(Row और Column) में दिखा सकते है।

टेबल के अंदर जानकारी Row और Column में होती हो, जिससे यूजर को समझने में आसानी रहती है।

टेबल की तेड़ी लाइन को Row और खड़ी लाइन को Column कहते है।

<table> टैग में Row को <tr> टैग और Column को <td> टैग में लिखा जाता है।

इस फॉर्मैट में रखी जानकारी सर्च इंजन जैसे बोट्स को भी अच्छे से समझ आती है, जिससे SEO(Search Engine Optimization) में भी लाभ मिलता है।

खास करके जब जानकारी बहुत ज्यादा होती है, तब टेबल से ज्यादा उपयोगी विकल्प मिलना बहुत मुश्किल है।

HTML में टेबल कैसे बनाए?

टेबल टैग के उपयोग करने के तरीके जरूर के हिसाब अलग अलग हो सकते है, क्यूंकी टेबल के सपोर्ट में दुसरे कुछ टैग्स भी होते है, जो हम इस ब्लॉग में आगे देखेंगे।

टेबल टैग के उपयोग और कैसे बनता है वो समझने के लिए हमें कुछ उदाहरण देखने पड़ेगे।

सामान्य उदाहरण:

<table>
   <tr>
        <td>1</td>
        <td>रमेश</td>
        <td>राजस्थान</td>
   </tr>
</table>

<thead>, <tbody> और <tfoot> का उदाहरण:

<table>
    <thead>
        <tr>
            <th>रोल नंबर</th>
            <th>नाम</th>
            <th>शहर</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>राकेश</td>
            <td>राजस्थान</td>
        </tr>
        <tr>
            <td>2</td>
            <td>रमेश</td>
            <td>दिल्ली</td>
        </tr>
        <tr>
            <td>3</td>
            <td>आकाश</td>
            <td>मुंबई</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>कुल 3</td>
            <td colspan="2"></td>
            <td></td>
        </tr>
    </tfoot>
</table>

<table> टैग को इस्तेमाल कैसे करे?

<table> टैग का सही और लाभदायक उपयोग करने के लिए इसके साथी टैग्स को समझना जरूरी है,

टेबल में इस्तेमाल होने वाले टैग्स की सूची,

1. <thead>
2. <th>
3. <tbody>
4. <tr>
5. <td>
6. <tfoot>

<thead>

<thead> टैग टेबल में header सेक्शन बनाने के लिए इस्तेमाल होता है, जिसमे <th> टैग Column(Header) का टाइटल ऐड करने के लिए इस्तेमाल होता है।

उदाहरण:

<table>
    <thead>
        <tr>
            <th>रोल नंबर</th>
            <th>नाम</th>
            <th>शहर</th>
        </tr>
    </thead>
</table>

<tbody>

<tbody> टैग से हम टेबल का बॉडी सेक्शन बना सकते, और हेडर फूटर को साथ में जोड़ सकते है।

इस टैग में कम से कम एक <tr> टैग तो जरूर इस्तेमाल होता है।

उदाहरण:

  <tbody>
        <tr>
            <td>1</td>
            <td>राकेश</td>
            <td>राजस्थान</td>
        </tr>
        <tr>
            <td>2</td>
            <td>रमेश</td>
            <td>दिल्ली</td>
        </tr>
        <tr>
            <td>3</td>
            <td>आकाश</td>
            <td>मुंबई</td>
        </tr>
    </tbody>

<tr>

<tr> टैग के इस्तेमाल से बॉडी में लाइन से <td> में जानकारी ऐड कर सकते है।

इस टैग में एक या एक से ज्यादा <td> या <th> टैग्स इस्तेमाल होते है।

<td>

<td> टैग बॉडी में <tr> के अंदर column की जानकारी ऐड करने के लिए इस्तेमाल होता है।

<th>

<th> टैग <thead> टैग में कॉलम के हेडर की जानकारी ऐड करने के लिए इस्तेमाल होता है।

<tfoot>

<tfoot> टैग टेबल का फूटर सेक्शन बनाने के लिए इस्तेमाल होता है।

ये <tbody> की तरह <tr> और <td> टैग्स से ही बनता है।

खास Attributes

टेबल टैग में ग्लोबल attribute तो सपोर्ट करते ही है, लेकिन साथ में इसके खुद के कुछ attributes है जिनका हमने नीचे विवरण किया है।

1. colspan
2. rowspan

colspan

colspan attribute 2 या 2 से ज्यादा टेबल सेल(बॉक्स) को एक करके जानकारी दिखाता है।

इसके attribute की वैल्यू में कॉलम का काउन्ट(संख्या) आती है।

उदाहरण:

<table>
<tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
</tr>
<tr>
    <td colspan="2" bgcolor="red">Cell 4</td>
    <td>Cell 5</td>
</tr>
</table>

rowspan

rowspan attribute टेबल की 2 या 2 से ज्यादा rows को एक करके सेल(बॉक्स) की जानकारी दिखाता है।

इसके attribute की वैल्यू में row का काउन्ट(संख्या) आती है।

उदाहरण:

<table>
<tr>
    <td rowspan="2">Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
</tr>
<tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
</tr>
</table>

टेबल टैग HTML के ग्लोबल ऐट्रिब्यूट सपोर्ट करता है।

और ज्यादा एचटीएमएल(HTML) टैग्स के बारे में जानने के लिए नीचे दिया गया ब्लॉग जरूर पढ़े,

हमें उम्मीद है की आपको हमारे ये ब्लॉग जरूर पसंद आया होगा, तो अगर आपके कुछ सवाल या सुझाव हो तो आप हमें कमेन्ट सेक्शन में बता सकते हम जरूर उत्तर देंगे, वेब डेवलपमेंट के बारें में और सीखने के लिए हमारे साथ बने रहे, धन्यवाद।