HTML टेबल जनरेटर

एक अच्छी HTML तालिका किससे बनती है

HTML तालिकाएँ सचमुच सारणीबद्ध डेटा प्रस्तुत करने के लिए होती हैं, ऐसी पंक्तियाँ और स्तंभ जहाँ किसी मान की स्थिति कोई अर्थ ढोती है, जैसे कोई मूल्य मैट्रिक्स, कोई समय-सारणी, या कोई तुलना चार्ट। एक सही तालिका कोशिकाओं के ग्रिड से ज़्यादा होती है; यह एलिमेंटों के एक छोटे परिवार से बनी होती है जो भूमिकाएँ बताते हैं: table सब कुछ लपेटता है, thead और tbody हेडर को बॉडी से अलग करते हैं, th एक शीर्षक कोशिका को चिह्नित करता है, और td एक डेटा कोशिका रखता है। यह जनरेटर आपके लिए वह पूरी संरचना निकालता है ताकि आउटपुट साफ़ और मानक-अनुरूप हो।

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

अपना डेटा डालने के दो तरीक़े

आप Grid Editor में किसी तालिका को इंटरैक्टिव ढंग से बना सकते हैं, पंक्तियाँ और स्तंभ जोड़ते और हटाते हुए और सीधे हर कोशिका में टाइप करते हुए, जो छोटी तालिकाओं या तेज़ संपादनों के लिए आदर्श है। किसी ऐसी चीज़ के लिए जो पहले से किसी स्प्रेडशीट में रहती है, CSV Import टैब ज़्यादा तेज़ है: अपना डेटा पेस्ट करें और वह एक ही क़दम में ग्रिड में पार्स हो जाता है।

इम्पोर्टर विभाजकों को लेकर लचीला है। यह कॉमा, टैब, सेमीकॉलन और पाइप से अलग किया टेक्स्ट स्वीकार करता है, इसलिए सीधे Excel या Google Sheets (जो टैब इस्तेमाल करता है) से की गई कोई कॉपी और कोई डाउनलोड की गई CSV (जो कॉमा इस्तेमाल करती है) दोनों काम करते हैं। जब आपकी ऊपरी पंक्ति में स्तंभ शीर्षक हों तो First row is header चिह्नित करें, और वे मान सामान्य डेटा के बजाय thead में th कोशिकाएँ बन जाते हैं।

एक हल किया हुआ उदाहरण

CSV Import में तीन पंक्तियाँ पेस्ट करें, पहली को हेडर के रूप में चिह्नित करते हुए: पहली पंक्ति पर Name, Email, Phone, फिर संपर्कों की दो पंक्तियाँ। टूल एक ऐसी तालिका बनाता है जिसके thead में तीन th कोशिकाओं की एक अकेली पंक्ति होती है और जिसके tbody में td कोशिकाओं की दो tr पंक्तियाँ होती हैं। Bordered और Striped Rows चालू करें और मार्कअप को वे क्लास और स्टाइल मिल जाते हैं जो कोशिका की सीमाएँ और बारी-बारी की पंक्ति छायांकन खींचते हैं, इसलिए कोड कॉपी करने से पहले ही पूर्वावलोकन बिलकुल वैसा ही दिखता है जैसा आपके पेज पर आएगा।

दृश्य स्टाइलिंग विकल्प

Basic Options वह स्टाइलिंग शामिल करते हैं जिसकी ओर आप सबसे ज़्यादा हाथ बढ़ाते हैं। Bordered कोशिकाओं के इर्द-गिर्द रेखाएँ खींचता है, Striped Rows बारी-बारी की पंक्तियों को छायांकित करता है ताकि लंबी तालिकाएँ देखने में आसान हों, और Hover Effect कर्सर के नीचे वाली पंक्ति को उभार देता है, जो पाठकों को चौड़ी पंक्तियों के आर-पार नज़र रखने में मदद करता है। हर विकल्प पूर्वावलोकन में सीधे झलकता है।

