कुंजी तकिए
- टेबलप्रेस एलिमेंटर के साथ दो तरीकों से काम करता है: टेबलप्रेस टेबल नाम का एक विजेट जिसे टेबलप्रेस 3.4 एलिमेंटर पैनल में जोड़ता है, और शॉर्टकोड विजेट में रखा गया शॉर्टकोड [टेबल आईडी=1 /]।
- एलिमेंटर में टेबलप्रेस टेबल विजेट में टेबल ड्रॉपडाउन और कॉन्फ़िगरेशन पैरामीटर फ़ील्ड है, और इसमें कोई स्टाइल टैब नहीं है।
- टेबलप्रेस डिफ़ॉल्ट रूप से आगंतुकों के लिए सॉर्टिंग, खोज और पेजिनेशन चालू करता है, प्रति पृष्ठ 10 पंक्तियों के साथ।
- टेबलप्रेस में क्षैतिज स्क्रॉलिंग डिफ़ॉल्ट रूप से बंद है, इसलिए एक पांच-कॉलम तालिका ३९० पीएक्स फोन पर ओवरफ्लो होती है जब तक कि आप इसे तालिका की सेटिंग्स में टिक नहीं करते।
- एक छोटी तालिका के लिए जिसे एलिमेंटर के अंदर संपादित और स्टाइल किया जाना चाहिए, मास्टर एडॉन्स डायनेमिक टेबल जैसे टेबल विजेट टेबलप्रेस की तुलना में कम काम करते हैं।
टेबलप्रेस और एलिमेंट बिना किसी ब्रिज प्लगइन के एक साथ काम करते हैं आप टेबलप्रेस में टेबल बनाते हैं, फिर इसे टेबलप्रेस टेबल विजेट के साथ या शॉर्टकोड के साथ एलिमेंट पेज पर रखें तालिका अपनी सॉर्टिंग, खोज और पेजिनेशन रखती है।
यह गाइड दोनों तरीकों, स्टाइल और सेटिंग को कवर करता है जो फोन पर विस्तृत तालिकाओं को ठीक करता है यह भी कहता है कि जब एक सादा टेबल विजेट बेहतर विकल्प है यहां सब कुछ टेबलप्रेस ३.४ और एलिमेंट ४.३ के साथ परीक्षण किया गया था।
विषय-सूची
चरण १: टेबलप्रेस में तालिका बनाएं या आयात करें
टेबल स्वयं एलिमेंट के बाहर, वर्डप्रेस डैशबोर्ड में टेबलप्रेस स्क्रीन पर बनाई गई है।
- स्थापित करें और सक्रिय करें टेबलप्रेस प्लगइन्स से, नया जोड़ें।
- खुला टेबलप्रेस डैशबोर्ड मेनू में।
- तालिका टाइप करने के लिए, क्लिक करें नया जोड़ें, एक नाम दर्ज करें, पंक्तियों और स्तंभों की संख्या निर्धारित करें, और कक्षों को भरें।
- स्प्रेडशीट लाने के लिए, क्लिक करें आयात, चुनें फ़ाइल अपलोड, फ़ाइल का चयन करें, रखें नई तालिका के रूप में जोड़ें और क्लिक करें आयात.
- तालिका की आईडी नोट करें पहली तालिका आईडी १ है।
टेबलप्रेस एक्सेल, सीएसवी, एचटीएमएल और जेएसओएन फाइलों का आयात करता है हमने शिपिंग दरों की छह-पंक्ति सीएसवी आयात की, और यह पहली पंक्ति के साथ पहले से ही हेडर के रूप में सेट हो गया।
चरण २: इसे टेबलप्रेस टेबल विजेट के साथ जोड़ें
टेबलप्रेस अपने स्वयं के एलिमेंटर विजेट को पंजीकृत करता है, इसलिए इस विधि को शॉर्टकोड की आवश्यकता नहीं है।
- एलिमेंटर के साथ अपना पेज संपादित करें।
- के लिए विजेट पैनल खोजें टेबलप्रेस टेबल.
- विजेट को कंटेनर में खींचें।
- को खोलें टेबल ड्रॉपडाउन और अपनी तालिका चुनें टेबल आईडी और नाम से सूचीबद्ध हैं।
- पेज प्रकाशित करें।
द उन्नत ड्रॉपडाउन के तहत अनुभाग एक क्षेत्र रखता है, क कॉन्फ़िगरेशन पैरामीटर। यह उन्हीं मापदंडों को स्वीकार करता है जिन्हें आप शॉर्टकोड में डालेंगे, उन मामलों के लिए जहां एक पृष्ठ को विभिन्न विकल्पों के साथ तालिका दिखानी चाहिए।
या इसे शॉर्टकोड के साथ जोड़ें
शॉर्टकोड वही काम करता है और कहीं भी शॉर्टकोड काम करता है।
- एलिमेंटर्स खींचें शॉर्टकोड एक कंटेनर में विजेट।
- प्रकार
[table id=1 /], अपनी तालिका की आईडी के साथ १ की जगह। - क्लिक करें लागू करना पूर्वावलोकन लोड करने के लिए।
हमारे परीक्षण पृष्ठ पर विजेट और शॉर्टकोड ने एक ही तालिका मुद्रित की जब आप कर सकते हैं तो विजेट का उपयोग करें, क्योंकि ड्रॉपडाउन से चुनने से आईडी में टाइपो से बचा जाता है।
छँटाई, खोज और पृष्ठांकन
ये हर नई तालिका के लिए स्विच किए जाते हैं आप उन्हें प्रति तालिका बदलते हैं, नामित बॉक्स में साइट आगंतुकों के लिए तालिका विशेषताएं टेबल की संपादन स्क्रीन पर।
| सेटिंग | यह क्या करता है | चूक |
|---|---|---|
| छँटाई | विज़िटर उस कॉलम के अनुसार क्रमबद्ध करने के लिए हेडर पर क्लिक करते हैं | पर |
| खोजें/फ़िल्टरिंग | एक खोज बॉक्स जोड़ता है जो पंक्तियों को फ़िल्टर करता है | पर |
| पृष्ठांकन | प्रति पृष्ठ पंक्तियों की एक निर्धारित संख्या दिखाता है | चालू, 10 पंक्तियाँ |
| पृष्ठांकन लंबाई परिवर्तन | आगंतुकों को प्रति पृष्ठ पंक्तियाँ बदलने देता है | पर |
| जानकारी | “6 प्रविष्टियों में से 1 से 6 तक दिखा रहा है” | पर |
| क्षैतिज स्क्रॉलिंग | उनके बॉक्स के अंदर विस्तृत तालिकाओं स्क्रॉल | बंद |
छह पंक्तियों वाली तालिका के लिए, खोज और पृष्ठांकन अव्यवस्था है उन्हें अनटिक करें और तालिका एक सादे ग्रिड के रूप में दिखाती है।
एलिमेंटर में एक टेबलप्रेस टेबल स्टाइल करना
टेबलप्रेस टेबल विजेट में एलिमेंट में कोई टेबल स्टाइलिंग नियंत्रण नहीं है, इसलिए लुक तीन अन्य स्थानों पर सेट है।
- तालिका विकल्प तालिका की संपादन स्क्रीन पर: कौन सी पंक्तियाँ हेडर और पाद लेख हैं, वैकल्पिक पंक्ति रंग, पंक्ति होवर हाइलाइटिंग, और एक अतिरिक्त सीएसएस कक्षाएं मैदान।
- कस्टम सीएसएस रंगों, फोंट और सीमाओं के लिए टेबलप्रेस प्रत्येक तालिका को उसकी आईडी के आधार पर एक वर्ग देता है, ताकि आप एक तालिका को लक्षित कर सकें।
- विजेट का उन्नत टैब टेबल के चारों ओर मार्जिन, पैडिंग और चौड़ाई के लिए एलिमेंटर में।
एक छोटा सीएसएस उदाहरण जो तालिका १ के शीर्षलेख को पुनर्स्थापित करता हैः
.tablepress-id-1 thead th {
background: #101223;
color: #ffffff;
}
.tablepress-id-1 tbody td {
padding: 12px 16px;
}इसे उपस्थिति, अनुकूलित, अतिरिक्त सीएसएस, या किसी भी कस्टम सीएसएस बॉक्स में चिपकाएं जो आपके सेटअप में है एलिमेंटर प्रो में प्रति तत्व एक है, और मास्टर एडॉन्स कस्टम सीएसएस एक्सटेंशन एक भी जोड़ता है।
फोन पर टेबल ठीक करें
390px चौड़े फ़ोन पर हमारी पाँच-कॉलम तालिका स्क्रीन के दाहिने किनारे से होकर गुजरती थी, और अंतिम कॉलम पढ़ा नहीं जा सकता था।
- टेबलप्रेस में तालिका संपादित करें।
- के तहत साइट आगंतुकों के लिए तालिका विशेषताएं, टिक क्षैतिज स्क्रॉलिंग.
- क्लिक करें परिवर्तन सहेजें और अपने फोन पर पेज को पुनः लोड करें।
टेबलप्रेस अपने प्रो प्लान में एक रिस्पॉन्सिव टेबल्स फीचर भी बेचता है ($ ८९ एक वर्ष जब हमने चेक किया था), मोड के साथ जो छोटी स्क्रीन पर पंक्तियों को ढेर या पतन करते हैं, विस्तृत तालिकाओं को संभालने के अन्य तरीके हमारे गाइड में हैं एलिमेंटर में उत्तरदायी तालिकाएँ.
जब एक टेबल विजेट बेहतर विकल्प है
टेबलप्रेस डेटा के लिए बनाया गया है एक छोटी सी तालिका के लिए जो वास्तव में पृष्ठ डिजाइन का हिस्सा है, यह कदम जोड़ता है: एक दूसरी व्यवस्थापक स्क्रीन, सीएसएस किसी अन्य स्थान पर, और अद्यतन रखने के लिए एक प्लगइन।
| आपकी टेबल | बेहतर उपकरण |
|---|---|
| लगभग ३० से अधिक पंक्तियाँ, या यह एक्सेल या सीएसवी से आती है | टेबलप्रेस |
| आगंतुकों को इसके माध्यम से सॉर्ट करने, खोजने या पेज करने की आवश्यकता है | टेबलप्रेस |
| ३० पंक्तियों के तहत, हाथ से टाइप किया गया, पृष्ठ से मेल खाने के लिए स्टाइल किया गया | एक टेबल विजेट |
| कोशिकाओं को आइकन या छवियों, या मर्ज की गई कोशिकाओं की आवश्यकता होती है | एक टेबल विजेट |
| पंक्तियों को भुगतान योजना के बिना फोन पर कार्ड में ढेर करना चाहिए | एक टेबल विजेट |
केवल एक छोटी मेज की आवश्यकता है? द गतिशील टेबल विजेट इसे एलिमेंटर पैनल में स्टाइल टैब और फोन पर स्टैक करने वाली पंक्तियों के साथ बनाता है।
डायनामिक टेबल में कोई सॉर्टिंग, खोज या आयात नहीं है, इसलिए डेटा के लिए टेबलप्रेस और लेआउट टेबल के लिए विजेट जैसे समय सारिणी या एक स्पेक शीट का उपयोग करें अन्य विकल्पों की तुलना हमारे में की जाती है एलिमेंटर टेबल प्लगइन्स राउंडअप.
अक्सर पूछे जाने वाले प्रश्न
क्या टेबलप्रेस एलिमेंट के साथ काम करता है?
हाँ। टेबलप्रेस ३.४ एलिमेंट पैनल में एक टेबलप्रेस टेबल विजेट जोड़ता है, और इसका शॉर्टकोड एलिमेंट के शॉर्टकोड विजेट में काम करता है उन्हें कनेक्ट करने के लिए किसी अतिरिक्त प्लगइन की आवश्यकता नहीं है।
मैं एक एलिमेंट पेज पर एक टेबलप्रेस टेबल कैसे जोड़ूं?
टेबलप्रेस में तालिका बनाएं, एलिमेंट के साथ पृष्ठ संपादित करें, टेबलप्रेस तालिका विजेट की खोज करें, इसे खींचें और तालिका ड्रॉपडाउन में अपनी तालिका चुनें आप अपनी तालिका की आईडी का उपयोग करके, शॉर्टकोड विजेट में [तालिका आईडी = १ /] भी पेस्ट कर सकते हैं।
क्या टेबलप्रेस मुफ्त है?
वर्डप्रेस डॉट ओआरजी पर टेबलप्रेस प्लगइन मुफ्त है और इसमें आयात, निर्यात, सॉर्टिंग, खोज और पेजिनेशन शामिल हैं पेड प्रो और मैक्स प्लान रिस्पॉन्सिव टेबल्स, फिक्स्ड रो और कॉलम और ऑटोमैटिक इंपोर्ट्स जैसी सुविधाएं जोड़ते हैं।
मैं एलिमेंट में एक टेबलप्रेस टेबल कैसे स्टाइल करूं?
एलिमेंटर विजेट में कोई टेबल स्टाइलिंग नियंत्रण नहीं है तालिका की तालिका विकल्पों में धारियों और होवर हाइलाइटिंग सेट करें, और कस्टम सीएसएस के साथ रंग और फ़ॉन्ट बदलें जो तालिका के वर्ग को लक्षित करता है, उदाहरण के लिए टेबलप्रेस-आईडी -१।
मोबाइल पर मेरी टेबलप्रेस टेबल क्यों कट गई है?
क्षैतिज स्क्रॉलिंग डिफ़ॉल्ट रूप से बंद है, इसलिए विस्तृत टेबल स्क्रीन को ओवरफ्लो करते हैं तालिका संपादित करें, साइट आगंतुकों के लिए तालिका सुविधाओं के तहत क्षैतिज स्क्रॉलिंग पर टिक करें और सहेजें तालिका फिर अपने स्वयं के बॉक्स के अंदर बग़ल में स्क्रॉल करती है।
अंतिम विचार
टेबलप्रेस और एलिमेंटर डेटा तालिकाओं के लिए एक साथ अच्छी तरह से फिट होते हैं: फ़ाइल आयात करें, टेबलप्रेस टेबल विजेट में ड्रॉप करें, और फोन के लिए क्षैतिज स्क्रॉलिंग चालू करना याद रखें स्टाइलिंग थोड़ा सीएसएस लेता है क्योंकि विजेट में कोई स्टाइल टैब नहीं है।
छोटी तालिकाओं के लिए जो पृष्ठ के भाग की तरह दिखना चाहिए, गतिशील तालिका कोशिकाओं और स्टाइल को एलिमेंटर के अंदर रखता है।
संबंधित पढ़ने
