Droptables: स्टाइलिंग टेबल
- 1. तालिका में प्रारूपित करें
- 2. थीम और सॉर्टिंग विकल्प
- 3. सेल पर टूलटिप जोड़ें
- 4. एसीएल और फ्रंटएंड प्रशासन
- 5. पंक्ति और स्तंभ को स्थिर करना
- 6. कॉलम डेटा को फ़िल्टर करना
- 7. सेल पैडिंग और बॉर्डर त्रिज्या
- 8. कस्टम सीएसएस
- 9. रिस्पॉन्सिव जूमला टेबल्स
- 10. तालिका डाउनलोड करें
- 11. पृष्ठ संख्या
- 12. एकल सेल के लिए प्रारूप
- 13. फ्रंटएंड पर तालिका प्रिंट करें
1. तालिका में प्रारूपित करें
टूलबार पर, आप सेल के लिए स्टाइल सेट कर सकते हैं जैसे: फ़ॉन्ट, फ़ॉन्ट साइज़, टेक्स्ट स्टाइल, सेल का बैकग्राउंड कलर, टेक्स्ट कलर, सेल का हॉरिजॉन्टल और वर्टिकल अलाइनमेंट आदि। इसे एक सेल या कई सेल्स पर लागू किया जा सकता है।.
पंक्ति की ऊँचाई और स्तंभ की चौड़ाई पिक्सेल में निर्धारित की जा सकती है। कृपया मेनू फॉर्मेट > कॉलम/पंक्ति का आकार लागू करें पर जाएं , फिर कॉलम का आकार बदलें / पंक्ति का आकार बदलें चुनें। पॉप-अप विंडो में, आप सीमा का चयन कर सकते हैं और स्तंभों या पंक्तियों के लिए पिक्सेल मान निर्धारित कर सकते हैं। प्रक्रिया पूरी करने के लिए 'हो गया' बटन पर क्लिक करें ।
2. थीम और सॉर्टिंग विकल्प
प्रत्येक टेबल में, मेनू थीम में आपको थीम चयन का विकल्प मिलेगा । थीम लागू करने के लिए बस उस पर क्लिक करें।
मेनू थीम > वैकल्पिक रंग में , "स्वचालित स्टाइलिंग" सुविधा आपको हेडर और फुटर स्टाइलिंग विकल्पों के साथ अपनी टेबल की लाइन को रंगने में मदद करती है । आप टेम्पलेट स्टाइल चुन सकते हैं या प्लगइन सेटिंग्स में जाकर अपनी खुद की स्टाइल बना सकते हैं।
सॉर्टेबल पैरामीटर आपको फ्रंटएंड पर AJAX डेटा सॉर्टिंग करने की अनुमति देता है। आप इसे मेनू फॉर्मेट > सॉर्ट।
टेबल अलाइनमेंट का मतलब है उस div को अलाइन करना जिसमें पूरी टेबल है, उदाहरण के लिए पूरी टेबल को सेंटर में लाना। आप इसे मेनू फॉर्मेट > टेबल अलाइनमेंट।
सेल हाईलाइट करने का विकल्प भी उपलब्ध है। आप कॉन्फ़िगरेशन। यह डिफ़ॉल्ट रूप से बंद रहता है। आप हाईलाइटिंग का रंग और अपारदर्शिता समायोजित कर सकते हैं।
3. सेल पर टूलटिप जोड़ें
सेल पर माउस होवर करने पर टूलटिप भी उपलब्ध है (इसे कंपोनेंट विकल्पों से सक्रिय करना होगा)। टेबल के प्रत्येक सेल पर राइट क्लिक करने पर आपको टूलटिप विकल्प दिखाई देगा।
आप टूलटिप की चौड़ाई पिक्सल में सेट कर सकते हैं। ऐसा करने पर आपको संपादन के लिए एक संपादक वाला टूलटिप दिखाई देगा।.
सामग्री जोड़ें और सहेजें, बस हो गया। माउस को होवर करने पर टूलटिप सार्वजनिक पृष्ठ पर प्रदर्शित होगा।.
4. एसीएल और फ्रंटएंड प्रशासन
आप Joomla फ्रंटएंड से अपनी टेबल को मैनेज कर सकते हैं। Joomla मेनू मैनेजर से, एक नया मेनू आइटम जोड़ें और टाइप के रूप में 'टेबल मैनेज करें' चुनें चुनें Droptables टेम्पलेट के रूप में
यहां आप फ्रंटएंड से Droptables मैनेजर का दृश्य देख सकते हैं।.
आप Joomla User Group ACL का उपयोग करके टेबल संपादन क्रियाओं को नियंत्रित कर सकते हैं। सबसे पहले, यह निर्धारित करने के लिए कि किसे टेबल देखने की अनुमति है, आपको में Droptables कॉन्फ़िगरेशन User Roles टैब पर जाना चाहिए।
आप मेनू टेबल > टेबल एक्सेस से किसी टेबल के लिए स्वामी निर्धारित कर सकते हैं।
5. पंक्ति और स्तंभ को स्थिर करना
स्तंभ जमना
कॉलम फ्रीज़ करने का विकल्प मेनू फॉर्मेट > रिस्पॉन्सिव ऑप्शंस। आप अधिकतम 5 कॉलम फ्रीज़ कर सकते हैं। गिनती पहले कॉलम से शुरू होती है।
कॉलम/पंक्ति को स्थिर करने के लिए एक अतिरिक्त विकल्प है जो आपको टेबल की ऊंचाई तय करने की सुविधा देता है (क्योंकि आपके टेबल कंटेनर की ऊंचाई अनंत हो सकती है)।.
जब आप फ्रीज करने के लिए कॉलम का चयन कर लेते हैं, तो आप अपनी टेबल पर स्क्रॉल कर पाएंगे और हमेशा स्थिर कॉलम प्रदर्शित होगा।.
पंक्ति जमना
आप इसे मेनू फॉर्मेट > टेबल हेडर, यहाँ से आप विकल्प को चालू कर सकते हैं और पंक्तियों को फ्रीज करने के लिए सेट कर सकते हैं (अधिकतम 5 पंक्तियाँ)।
यदि आप टेबल की ऊंचाई निर्धारित करना चाहते हैं, तो कृपया रिस्पॉन्सिव विकल्पों पर वापस जाएं।
इसके बाद सेटिंग के अनुसार फ्रंटएंड पर पहली पंक्ति स्थिर हो जाएगी।.
6. कॉलम डेटा को फ़िल्टर करना
मेनू फॉर्मेट > फ़िल्टर में फ़िल्टरिंग का विकल्प उपलब्ध है । सार्वजनिक डेटा फ़िल्टरिंग फ़ील्ड को सक्रिय करने के लिए क्लिक करके आप इसे सक्रिय कर सकते हैं।
फ़िल्टर के उदाहरण:
7. सेल पैडिंग और बॉर्डर त्रिज्या
आप टूलबार पर बॉर्डर आइकन पा सकते हैं जो सेल पर पैडिंग और बॉर्डर रेडियस को समायोजित करने में मदद करता है।.
8. कस्टम सीएसएस
चलिए एक कदम और आगे बढ़ते हैं। यदि आप CSS संपादन कौशल वाले वेब डिज़ाइनर हैं, तो आप मेनू फॉर्मेट > कस्टम CSS में जाकर CSS जोड़ सकेंगे ।
प्रत्येक सेल, पंक्ति और स्तंभ को पहचानने और उस पर कस्टम CSS लागू करने के लिए उनके निर्देशांक होते हैं। R पंक्ति को दर्शाता है, C स्तंभ को। यहाँ पंक्ति 1 (r1) और स्तंभ 4 (c4) इस प्रकार हैं: dtr1 dtc4
कोड मिरर का उपयोग करके सीएसएस कोड को रंगीन किया गया है। सीएसएस कोड कम कोड भी हो सकता है, यह भी काम करता है!
9. रिस्पॉन्सिव जूमला टेबल्स
क्या मेरी टेबल रिस्पॉन्सिव हैं या छोटे डिवाइसों पर स्क्रॉल का उपयोग करती हैं?
कॉलम छिपाना
Droptables प्राथमिकता टूल के ज़रिए रिस्पॉन्सिव डिज़ाइन को एक विकल्प के रूप में उपलब्ध कराया गया है। डिफ़ॉल्ट रूप से, रिस्पॉन्सिव फ़ीचर अक्षम रहता है, जिससे ओवरफ़्लो की समस्या आती है (हालांकि मोबाइल पर यह बहुत अच्छे से काम करता है)। कॉलम छिपाने के विकल्प का उपयोग करने के लिए, आपको मेनू फ़ॉर्मेट > रिस्पॉन्सिव विकल्प पर जाना होगा ।
रिस्पॉन्सिव मोड उन्नत है, आप मोबाइल साइज़ पर कॉलम छिपाने के लिए प्राथमिकता निर्धारित कर सकते हैं। कॉलम छिपे होने पर, एक मोबाइल मेनू प्रदर्शित होगा जिसमें कॉलम को दिखाने/छिपाने के लिए चेकबॉक्स होगा।
टेबल एडिट करते समय कॉलम का साइज़ फिक्स रहता है। यदि सभी कॉलम का साइज़ कंटेनर के लिए बहुत बड़ा है, तो ओवरफ़्लो की समस्या आएगी, और आप मोबाइल डिवाइस पर आसानी से स्क्रॉल कर पाएंगे।
स्क्रॉल सुविधा वाली तालिका (कम कॉलम के लिए बेहतर)
कॉलम छिपा हुआ टेबल (अधिक संख्या में कॉलम के लिए बेहतर)
दोहराया गया हेडर
यदि आप अपनी वेबसाइट के किसी छोटे से क्षेत्र में टेबल डालना चाहते हैं, तो यह एक और विकल्प है। इसके लिए आपको मेनू फॉर्मेट > रिस्पॉन्सिव ऑप्शंस पर जाना होगा। फिर रिस्पॉन्सिव टाइप > रिपीटेड हेडर चुनें ।
आपकी मांग के अनुसार अनुकूलन के विकल्प उपलब्ध होंगे:
- रिस्पॉन्सिव ब्रेकपॉइंट (px): पिक्सेल में ब्रेकपॉइंट मान चुनें ताकि यह निर्धारित किया जा सके कि टेबल कब रिस्पॉन्सिव मोड में बदलेगी।
- रिस्पॉन्सिव अधिकतम ऊंचाई (पिक्सेल): रिस्पॉन्सिव मोड सक्रिय होने पर, ब्रेकपॉइंट मान के आधार पर, एक अधिकतम ऊंचाई निर्धारित करें ताकि टेबल बहुत लंबी न हो जाए।
- रिस्पॉन्सिव मोड स्टाइलिंग: इस रिस्पॉन्सिव मोड के लिए डिफ़ॉल्ट स्टाइलिंग लागू करें या टेबल के रंगों का उपयोग करें।
उसके बाद, आप देख सकते हैं कि फ्रंटएंड पर टेबल कैसी दिखेगी।.
10. तालिका डाउनलोड करें
अपनी टेबल को सार्वजनिक रूप से साझा करने के लिए, मेनू टेबलऔर एक्सपोर्ट एक्सेल बटन विकल्प पर टिक करें। फ्रंटएंड पर डाउनलोड करते समय फ़ाइल का प्रकार *.xlsx होगा।
11. पृष्ठ संख्या
प्रत्येक टेबल संस्करण में मेनू फॉर्मेट > पेजिंग में आपको यह सुविधा मिलेगी । टॉगल बटन का उपयोग करके इसे सक्रिय करें और प्रति पृष्ठ प्रदर्शित होने वाली पंक्तियों की संख्या चुनें।
12. एकल सेल के लिए प्रारूप
में आप एक या अधिक सेल के लिए दिनांक और समय, मुद्रा और संख्या जैसे फॉर्मेट सेट कर सकते हैं। Droptablesसबसे पहले, आपको एक या अधिक सेल का चयन करना होगा। फिर मेनू फॉर्मेट > दिनांक और समय पर जाएं।
उसके बाद, मुद्राओं और संख्याओं के साथ भी यही प्रक्रिया दोहराई जा सकती है।
13. फ्रंटएंड पर तालिका प्रिंट करें
कभी-कभी आपको अपनी तालिका प्रिंट करने की आवश्यकता होती है। इसलिए फ्रंटएंड पर प्रिंट बटन दिखाने के लिए , सबसे पहले आपको मेनू टेबल पर जाना चाहिए और प्रिंट बटन विकल्प पर टिक करना चाहिए।

