ज़्यादा बारीक़ नियंत्रण के लिए, Advanced Options कोशिका पैडिंग और अंतर, सीमा की चौड़ाई और रंग, और border-collapse मोड को उजागर करते हैं, जो तय करता है कि आस-पास की कोशिका सीमाएँ एकल रेखाओं में मिल जाएँ (collapse) या अलग दोहरी रेखाओं के रूप में रहें (separate)। आप एक कस्टम ID और क्लास भी जोड़ सकते हैं ताकि तालिका सिर्फ़ इनलाइन स्टाइल पर निर्भर रहने के बजाय आपकी मौजूदा स्टाइलशीट से जुड़ जाए।

सुगम्यता के लिए कैप्शन और हेडर स्कोप

एक कैप्शन तालिका को एक दिखता, प्रोग्रामेटिक रूप से जुड़ा हुआ शीर्षक देता है, और आप इसे ऊपर या नीचे रख सकते हैं। यह किसी तालिका को नाम देने का सुगम्य तरीक़ा है, किसी पास के अनुच्छेद से कहीं बेहतर, क्योंकि स्क्रीन रीडर इसे तालिका के लेबल के रूप में बोलते हैं।

Header Scope विकल्प यहाँ का सबसे अहम अकेला सुगम्यता सेटिंग है। हेडर कोशिकाओं पर scope को col पर सेट करना सहायक तकनीक को बता देता है कि हर th अपने नीचे के स्तंभ को लेबल करता है; इसे row पर सेट करना अपने बग़ल की पंक्ति को लेबल करता है; और संयुक्त विकल्प उन तालिकाओं को संभालता है जिनमें एक हेडर पंक्ति और एक हेडर स्तंभ दोनों हों। scope सही सेट होने पर, जब कोई उपयोगकर्ता कोशिका-दर-कोशिका बढ़ता है तो एक स्क्रीन रीडर संबंधित हेडर बोल सकता है, इसलिए कोई मान किसी नंगी, संदर्भहीन संख्या के बजाय Phone: 555-1234 के रूप में पढ़ा जाता है।

रेस्पॉन्सिव वाली चेतावनी

तालिकाएँ स्वाभाविक रूप से चौड़ी होती हैं, और कई स्तंभों वाली कोई तालिका फ़ोन की स्क्रीन से बाहर बह जाएगी। Responsive Table विकल्प इसका समाधान तालिका को लपेटकर करता है ताकि वह पेज लेआउट तोड़ने के बजाय अपने कंटेनर के भीतर क्षैतिज रूप से स्क्रॉल हो, जो हर स्तंभ को साबुत और पहुँच में रखता है। छोटी स्क्रीनों पर डेटा तालिकाओं के लिए यह सुरक्षित डिफ़ॉल्ट है।

अदला-बदली को समझना सार्थक है: क्षैतिज स्क्रॉलिंग डेटा को ईमानदारी से बनाए रखती है पर पाठक से स्क्रॉल करने को कहती है। किसी सच्ची डेटा तालिका को पंक्ति-और-स्तंभ के रिश्ते खोए बिना एक अकेले संकरे स्तंभ में फिर से बहाने का कोई तरीक़ा नहीं है, इसलिए सचमुच सारणीबद्ध सामग्री के लिए, स्क्रॉलिंग किसी जुगाड़ के बजाय ईमानदार समाधान है।

बचने लायक़ आम ग़लतियाँ

सबसे बार-बार होने वाला दुरुपयोग डेटा प्रस्तुत करने के बजाय पेज लेआउट को नियंत्रित करने के लिए किसी तालिका की ओर हाथ बढ़ाना है; flexbox और grid जैसा आधुनिक CSS लेआउट के लिए सही औज़ार है, और तालिकाओं को सारणीबद्ध सामग्री के लिए ही रखा जाना चाहिए। एक और आम चूक हेडर कोशिकाओं को पूरी तरह छोड़ देना है, जो स्क्रीन रीडर उपयोगकर्ताओं को स्तंभ संदर्भ के बिना छोड़ देता है, इसलिए जब आपकी पहली पंक्ति में शीर्षक हों तो उसे हमेशा हेडर तक पदोन्नत करें। आख़िर में, जब कोई क्लास ज़्यादा साफ़ और रखरखाव में आसान हो, तो स्टाइलिंग को लंबे इनलाइन style एट्रिब्यूट में न दफ़नाएँ; तालिका को किसी स्टाइलशीट से जोड़ने के लिए ID और क्लास फ़ील्ड का इस्तेमाल करें।