HTML प्रेक्टिकल - टेबल का प्रयोग कैसे करें?
HTML Practical - How to Create Table?
वेब डिजाईन विद एचटीएमएल प्रेक्टिकल | टेबल टैग्स का प्रयोग
Web Design with HTML Practical - Using Table Tags
Objective : एचटीएमएल टेबल (Table) टैग्स का प्रयोग
वेब डिजाईन एचटीएमएल प्रोग्रामिंग के प्रेक्टिकल प्रायोगिक कार्य के द्वारा एचटीएमएल में टेबल का प्रयोग कैसे करें सीखेंगे:
एचटीएमएल में टेबल बनाने के लिए विभिन्न टैग्स को एक साथ प्रयोग में लाया जाता है। जैसे टेबल स्टार्ट करने के लिए <Table>, टेबल रो के लिए <tr>,टेबल डाटा के लिए <td> आदि।
HTML में मुख्य रूप से निम्न टैग का प्रयोग टेबल बनाने के लिए किया जा सकता है।
➥ टेबल टैग (Table Tag) : <table> ........</table>
➥ टेबल रो (Table Row) : <tr> ........</tr>
➥ टेबल डाटा (Table Data) : <td> ........</td>
➥ टेबल हेडिंग (Table Heading) : <th> ........</th>
➥ कैप्शन (Caption) : <caption> ........</caption>
Requirements : (Tools / Equipments / Instruments)
पर्सनल कंप्यूटर / माइक्रोसॉफ्ट विंडोज / नोटपैड / वेब ब्राउज़र
एचटीएमएल ऑर्डर लिस्ट का प्रयोग | Using Ordered List in HTML
HTML में टेबल लिस्ट का प्रयोग करने के लिए निम्नानुसार स्टेप्स प्रयोग कीजिए।
विंडोज के नोटेपेड प्रोग्राम को ओपन कीजिए
START > ALL PROGRAMS > ACCESSORIES > NOTEPAD
नोटपैड में निम्नानुसार कोड टाइप कीजिए।
फाइल को सेव कीजिए। HTML File को सेव करने के लिए की-बोर्ड से Ctrl + S दबाएं। SaveAs डायलॉग बॉक्स में फाईल के नाम के साथ एक्सटेंशन के रूप में HTML अवश्य लिखें. जैसे table.html और Save as type : आप्शन पर निम्नानुसार All Files सेलेक्ट कर Save बटन पर क्लिक कीजिए।
फाईल को खोलने के लिए माऊस से डबल क्लिक कीजिए। आपकी फाईल आपके डिफ़ॉल्ट ब्राउज़र में ओपन हो जाएगी। यह इस प्रकार दिखाई देगी।
एचटीएमएल ऑनलाइन प्रेक्टिस – टेबल टैग का प्रयोग
Online HTML Practice - Using Table Tag in HTML
HTML प्रोग्राम की ऑनलाइन प्रैक्टिस नीचे दिए गए कोड विंडो में एचटीएमएल टेबल टैग का प्रोग्राम कोड लिख कर टेबल बना सकते हैं। प्रोग्राम कोड का आउटपुट, रिजल्ट विंडो में प्रदर्शित होगा।
See the Pen Creating Table HTML Code by ITI COPA (@copaguide) on CodePen.
एचटीएमएल प्रैक्टिकल - टेबल में टेबल हेडिंग टैग्स का प्रयोग
Using Table Heading Tags in HTML Tables
एचटीएमएल में किसी भी टेबल की फर्स्ट रो (row) को हेडिंग देने के लिए टेबल हेडिंग का प्रयोग किया जाता है, इसके लिए पहली टेबल रो <tr> टैग के बाद हेडिंग देने के लिए <th> टैग का प्रयोग किया जाता है। किसी भी टेबल की हेडिंग अन्य रो (row) की तुलना में बोल्ड दिखाई देती है। <th> Element द्वारा टेबल की हेडिंग को डिफाइन किया जाता है।
HTML प्रोग्राम की ऑनलाइन प्रैक्टिस नीचे दिए गए कोड विंडो में एचटीएमएल टेबल की पहली रो को हेडिंग देकर टेबल हेडिंग का प्रयोग कर सकते हैं। प्रोग्राम कोड का आउटपुट, रिजल्ट विंडो में प्रदर्शित होगा।
See the Pen Table with Heading by ITI COPA (@copaguide) on CodePen.
एचटीएमएल टेबल में बॉर्डर एवं कैप्शन का प्रयोग
Using Table Border and Caption in HTML Table
सामान्यतः एचटीएमएल में टेबल बनाए जाने पर उसमें बॉर्डर नहीं दिखाई देता है। एचटीएमएल में टेबल में बॉर्डर के लिए टेबल टैग के साथ ही बॉर्डर एलीमेंट का प्रयोग कर बॉर्डर दिया जाता है। इसके लिए <table border="1"> टैग का प्रयोग किया जाता है।
एचटीएमएल टेबल में बॉर्डर के साथ साथ टेबल की हाइट (height) एवं विड्थ (width) को भी आवश्यकतानुसार परिवर्तित किया जा सकता है, <table width="600" height="150" > का प्रयोग कर टेबल की विड्थ को 600px पिक्सेल एवं हाइट को 150 px कर सकते हैं।
एचटीएमएल में टेबल कैप्शन टैग <caption>Student Table </caption> का प्रयोग किया जाता है। इस टैग के बाद दिए जाने वाले कैप्शन को लिखा जाता है, एवं इस टैग को क्लोज़िंग टैग से बंद किया जाता है।
HTML प्रोग्राम की ऑनलाइन प्रैक्टिस के लिए कोड विंडो में एचटीएमएल टेबल बॉर्डर, हाइट एवं विड्थ तथा कैप्शन का प्रयोग करके देखें। प्रोग्राम कोड का आउटपुट, रिजल्ट विंडो में प्रदर्शित होगा।
See the Pen Table Border HTML Code by ITI COPA (@copaguide) on CodePen.
➥ एचटीएमएल टेबल बॉर्डर के लिए विभिन्न ऑप्शन जैसे <table border="2", <table border="3" एवं <table border="4" का प्रयोग कर आउटपुट रिजल्ट विंडो में देखें।
➥ एचटीएमएल में टेबल की हाइट (height) एवं विड्थ (width) को अलग अलग साइज़ में बदल कर जैसे <table width="400" height="200"> आउटपुट रिजल्ट विंडो में देखें।
एचटीएमएल टेबल में कॉलम स्पैन का प्रयोग
Using colspan in HTML Table
एचटीएमएल में कॉलम स्पैन (colspan) टैग का प्रयोग कॉलम को मर्ज करने के लिए किया जाता है। किसी भी टेबल में कॉलम (column) को मर्ज करने के लिए इन टैग का प्रयोग किया जाता है। <colspan> टैग के साथ जितनी कॉलम को मर्ज करना है, उनकी संख्या दी जा सकती है। जैसे दो कॉलम को मर्ज करने के लिए <colspan="2"> टैग का प्रयोग किया जाता है। इन टैग को टेबल हेडर, टेबल रो अथवा टेबल डाटा के साथ प्रयोग किया जा सकता है।
See the Pen Using Column Span in Table HTML Code by ITI COPA (@copaguide) on CodePen.
एचटीएमएल टेबल में रो स्पैन का प्रयोग
Using Rowspan in HTML Table
एचटीएमएल में रो स्पैन (Rowspan) एवं कॉलम स्पैन (colspan) टैग का प्रयोग रो एवं कॉलम को मर्ज करने के लिए किया जाता है। किसी भी टेबल में सेल को मर्ज करने के लिए इन टैग का प्रयोग किया जाता है। <rowspan> टैग के साथ जितनी रो को मर्ज करना है, उनकी संख्या दी जा सकती है। जैसे दो रो को मर्ज करने के लिए <rowspan="2"> टैग का प्रयोग किया जाता है। इन टैग को टेबल हेडर, टेबल रो अथवा टेबल डाटा के साथ प्रयोग किया जा सकता है।
See the Pen Using Row Span HTML Code by ITI COPA (@copaguide) on CodePen.
Computer Hindi Notes | 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
