TABLE TAG IN HTML

TABLE TAG IN HTML

टेबल टैग का उपयोग एचटीएमएल में टेबल बनाने के लिए किया जाता है। तालिका के एक तत्व का सामान्य रूप इस प्रकार है-

<table>
Table Data
</table>

इससे स्पष्ट है कि तालिका निर्माण <table> टैग से प्रारंभ होता है और </table> टैग से समाप्त होता है। तालिका के डेटा को इन दोनों के बीच परिभाषित किया गया है। इस डेटा में तालिका का नाम, प्रत्येक पंक्ति के प्रत्येक सेल की परिभाषा आदि शामिल हैं। उन्हें परिभाषित करने के लिए विभिन्न टैग का उपयोग किया जाता है।

टेबल टैग में कई विशेषताएं हो सकती हैं, जैसे कि चौड़ाई, बॉर्डर, सेलपैडिंग, सेलस्पेसिंग, बीजीकलर आदि।

Learn HTML in Hindi Table Tag by Video Tutorial

यदि आप जानना चाहते हैं कि टेबल टैग का उपयोग कैसे किया जाता है तो कृपया नीचे दिए गए वीडियो को अवश्य देखें

1. td tag (Table data tag)

टेबल में सेल को परिभाषित करने के लिए <td> टैग का उपयोग किया जाता है। इसका फुल फॉर्म है- टेबल डेटा इस टैग में, सेल की सामग्री को उसकी विभिन्न विशेषताओं के साथ दिया जाता है। <td> टैग को जितनी बार चाहें उपयोग किया जा सकता है।

उदाहरण के लिए, यदि हम केवल एक सेल के साथ एक टेबल बनाना चाहते हैं, तो हम इसे इस प्रकार बना सकते हैं-

<table>
<td> one cell table </td>
</table>(code-box)

Output-

2. Border एट्रीव्यूट –

उपरोक्त उदाहरण तालिका में किसी भी सीमा का उपयोग नहीं किया जा सकता है। अगर हम बॉर्डर भी दिखाना चाहते हैं, तो हमें <table> टैग के साथ बॉर्डर एट्रिब्यूट का उपयोग करना होगा। इसका सामान्य रूप इस प्रकार है-

<table border= “1”>
<td> one cell table </td>
</table>(code-box)

Output –

इस तालिका में निम्नानुसार एक से अधिक सेल जोड़े जा सकते हैं।

<table border= “2”>

<td> First cell </td>

<td> Second cell </td>

<td> Third cell </td>

</table>(code-box)

Output-

3. Width एट्रीव्यूट-

उपरोक्त उदाहरण में तालिका के लिए कोई चौड़ाई नहीं दी गई है। जब चौड़ाई नहीं दी जाती है, तो इसकी चौड़ाई एक पंक्ति में सभी कोशिकाओं की चौड़ाई के योग के बराबर होती है। हम चाहें तो Width विशेषता के आधार पर टेबल की चौड़ाई दे सकते हैं. इसका सामान्य रूप इस प्रकार है-

<table border= “2” width=”500″ >

<td> first cell table </td>

<td> second cell </td>

<td> third cell </td>

</table>(code-box)

Output-

4. Tr Tag (Table row)

अब तक के सभी उदाहरणों में केवल एक पंक्ति है। यदि हम तालिका में एक से अधिक पंक्तियाँ देना चाहते हैं, तो इसका

इसके लिए <tr> टैग का प्रयोग किया जाता है। Tr का फुल फॉर्म टेबल रो होता है।

उदाहरण के लिए, हम निम्न प्रकार से दो पंक्तियों वाली एक तालिका बना सकते हैं।

<table border= “2” width=”500″ >
<tr>
<td> first cell </td>
<td> second cell </td>
<td> third cell </td>
</tr>
<tr>
<td> first cell of 2^nd row </td>
<td> second cell of 2^nd row </td>
<td> third cell of 2^nd row </td>
</tr>
</table>(code-box)

Output-

Example of Student Record in HTML

अब हम एक उदाहरण लेंगे जिसमें हम एक टेबल बनाएंगे, इस टेबल में हम छात्र का रिकॉर्ड रखेंगे

HTML Coding

<table border="1" cellpadding="1">
<tr>
<th> Student Name </th>
<th> Roll No. </th>
<th> Total Marks </th>
</tr>
<tr>
<td> Ashok </td>
<td> 45432 </td>
<td> 240 </td>
</tr>

<tr>
<td> Manoj</td>
<td> 46345 </td>
<td> 210 </td>
</tr>

<tr>
<td> Sanjay </td>
<td> 56232 </td>
<td> 201 </td>
</tr>

<tr>
<td> Vinod </td>
<td> 2345652 </td>
<td> 235 </td>
</tr>
</table>(code-box)

Final Words