एलिमेंटर में एक टेबल कैसे बनाएं (४ तरीके, चरणों के साथ)

कुंजी तकिए

• एलिमेंटर के कोर प्लगइन या एलिमेंटर प्रो में कोई टेबल विजेट नहीं है, इसलिए एलिमेंटर में एक टेबल HTML कोड, कंटेनर, एक टेबल प्लगइन या एक ऐडऑन विजेट से आती है।
• HTML विजेट बिना प्लगइन के एलिमेंटर में एक टेबल बनाने का तरीका है: टेबल, tr, th और td टैग पेस्ट करें और बॉर्डर और पैडिंग के लिए एक छोटा स्टाइल ब्लॉक जोड़ें।
• एक ग्रिड कंटेनर एक तालिका की नकल कर सकता है, लेकिन 3 कॉलम, 4 पंक्ति तालिका के लिए 12 अलग-अलग टेक्स्ट एडिटर विजेट की आवश्यकता होती है और परिणाम वास्तविक HTML तालिका नहीं है।
• टेबलप्रेस 3.4 अपना स्वयं का एलिमेंटर विजेट जोड़ता है जिसे टेबलप्रेस टेबल कहा जाता है, और इसकी तालिकाओं को आगंतुकों द्वारा क्रमबद्ध, खोजा और पृष्ठांकित किया जा सकता है।
• मास्टर एडॉन्स डायनेमिक टेबल विजेट एलिमेंटर पैनल में हेडर और बॉडी सेल से एक वास्तविक HTML टेबल बनाता है और 768px चौड़े डिवाइस पर पंक्तियों को कार्ड में स्टैक करता है।

एलिमेंटर में एक टेबल बनाने के लिए आपको एक वर्कअराउंड की आवश्यकता होती है, क्योंकि एलिमेंटर एक टेबल विजेट नहीं भेजता है चार जो काम करते हैं वे आपके स्वयं के कोड, एक ग्रिड कंटेनर, एक टेबलप्रेस टेबल और एक ऐडऑन विजेट जैसे एचटीएमएल विजेट हैं गतिशील तालिका.

हमने एलिमेंटर 4.3 पर चार तरीकों में से प्रत्येक में एक टेबल बनाई और डेस्कटॉप और फोन पर हर एक को देखा।

क्या एलिमेंटर के पास टेबल विजेट है?

नहीं, एलिमेंट पैनल में “टेबल” के लिए खोजें और केवल अंतर्निहित परिणाम सामग्री की तालिका और मूल्य तालिका हैं, और दोनों एलिमेंट प्रो से संबंधित हैं न तो कोई डेटा की पंक्तियों और स्तंभों को बनाता है मूल्य तालिका एक एकल मूल्य निर्धारण कार्ड है, और सामग्री तालिका पृष्ठ पर शीर्षकों को सूचीबद्ध करती है।

आपको किस तरीके का उपयोग करना चाहिए?

तालिका कितनी बड़ी है और बाद में इसे कौन संपादित करेगा, इसके आधार पर चुनें।

रास्ता १: एचटीएमएल विजेट के साथ एलिमेंट में एक टेबल बनाएं

यह एक प्लगइन के बिना एलिमेंट में एक टेबल बनाने का तरीका है आप एक सादा एचटीएमएल टेबल लिखते हैं और एलिमेंट इसे प्रिंट करता है जैसा कि यह है।

1. एलिमेंटर के साथ पेज संपादित करें और खींचें एचटीएमएल एक कंटेनर में विजेट।
2. नीचे दिए गए कोड को इसमें चिपकाएँ एचटीएमएल कोड मैदान।
3. टैग के बीच पाठ बदलें प्रत्येक tr एक पंक्ति है, प्रत्येक th एक हेडर सेल है और प्रत्येक td शरीर की एक कोशिका है।
4. क्लिक करें प्रकाशित करें.

<table class="simple-table">
  <thead>
    <tr><th>Plan</th><th>Storage</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Starter</td><td>10 GB</td><td>$5 a month</td></tr>
    <tr><td>Team</td><td>100 GB</td><td>$15 a month</td></tr>
    <tr><td>Business</td><td>1 TB</td><td>$45 a month</td></tr>
  </tbody>
