सुलभ HTML तालिका जनरेटर: कैप्शन सहित CSV से HTML | We.Inc
CSV पेस्ट करें या मूल्य सूची अथवा खुलने के समय के नमूने से शुरू करें। कैप्शन, शीर्षक सेल और scope वाली असली HTML तालिका पाएं, जिसमें टेक्स्ट सुरक्षित रूप से एस्केप किया गया हो; साथ में कॉपी करने के लिए छोटा रेस्पॉन्सिव CSS ब्लॉक भी है।
स्प्रेडशीट या CSV की पंक्तियां पेस्ट करें, या सेवा मूल्य सूची अथवा खुलने के समय के नमूने से शुरू करें। आपको सही HTML तालिका मिलती है, जिसमें कैप्शन, शीर्षक सेल और स्क्रीन रीडर के काम आने वाले scope गुण हैं। साथ में छोटा CSS ब्लॉक है, जो फ़ोन पर तालिका पढ़ने योग्य रखता है। हर मान एस्केप होता है, इसलिए पेस्ट किया टेक्स्ट आपका पेज नहीं बिगाड़ सकता। सब कुछ ब्राउज़र में चलता है। आपकी लिखी जानकारी We.Inc या किसी और को नहीं भेजी जाती और टैब बंद करते ही मिट जाती है।
नमूना चुनें या अपनी पंक्तियां पेस्ट करें। कॉमा, टैब (स्प्रेडशीट से) और सेमीकोलन काम करते हैं; उद्धरण-चिह्नों में रखे कॉमा वाले मान एक साथ रहते हैं।
चुनें कि पहली पंक्ति में कॉलम शीर्षक हैं और पहला कॉलम हर पंक्ति का नाम बताता है या नहीं। ये scope गुणों वाले th सेल बनेंगे।
कैप्शन लिखें। यह स्क्रीन रीडर उपयोगकर्ताओं के लिए तालिका का नाम बताता है और सबको तालिका के ऊपर दिखता है।
शैली चुनें और डेस्कटॉप तथा फ़ोन की चौड़ाई पर प्रीव्यू देखें। छोटी स्क्रीन पर चौड़ी तालिकाएं सिकुड़ने के बजाय अपने बॉक्स में आड़ा स्क्रोल होती हैं।
HTML और CSS कॉपी करें या दोनों को एक फ़ाइल के रूप में डाउनलोड करें।
तालिका का उपयोग सिर्फ़ पंक्ति और कॉलम वाले डेटा, जैसे कीमत या समय, के लिए करें। पेज के लेआउट के लिए CSS इस्तेमाल करें।
शीर्षक छोटे रखें। स्क्रीन रीडर की हर घोषणा में वे दोहराए जाते हैं।
हर सेल में इकाई लिखने के बजाय शीर्षक में रखें (कीमत, USD)।
ज़रूरी न हो तो सेल न मिलाएं। स्क्रीन रीडर से मिले हुए सेल समझना कठिन होता है।
फ़ोन की चौड़ाई पर तालिका जांचें। अगर आड़ा स्क्रोल करने के लिए एक से ज़्यादा स्वाइप चाहिए, तो इसे बांटने पर विचार करें।
अक्सर पूछे जाने वाले सवाल
HTML तालिका को सुलभ क्या बनाता है?
नाम बताने वाला कैप्शन, कॉलम और पंक्ति शीर्षक के लिए th सेल, और यह बताने वाले scope गुण कि शीर्षक किस कॉलम या पंक्ति का है। स्क्रीन रीडर इनसे बताते हैं कि हर मान किस शीर्षक से जुड़ा है। यह जनरेटर तीनों जोड़ता है।
तालिका div से क्यों न बनाएं?
div का जाल तालिका जैसा दिख सकता है, पर सहायक तकनीक यह नहीं समझ पाती कि कौन-सा सेल किस शीर्षक का है। असली table एलिमेंट यह अर्थ अपने आप बताता है।
रेस्पॉन्सिव तालिका कैसे काम करती है?
तालिका ऐसे बॉक्स में रहती है जो संकरी स्क्रीन पर आड़ा स्क्रोल होता है। बॉक्स पर फ़ोकस किया जा सकता है और उसे कैप्शन से नाम दिया जाता है, इसलिए कीबोर्ड उपयोगकर्ता भी स्क्रोल कर सकते हैं।
क्या मेरा डेटा एस्केप किया जाता है?
हां। सेल में मौजूद एम्परसैंड, कोणीय ब्रैकेट और उद्धरण-चिह्न HTML एंटिटी में बदल जाते हैं। इसलिए <script> वाला सेल कोड चलाने के बजाय टेक्स्ट की तरह दिखता है।
क्या मैं सीधे Excel या Google Sheets से पेस्ट कर सकता हूं?
हां। कॉपी किए गए सेल टैब से अलग होते हैं, जिन्हें टूल अपने आप पहचान लेता है।
क्या यह मुफ़्त है?
हां, बिना साइन अप के। यह आपके ब्राउज़र में चलता है।
मूल्य सूची और खुलने का समय तालिका हैं
अधिकांश छोटे कारोबार की साइटों पर कम से कम दो तालिकाएं होती हैं: चीज़ों की कीमत और खुलने का समय। दोनों असली तालिका डेटा हैं, इसलिए इन्हें तालिका के रूप में लिखना चाहिए; हर कीमत अपनी सेवा से और हर समय अपने दिन से जुड़ा हो।
यहां के नमूने इन दोनों प्रकारों से शुरुआत कराते हैं। प्रकाशित करने से पहले उदाहरण वाली पंक्तियों को अपनी जानकारी से बदलें; ये सिर्फ़ अस्थायी नमूने हैं, असली कीमतें नहीं।