Home Language HTML HTML tables in hindi

HTML tables in hindi

0
57
HTML table in hindi

Introduction of HTML tables in hindi

डेटा के व्यवस्थित करने के लिए आप वेब मानकों का उपयोग कैसे करते हैं? अपने सभी डेटा को अच्छी छोटी पंक्तियों और बक्सों में लाने के लिए टन नेस्टेड तत्वों का उपयोग करने का विचार आपके दिमाग को पैनिक मोड में डाल सकता है, लेकिन एक समाधान है – बचाव के लिए HTML टेबल!

वेब डिज़ाइन में, Tables डेटा को सारणीबद्ध रूप में व्यवस्थित करने का एक अच्छा तरीका हैं। आप उन्हें हर समय वेबसाइटों पर देखते हैं, चाहे वे राजनीतिक चुनाव परिणामों का सारांश या तुलना दे रहे हों, खेल के आँकड़े, मूल्य तुलना, आकार चार्ट, या अन्य डेटा।

इंटरनेट के युग में, HTML प्रस्तुति को संरचना से अलग करने की एक विधि के रूप में CSS को लोकप्रिय बनाने से पहले, वेब पेजों को बाहर करने के लिए तालिकाओं का उपयोग किया जाता था – कॉलम, बॉक्स और सामान्य क्षेत्रों को बनाने के लिए जिसमें पेज को व्यवस्थित किया जाता है। सामग्री। यह, निश्चित रूप से, इसके बारे में जाने का गलत तरीका है; पेज लेआउट के लिए टेबल का उपयोग करने से फूला हुआ, गन्दा पेज होता है जिसमें टन नेस्टेड टेबल होते हैं जो बड़े फ़ाइल आकार का उत्पादन करते हैं, शुरू में कोड करना मुश्किल होता है, और बाद में बनाए रखना लगभग असंभव होता है। आज, आपको केवल सारणीबद्ध डेटा प्रस्तुत करने के लिए तालिकाओं का उपयोग करना चाहिए, और पृष्ठ लेआउट को नियंत्रित करने के लिए CSS का उपयोग करना चाहिए।

सूचना डिजाइन के दृष्टिकोण से, टेबल हमेशा दो में से एक कार्य करते हैं: वे या तो संगठित डेटा की संरचना को दर्शाते हैं, या वे असंगठित डेटा को संरचना प्रदान करते हैं। यदि कोई HTML तालिका उन कार्यों में से एक नहीं करती है, तो संभवतः वह Table नहीं होनी चाहिए।

सबसे Basic Table

आइए मूल तालिका को प्रस्तुत करने के लिए आवश्यक सिमेंटिक HTML कोड से शुरू करें। यह उदाहरण उत्तरी अमेरिका के प्रशांत क्षेत्र में हाल के ज्वालामुखी विस्फोटों की तुलना करता है:

<table>
    <tr>
        <td>Employee Name</td>
        <td>Designation</td>
        <td>Department</td>
        <td>Salary</td>
    </tr>
    <tr>
        <td>Mr. Amay</td>
        <td>Software Developer</td>
        <td>IT</td>
        <td>54000</td>
    </tr>
    <tr>
        <td>Mr. Arnav</td>
        <td>Sr. Graphic Designer</td>
        <td>ITs</td>
        <td>57000</td>
    </tr>
    <tr>
        <td>Mr. Sachin</td>
        <td>Sr.Accountant</td>
        <td>Accounting</td>
        <td>43000</td>
    </tr>
</table>

आइए उपरोक्त कोड में उपयोग किए गए HTML मार्कअप को तोड़कर शुरू करें:

<table> आवरण तत्व ब्राउज़र को बताता है कि सामग्री एक तालिका है
 <tr> तत्व एक तालिका पंक्ति स्थापित करता है। यह ब्राउज़र को  और  टैग के बीच किसी भी सामग्री को क्षैतिज रूप से व्यवस्थित करने की अनुमति देता है; यानी पंक्तियों में।
 <td>तत्व पंक्ति के भीतर सामग्री के लिए तालिका डेटा सेल या प्रत्येक व्यक्ति "बॉक्स" को परिभाषित करता है। वास्तविक डेटा के लिए केवल उतने ही  तालिका कक्षों का उपयोग करें, जितने की आवश्यकता है। रिक्त स्थान या पैडिंग के लिए खाली  कक्षों का उपयोग न करें - इसके बजाय CSS का उपयोग करें। यह न केवल प्रस्तुति को संरचना से अलग करने का एक अच्छा तरीका है, बल्कि HTML को साफ और सरल रखने से स्क्रीन रीडर का उपयोग करने वाले दृष्टिबाधित लोगों के लिए तालिका को समझना आसान हो जाता है।

