एचटीएमएल प्रोग्रामिंग टेबल का प्रयोग
Creating Tables in HTML
एचटीएमएल प्रोग्रामिंग टेबल टैग्स का प्रयोग | HTML Programming Using Table Tags
- 1 एचटीएमएल टेबल क्या हैं? | What is Table in HTML?
- 2 एचटीएमएल टेबल टैग्स का प्रयोग | Using Table Tags in HTML
- 3 एचटीएमएल टेबल में टेबल हेडिंग टैग्स का प्रयोग | Using Table Heading Tags in HTML
- 4 एचटीएमएल टेबल में बॉर्डर का प्रयोग | Using Table Border in HTML Table
- 5 एचटीएमएल टेबल में टेबल कैप्शन टैग्स का प्रयोग | Using Table Caption Tags in HTML
- 6 एचटीएमएल टेबल में कॉलम स्पैन का प्रयोग | Using colwspan in HTML Table
- 7 एचटीएमएल टेबल में रो स्पैन का प्रयोग | Using Rowspan in HTML Table
एचटीएमएल टेबल क्या हैं?
What is Table in HTML?
किसी एप्लीकेशन प्रोग्राम जैसे माइक्रोसॉफ्ट वर्ड, एक्सेल, पॉवरपॉइंट में जिस तरह टेबल में डाटा को रो एवं कॉलम में प्रदर्शित किया जाता है, उसी प्रकार एचटीएमएल में भी टेबल का प्रयोग किया जा सकता है। एचटीएमएल में किसी भी टेबल के स्ट्रक्चर में रो (row), कॉलम (column) एवं सेल्स (Cells) में डाटा को प्रयोग किया जाता है।
HTML में टेबल का प्रयोग डाटा को स्ट्रक्चर्ड फॉर्मेट में प्रस्तुत करने के लिए किया जाता है। किसी भी टेबल में टेक्स्ट, न्यूमेरिकल डाटा, इमेज आदि को प्रयोग किया जा सकता है।
एचटीएमएल टेबल टैग्स का प्रयोग
Using Table Tags in HTML
एचटीएमएल में टेबल बनाने के लिए विभिन्न टैग्स को एक साथ प्रयोग में लाया जाता है। जैसे टेबल स्टार्ट करने के लिए <Table>, टेबल रो के लिए <tr>,टेबल डाटा के लिए <td> आदि।
HTML में मुख्य रूप से निम्न टैग का प्रयोग टेबल बनाने के लिए किया जा सकता है।
➥ टेबल टैग (Table Tag) : <table> ........</table>
➥ टेबल रो (Table Row) : <tr> ........</tr>
➥ टेबल डाटा (Table Data) : <td> ........</td>
➥ टेबल हेडिंग (Table Heading) : <th> ........</th>
➥ कैप्शन (Caption) : <caption> ........</caption>
एचटीएमएल में टेबल बनाने के लिए सबसे पहले <table> टैग का प्रयोग किया जाता है। यह टैग किसी भी टेबल की शुरुआत को प्रदर्शित करता है। इस Element द्वारा HTML Table को डिफाइन किया जाता है।
एचटीएमएल में टेबल टैग <table> के बाद टेबल रो के लिए <tr> टैग का प्रयोग किया जाता है। यह किसी भी टेबल में रो (row) बनाने के लिए उपयोग किया जाता है। इस Element द्वारा टेबल की रो को डिफाइन किया जाता है। टेबल में जितनी रो बनानी हैं उतनी ही बार <tr> टैग का प्रयोग किया जाता है।
एचटीएमएल में टेबल रो टैग <tr> के बाद टेबल के कॉलम में डाटा के लिए टेबल डाटा <td> टैग का प्रयोग किया जाता है। इस टैग के बाद टेबल में प्रविष्ट किए जाने वाले डाटा को लिखा जाता है, एवं इस टैग को क्लोज़िंग टैग से बंद किया जाता है।
एचटीएमएल टेबल टैग उदाहरण:
एचटीएमएल टेबल प्रोग्राम आउटपुट :
एचटीएमएल टेबल में टेबल हेडिंग टैग्स का प्रयोग
Using Table Heading Tags in HTML
एचटीएमएल में किसी भी टेबल की rows को हेडिंग देने के लिए टेबल हेडिंग का प्रयोग किया जाता है, इसके लिए पहली टेबल रो <tr> टैग के बाद हेडिंग देने के लिए <th> टैग का प्रयोग किया जाता है। किसी भी टेबल की हेडिंग अन्य रो (row) की तुलना में बोल्ड दिखाई देती है। <th> Element द्वारा टेबल की हेडिंग को डिफाइन किया जाता है।
एचटीएमएल टेबल हेडिंग टैग का उदाहरण:
एचटीएमएल टेबल प्रोग्राम आउटपुट :
एचटीएमएल टेबल में बॉर्डर का प्रयोग
Using Table Border in HTML Table
सामान्यतः एचटीएमएल में टेबल बनाए जाने पर उसमें बॉर्डर नहीं दिखाई देता है। एचटीएमएल में टेबल में बॉर्डर के लिए टेबल टैग के साथ ही बॉर्डर एलीमेंट का प्रयोग कर बॉर्डर दिया जाता है। इसके लिए <table border="1"> टैग का प्रयोग किया जाता है। यह किसी भी टेबल में थिन (thin) बॉर्डर के लिए प्रयोग किया जाता है। बॉर्डर को अधिक मोटा करने के लिए बढ़ते क्रम में संख्याओं का प्रयोग किया जाता है।
एचटीएमएल टेबल में बॉर्डर के साथ साथ टेबल की हाइट (height) एवं विड्थ (width) को भी आवश्यकतानुसार परिवर्तित किया जा सकता है, बॉर्डर की तरह ही हाइट एवं विड्थ एलीमेंट को टेबल टैग के साथ ही प्रयोग किया जाता है। <table width="600" height="150" > का प्रयोग कर टेबल की विड्थ को 600px पिक्सेल एवं हाइट को 150 px कर सकते हैं।
एचटीएमएल टेबल बॉर्डर उदाहरण:
एचटीएमएल टेबल प्रोग्राम आउटपुट :
एचटीएमएल टेबल में टेबल कैप्शन टैग्स का प्रयोग
Using Table Caption Tags in HTML
एचटीएमएल में टेबल कैप्शन का प्रयोग टेबल को नाम देने के लिए किया जाता है। किसी भी वेब पेज पर टेबल को नाम देने के लिए टेबल टैग <table> के बाद कैप्शन <captiont> टैग का प्रयोग किया जाता है। caption एलीमेंट द्वारा टेबल के कैप्शन को डिफाइन किया जाता है।
एचटीएमएल में टेबल कैप्शन टैग <caption>Student Table </caption> का प्रयोग किया जाता है। इस टैग के बाद दिए जाने वाले कैप्शन को लिखा जाता है, एवं इस टैग को क्लोज़िंग टैग से बंद किया जाता है।
एचटीएमएल टेबल कैप्शन टैग उदाहरण:
एचटीएमएल टेबल कैप्शन टैग प्रोग्राम आउटपुट :
एचटीएमएल टेबल में कॉलम स्पैन का प्रयोग
Using colspan in HTML Table
एचटीएमएल में कॉलम स्पैन (colspan) टैग का प्रयोग कॉलम को मर्ज करने के लिए किया जाता है। किसी भी टेबल में कॉलम (column) को मर्ज करने के लिए इन टैग का प्रयोग किया जाता है।
<colspan> टैग के साथ जितनी कॉलम को मर्ज करना है, उनकी संख्या दी जा सकती है। जैसे दो कॉलम को मर्ज करने के लिए <colspan="2"> टैग का प्रयोग किया जाता है। इन टैग को टेबल हेडर, टेबल रो अथवा टेबल डाटा के साथ प्रयोग किया जा सकता है।
एचटीएमएल टेबल टैग उदाहरण:
एचटीएमएल टेबल प्रोग्राम आउटपुट :
एचटीएमएल टेबल में रो स्पैन का प्रयोग
Using Rowspan in HTML Table
एचटीएमएल में रो स्पैन (Rowspan) एवं कॉलम स्पैन (colspan) टैग का प्रयोग रो एवं कॉलम को मर्ज करने के लिए किया जाता है। किसी भी टेबल में सेल को मर्ज करने के लिए इन टैग का प्रयोग किया जाता है।
<rowspan> टैग के साथ जितनी रो को मर्ज करना है, उनकी संख्या दी जा सकती है। जैसे दो रो को मर्ज करने के लिए <rowspan="2"> टैग का प्रयोग किया जाता है। इन टैग को टेबल हेडर, टेबल रो अथवा टेबल डाटा के साथ प्रयोग किया जा सकता है।
एचटीएमएल रो स्पैन (rowspan) टैग उदाहरण:
एचटीएमएल टेबल रो स्पैन (rowspan) प्रोग्राम आउटपुट :
Computer Practical Learn to Code Yourself | How to Create Table in HTML?
Computer Hindi Notes | Web Page Design with HTML
copaguide.com
Web Page Design HTML | Practical Exercise
copaguide.com
Online MCQ Test Series | Internet & HTML
copaguide.com
Tags - What is HTML Table List Tag? Table Tag in HTML Programming. HTML Hindi Notes Using Table Tags. How to use Table Tags in HTML. HTML Table Tags Practical Example. HTML Table Tag Code. Using Table Tag - Table, TR, TD, TH, Border, Caption, Rowspan, Colspan. HTML Programming Creating Table Practical Exercise, How to Create Table in HTML. HTML Hindi Notes
HTML टेबल क्या हैं? एचटीएमएल में टेबल का कैसे प्रयोग करें? एचटीएमएल में विभिन्न टेबल टैग्स एवं उनके उपयोग। टेबल टैग प्रैक्टिकल उदाहरण सहित। एचटीएमएल टेबल टैग की जानकारी, एचटीएमएल प्रोग्रामिंग टेबल के उदाहरण सहित प्रोग्रामिंग कोड, HTML टेबल टैग का परिचय, HTML Table बनाने के लिए Use होने वाले HTML Elements, HTML टेबल टैग के प्रकार
|| Theory ||
Practicals
|| Video Tutorials
|| Online Test Series ||