</table>

<style>
.simple-table { width: 100%; border-collapse: collapse; }
.simple-table th, .simple-table td { padding: 12px 16px; border: 1px solid #e4e7ec; text-align: left; }
.simple-table th { background: #101223; color: #fff; }
.simple-table tbody tr:nth-child(even) { background: #f6f6f7; }
</style>

टेबल हल्की है और यह वास्तविक है table तत्व, जो खोज इंजन और स्क्रीन रीडर समझते हैं हालांकि इसे बनाए रखना कठिन है एक क्लाइंट जो एक पंक्ति जोड़ना चाहता है उसे एचटीएमएल संपादित करना पड़ता है, और एक लापता समापन टैग लेआउट को तोड़ देता है।

रास्ता 2: ग्रिड कंटेनर के साथ एक टेबल बनाएं

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

1. एक कंटेनर जोड़ें और सेट करें कंटेनर लेआउट को ग्रिड.
2. सेट कॉलम आपके लिए आवश्यक कॉलमों की संख्या और पंक्तियों पंक्तियों की संख्या में, हेडर शामिल है।
3. सेट अंतराल ० करने के लिए तो कोशिकाओं को छूने।
4. एक खींचें पाठ संपादक प्रत्येक सेल में विजेट करें और उसका टेक्स्ट टाइप करें।
5. प्रत्येक विजेट पर खुला उन्नतू ी, फिर जोड़ें पैडिंग और एक 1px सीमाहेडर सेल को एक पृष्ठभूमि रंग दें।

विजेट गिनती तेजी से बढ़ती है तीन कॉलम और चार पंक्तियों को पहले से ही १२ विजेट की आवश्यकता होती है, और ५ से १० टेबल को ५० की आवश्यकता होती है सीमाएं डबल अप होती हैं जहां कोशिकाएं मिलती हैं जब तक कि आप प्रत्येक पक्ष को ट्यून नहीं करते हैं आउटपुट डिव का एक सेट है, इसलिए एक स्क्रीन रीडर इसे एक मुट्ठी भर कोशिकाओं के लिए इस विधि को रखें।

रास्ता ३: एलिमेंट में एक टेबलप्रेस टेबल जोड़ें

टेबलप्रेस ६००,००० से अधिक सक्रिय इंस्टॉल के साथ एक टेबल प्लगइन है आप अपने स्वयं के व्यवस्थापक स्क्रीन पर तालिका बनाते हैं और फिर इसे एलिमेंटर में रखते हैं यह लंबी तालिकाओं के लिए सही पिक है, क्योंकि यह एक्सेल, सीएसवी, एचटीएमएल और जेएसओएन फ़ाइलों को आयात करता है और आगंतुकों को पंक्तियों के माध्यम से सॉर्ट, खोज और पृष्ठ देता है।

1. स्थापित करें और सक्रिय करें टेबलप्रेस.
2. को जा टेबलप्रेसफिर नया जोड़ें तालिका टाइप करने के लिए, या आयात एक फाइल अपलोड करने के लिए।
3. टेबल को सेव करें और उसकी आईडी नोट करें।
4. एलिमेंटर के साथ अपना पेज संपादित करें और खोजें टेबलप्रेस टेबल। विजेट को अंदर खींचें और उसमें अपनी तालिका चुनें टेबल ड्रॉपडाउन।
5. यदि आप शॉर्टकोड पसंद करते हैं, तो इसमें खींचें शॉर्टकोड विजेट और दर्ज करें [table id=1 /] अपनी खुद की आईडी के साथ।

विजेट में कोई स्टाइल टैब नहीं है, इसलिए रंग और फ़ॉन्ट टेबलप्रेस सेटिंग्स और आपके अपने सीएसएस से आते हैं। हमारे 390px परीक्षण फ़ोन पर पाँच-कॉलम तालिका भी दाएँ किनारे से आगे तक चलती रही जब तक कि हम चालू नहीं हो गए क्षैतिज स्क्रॉलिंग तालिका की सेटिंग में।

रास्ता ४: एक टेबल विजेट का उपयोग करें

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

1. मास्टर ऐडऑन स्थापित करें और जांचें कि गतिशील तालिका इसकी विजेट सेटिंग में स्विच ऑन किया जाता है।
2. एलिमेंट के साथ पेज संपादित करें, खोजें गतिशील तालिका और इसे अंदर खींचें यह एक नमूना चार-स्तंभ तालिका के साथ शुरू होता है।
3. खुला टेबल हेड. एक जोड़ें टेबल हैडर सेल प्रति कॉलम और प्रत्येक टाइप करें कॉलम नाम.
4. खुला टेबल बॉडी. एक जोड़ें टेबल बॉडी सेल प्रति सेल, बाएं से दाएं। चालू करें नई पंक्ति? पहली के बाद हर पंक्ति के पहले सेल पर।
5. कोशिकाओं को मर्ज करने के लिए, एक सेल खोलें विकल्प टैब और सेट करें कॉलम स्पैन या पंक्ति स्पैन.
6. हेडर, बॉडी और धारियों को स्टाइल करें शैली टैब करें, फिर प्रकाशित करें।

प्रत्येक सेल टेक्स्ट, एक आइकन या एक छवि रख सकता है, और टेक्स्ट फ़ील्ड गतिशील टैग स्वीकार करते हैं। उत्तरदायी तालिका? सेटिंग्स अनुभाग डिफ़ॉल्ट रूप से चालू है, इसलिए 768px तक चौड़े उपकरणों पर प्रत्येक पंक्ति लेबल के रूप में कॉलम नामों वाला एक कार्ड बन जाती है।

कुछ भी स्थापित करने से पहले इसे देखना चाहते हैं? द गतिशील तालिका पृष्ठ तीन लाइव टेबल और आठ डेमो लेआउट हैं जिन्हें आप खोल सकते हैं।

डायनामिक टेबल फ़ाइलों को सॉर्ट, खोज, पृष्ठांकित या आयात नहीं करता है प्रत्येक सेल हाथ से टाइप किया जाता है, जो ३० कोशिकाओं के लिए ठीक है और ३०० के लिए थका हुआ है, इसलिए बड़े डेटा सेट के लिए वे ३ पर वापस जाएं।

बचने के लिए गलतियाँ

• पाठ संपादक विजेट में तालिका का निर्माण। इसमें कोई टेबल बटन नहीं है, इसलिए आप वैसे भी इसके टेक्स्ट टैब में एचटीएमएल लिखना समाप्त करते हैं एचटीएमएल विजेट उस कोड के लिए क्लीनर जगह है।
• डेटा के लिए मूल्य निर्धारण विजेट का उपयोग करना। मूल्य तालिका और मूल्य निर्धारण तालिका विजेट एक खरीद बटन के साथ योजनाओं के लिए बनाए गए हैं वे डेटा की पंक्तियों के लिए गलत आकार हैं।
• फोन भूल जाना। पांच कॉलम की तालिका शायद ही कभी ३९० पीएक्स स्क्रीन फिट होती है तय करें कि पंक्तियों को ढेर करना चाहिए, बग़ल में स्क्रॉल करना चाहिए या कॉलम खोना चाहिए।
• विजेट से ५० सेल बनाना। यदि ग्रिड विधि को लगभग एक दर्जन से अधिक विजेट की आवश्यकता है, तो वास्तविक तालिका पर स्विच करें।

अक्सर पूछे जाने वाले प्रश्न

अंतिम विचार

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

अगर आखिरी फिट बैठता है, तो गतिशील तालिका का हिस्सा है मास्टर ऐडऑन इसके अन्य विजेट के साथ।

संबंधित पढ़ने

• एलिमेंटर मूल्य निर्धारण तालिका युक्तियाँ
• वर्डप्रेस के लिए सामग्री प्लगइन्स की सर्वश्रेष्ठ तालिका