वेब पेजों में टेबल्स और स्प्रेडशीट एम्बेड करने के बेहतर तरीके

वेब पृष्ठों में टैब्यूलर डेटा एम्बेड करना आसान है। आप या तो मानक का उपयोग कर सकते हैं एचटीएमएल टैग या आप स्प्रेडशीट में टैब्यूलर डेटा इनपुट कर सकते हैं - जैसे एक्सेल ऑनलाइन या Google स्प्रेडशीट्स - और अपने वेब पृष्ठों में शीट एम्बेड करें।

एचटीएमएल टेबल आसान हैं जबकि स्प्रेडशीट आधारित टेबल बेहतर स्वरूपण और जटिल लेआउट की अनुमति देते हैं - जैसे तालिका के भीतर घोंसला वाली टेबल - कोड के साथ झुकाव के बिना। यहां विभिन्न तरीकों से आप अपनी वेबसाइट और उनके पेशेवरों और विपक्ष में तालिकाओं को एम्बेड कर सकते हैं।

यदि आपके पास ड्रीमवेवर जैसे WYSIWYG संपादक तक पहुंच है, तो आप अंतर्निहित विज़ार्ड का उपयोग करके आसानी से एक HTML तालिका बना सकते हैं, लेकिन मैं टेबल बनाने के लिए मार्कडाउन का उपयोग करना पसंद करता हूं क्योंकि इसमें कोई टैग की आवश्यकता नहीं होती है। Gist.github.com पर जाएं (आपको यहां एक खाता भी नहीं चाहिए) और निम्न प्रारूप में तालिका दर्ज करें:

प्रत्येक कॉलम को पाइप (|) से अलग किया जाता है जबकि हाइफ़न (-) तालिका शीर्षलेख इंगित करता है। Gist table.md का नाम दें (.md मार्कडाउन भाषा इंगित करता है) और तालिका के रूप में मार्कडाउन को प्रस्तुत करने के लिए 'गुप्त गिट बनाएं' बटन पर क्लिक करें।

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

स्प्रेडशीट डेटा को HTML तालिका कोड में परिवर्तित करने के लिए टेबलिज़र एक और आसान टूल है। अपने डेस्कटॉप पर एक्सेल या नंबर ऐप के अंदर एक टेबल बनाएं, सेल कॉपी करें और इसे टेबलज़र के अंदर पेस्ट करें। यह HTML कोड जेनरेट करेगा जिसका उपयोग आपके ब्लॉग या वेबसाइट पर किया जा सकता है।

वेब पेज में टैब्यूलर डेटा एम्बेड करने के लिए एक लोकप्रिय विकल्प Google डॉक्स (स्प्रेडशीट्स) के माध्यम से है। इस दृष्टिकोण के साथ लाभ यह है कि आप स्प्रेडशीट में डेटा को संशोधित कर सकते हैं और एम्बेडेड टेबल संपादन को प्रतिबिंबित करने के लिए स्वयं अपडेट हो जाएगा। तालिका वाले वेब पेज को संपादित करने की कोई आवश्यकता नहीं है।

Spreadsheets.google.com पर जाएं, शीट में कुछ डेटा दर्ज करें और फ़ाइल मेनू से वेब विकल्प पर प्रकाशित करें चुनें। स्टार्ट पब्लिशिंग चुनें और Google ड्राइव आपको उस विशेष शीट के लिए IFRAME एम्बेड कोड प्रदान करेगा।

एम्बेडेड शीट - लाइव संस्करण देखें - कोशिकाओं के मूल स्वरूपण को संरक्षित रखेगा लेकिन यह अभी भी एक स्थिर HTML दस्तावेज़ होगा - HTML तालिका में डेटा को सॉर्ट या फ़िल्टर करने के लिए कोई विकल्प नहीं है।

वेब पेज में स्प्रेडशीट डेटा एम्बेड करने के लिए यह मेरी पसंदीदा विधि है और मैं जल्द ही बताऊंगा क्यों।

Office.live.com पर जाएं और नई रिक्त कार्यपुस्तिका बनाएं। एक्सेल शीट के अंदर टैब्यूलर डेटा दर्ज करें और फिर फ़ाइल -> साझा करें -> एम्बेड करें -> HTML उत्पन्न करें चुनें।

एक्सेल, Google डॉक्स के विपरीत, आपको सेल की एक विस्तृत श्रृंखला को एम्बेड करने की अनुमति देता है, न कि संपूर्ण स्प्रेडशीट। आप एम्बेडेड सेल में एक डाउनलोड लिंक भी शामिल कर सकते हैं जिससे आपकी वेबसाइट विज़िटर को स्थानीय स्प्रेडशीट ऐप में टेबल डाउनलोड और खोलना आसान हो जाता है। एम्बेडेड स्प्रेडशीट Google डॉक्स की तुलना में बेहतर कॉपी-पेस्ट भी प्रदान करता है।

Excel वेब ऐप का उपयोग करके एम्बेडेड एक HTML तालिका का लाइव संस्करण यहां दिया गया है।

संबंधित: एक्सेल में वेब टेबल्स कैप्चर करें

यदि आप इंटरैक्टिव स्प्रेडशीट आधारित तालिकाओं की बजाय स्थैतिक HTML तालिकाओं के साथ जाना चाहते हैं, तो आप एक्सेल बटन जोड़ने पर विचार कर सकते हैं जो आपके HTML टेबल को इंटरैक्टिव बना देगा।

आपके पास नियमित HTML कोड है और आपको बस इतना करना है कि अपने वेब पेज पर एक और HTML टैग जोड़ें जो एम्बेडेड स्थिर तालिका को एक इंटरैक्टिव शीट में बदल देगा - - यह लाइव संस्करण देखें।

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

स्थिर एचटीएमएल टेबल के साथ लाभ यह है कि वे एसईओ दोस्ताना हैं (सर्च इंजन आपकी एचटीएमएल टेबल पढ़ सकते हैं) जबकि स्प्रेडशीट आधारित टेबल नहीं हैं। उत्तरार्द्ध हालांकि बेहतर स्वरूपण विकल्पों की अनुमति देता है और अद्यतन करने के लिए अपेक्षाकृत आसान है।

यदि आप दोनों दुनिया में सर्वश्रेष्ठ होना चाहते हैं, तो HTML तालिका के साथ जाएं और एक्सेल इंटरैक्टिव व्यू का उपयोग करें जो दर्शकों को मांग पर तालिका के साथ बातचीत करने देगा।

संबंधित गाइड: किसी वेबसाइट में कुछ भी एम्बेड कैसे करें