ध्यान दें कि Demoकोड में कोई “टेबल कॉलम” () तत्व नहीं है; वास्तव में, HTML में ऐसा कोई तत्व नहीं है। कॉलम एक तार्किक निर्माण है, भौतिक नहीं। हम स्तंभों को एक उचित रूप से निर्मित Table में देखते हैं, लेकिन वे वास्तव में कोडित नहीं हैं, वे केवल डेटा कोशिकाओं के संरेखण द्वारा निहित हैं।

Table Elements को निम्नानुसार नेस्ट किया जाना चाहिए:

<table>
    <tr>
        <td>content</td>
        <td>content</td>
        <td>content</td>
    </tr>
</table>

उन्हें किसी अन्य तरीके से ऑर्डर करने के लिए ब्राउज़र इंटरनेट हेयर बॉल के बराबर थूक देगा और तालिका को अजीब तरह से प्रस्तुत करेगा, यदि बिल्कुल भी।

कुछ और सुविधाएँ जोड़ना

अब जबकि मूल तालिका जगह पर है, हम कुछ अधिक जटिल तालिका सुविधाएँ जोड़ सकते हैं। सबसे पहले, हम डेटा को बेहतर बनाने में मदद करने के लिए एक कैप्शन और टेबल हेडर जोड़ेंगे, दोनों शब्दार्थ और स्क्रीन पाठकों के लिए सुपाठ्यता के संदर्भ में। अद्यतन तालिका मार्कअप इस तरह दिखता है:

यहां उपयोग किए गए नए तत्व हैं:

<caption>: तत्व आपको टेबल डेटा को एक कैप्शन देने की अनुमति देता है। अधिकांश ब्राउज़र कैप्शन को केंद्र में रखेंगे और इसे डिफ़ॉल्ट रूप से तालिका के समान चौड़ाई में प्रस्तुत करेंगे।
<th></th>: तत्व सामग्री को प्रत्येक तालिका अनुभाग के लिए तालिका शीर्षकों के रूप में परिभाषित करता है, जो एक स्तंभ, एक पंक्ति या कक्षों का समूह हो सकता है। यह न केवल सामग्री के कार्य का शब्दार्थ रूप से वर्णन करने में मदद करने के लिए उपयोगी है, बल्कि यह विभिन्न ब्राउज़रों और उपकरणों में इसे अधिक सटीक रूप से प्रस्तुत करने में भी मदद करता है। तत्व का उपयोग की तरह एक पंक्ति में किया जाता है, और ब्राउज़र आमतौर पर इसकी सामग्री को बोल्ड और डेटा सेल में केंद्रित करते हैं।

Table को और अधिक संरचित करना

अपनी तालिका की संरचना में अंतिम चरण के रूप में, हम तालिका शीर्षलेख और तालिका के मुख्य भाग को परिभाषित करेंगे, एक पाद लेख जोड़ेंगे, और पंक्ति और स्तंभ शीर्षकों के दायरे को परिभाषित करेंगे। हम तालिका सामग्री का वर्णन करने के लिए एक सारांश विशेषता भी जोड़ेंगे। अंतिम मार्कअप इस तरह दिखता है:

<table summary="a summary of Employee Salary">
    <caption>Employee Salary</caption>
    <thead>
        <tr>
            <th scope="col">Employee Name</th>
            <th scope="col">Designation</th>
            <th scope="col">Department</th>
            <th scope="col">Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="4">Salary on 2020</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th scope="row">Mr. Amay</th>
            <td>Software Developerr</td>
            <td>IT</td>
            <td>54000</td>
        </tr>
        <tr>
            <th scope="row">Mr. Arnav</th>
            <td>Sr. Graphic Designer</td>
            <td>IT</td>
            <td>57000</td>
        </tr>
        <tr>
            <th scope="row">Mr. Sachin</th>
            <td>Ar. Accountant</td>
            <td>Accountancy</td>
            <td>43000</td>
        </tr>
    </tbody>
