TABLE TAG IN HTML

Ashok Nayak
0

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-

TABLE TAG IN HTML


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

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

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

Output –

TABLE TAG IN HTML


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

<table border= “2”>

<td> First cell </td>

<td> Second cell </td>

<td> Third cell </td>

</table>(code-box)

Output-

TABLE TAG IN HTML


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-

TABLE TAG IN HTML


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 2nd row </td>
<td> second cell of 2nd row </td>
<td> third cell of 2nd row </td>
</tr>
</table>(code-box)

Output-

TABLE TAG IN HTML


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) करना न भूलें और अपने ईमेल में सभी पोस्ट प्राप्त करने के लिए हमें अभी सब्सक्राइब करें। 

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



Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

If you liked the information of this article, then please share your experience by commenting. This is very helpful for us and other readers. Thank you

If you liked the information of this article, then please share your experience by commenting. This is very helpful for us and other readers. Thank you

Post a Comment (0)

Our website uses cookies to enhance your experience. Learn More
Accept !

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

×