TABLE TAG IN HTML

TABLE TAG IN HTML

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

<table>
Table Data
</table>

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

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

Table of content (TOC)

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

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

Student Name	Roll No.	Total Marks
Ashok	45432	240
Monoj	46345	210
Sanjay	56232	201
Vinod	45652	235

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

तो दोस्तों आपको हमारी पोस्ट कैसी लगी! शेयरिंग बटन पोस्ट के नीचे इसे अपने दोस्तों के साथ शेयर करना न भूलें। इसके अलावा अगर बीच में कोई परेशानी हो तो कमेंट बॉक्स में पूछने में संकोच न करें। आपकी सहायता कर हमें खुशी होगी। हम इससे जुड़े और भी पोस्ट लिखते रहेंगे। तो अपने मोबाइल या कंप्यूटर पर हमारे ब्लॉग "various info: Education and Tech" को बुकमार्क (Ctrl + D) करना न भूलें और अपने ईमेल में सभी पोस्ट प्राप्त करने के लिए हमें अभी सब्सक्राइब करें। 

अगर आपको यह पोस्ट अच्छी लगी हो तो इसे अपने दोस्तों के साथ शेयर करना ना भूलें। आप इसे व्हाट्सएप, फेसबुक या ट्विटर जैसी सोशल नेटवर्किंग साइटों पर साझा करके अधिक लोगों तक पहुंचने में हमारी सहायता कर सकते हैं। शुक्रिया!