</table>

नए तत्व और गुण इस प्रकार हैं:
<thead><tbody> and <tfoot>: ये क्रमशः टेबल के हेडर, बॉडी और फुटर को परिभाषित करते हैं। जब तक आप कई कॉलम और डेटा की पंक्तियों के साथ वास्तव में जटिल तालिका को कोडिंग नहीं कर रहे हैं, इनका उपयोग करना अधिक हो सकता है। हालांकि, एक जटिल तालिका में, वे डेवलपर्स के लिए और ब्राउज़र और अन्य उपकरणों के लिए भी उपयोगी संरचना जोड़ सकते हैं।
colspan और Rowpan विशेषताएँ: colspan विशेषता एक तालिका सेल बनाती है जो एक से अधिक कॉलम तक फैली होती है। यहां, हम चाहते थे कि फ़ुटर टेबल सेल टेबल की पूरी चौड़ाई में फैले, इसलिए हमने इसे एक पंक्ति में चार कॉलम फैलाने के लिए कहा। वैकल्पिक रूप से, आप एक टेबल सेल रोस्पैन एट्रिब्यूट जोड़ सकते हैं जो टेबल सेल को कॉलम के नीचे कई पंक्तियों को फैलाने की अनुमति देगा, उदाहरण के लिए ।

Summary Attribute:

इस विशेषता का उपयोग तालिका सामग्री के सारांश को परिभाषित करने के लिए किया जाता है, मुख्य रूप से स्क्रीनरीडर द्वारा उपयोग के लिए (आप इसे ऊपर दी गई तालिका के प्रस्तुत संस्करण में नहीं देखेंगे)। ध्यान दें कि पुराने W3C अनुशंसाओं, WCAG 1.0 और HTML 4.0 में, आप ऊपर दिए गए विवरण के अनुसार सारांश विशेषता का उपयोग कर सकते हैं। विनिर्देशों के नए मसौदे में, हालांकि, सारांश विशेषता का उल्लेख नहीं किया गया है। क्या अभी भी सारांश विशेषता का उपयोग करना अनिश्चित लगता है, इसलिए अभी के लिए मान लें कि इसका उपयोग करना अभी भी सुरक्षित है। आखिरकार, यह कुछ भी टूटने का कारण नहीं बनता है, और यह अभिगम्यता लाभ प्रदान करता है।
स्कोप विशेषता: आपने वें टैग में स्कोप विशेषताओं पर भी ध्यान दिया होगा, और यह तथ्य कि हमने ज्वालामुखी के नामों को डेटा पंक्तियों के अंदर भी शीर्षकों के रूप में परिभाषित किया है! स्कोप विशेषता का उपयोग वें तत्व में स्क्रीन पाठकों को यह बताने के लिए किया जा सकता है कि वें सामग्री एक कॉलम या एक पंक्ति का शीर्षक है।

निष्कर्ष

इस लेख में हमने मूल HTML डेटा टेबल बनाने के लिए आपको जो कुछ जानने की आवश्यकता है उसे प्रस्तुत किया है। आइए इस लेख को कुछ प्रासंगिक विचारों के साथ छोड़ दें:

यह महत्वपूर्ण है कि विभिन्न प्रकार के वेब ब्राउज़र, मोबाइल, सुलभ, और अन्य उपकरणों द्वारा पठनीय होने के लिए तालिकाओं को सही ढंग से कोडित किया गया है। तालिका HTML को न्यूनतम रखा जाता है, और आपको तालिकाओं को स्टाइल करने के लिए CSS का उपयोग करना चाहिए।
टेबल को मोबाइल उपकरणों और उपयोगकर्ताओं के लिए सुलभ बनाया जा सकता है जो कोड को साफ रखते हुए स्क्रीन रीडिंग सॉफ़्टवेयर का उपयोग करते हैं, जैसे कि स्कोप और सारांश के साथ-साथ तत्व का उपयोग करके स्पष्ट रूप से और अर्थपूर्ण रूप से यह घोषणा करने में सहायता के लिए कि अनुभाग क्या हैं। अभिगम्यता के लिए यह भी महत्वपूर्ण है कि रिक्ति के लिए रिक्त तालिका कक्षों का उपयोग न किया जाए; इसके बजाय सीएसएस का प्रयोग करें।

NO COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here