मुख्य सामग्री पर जाएं

Droptables: स्टाइलिंग टेबल

1. तालिका में प्रारूपित करें

टूलबार पर, आप सेल के लिए स्टाइल सेट कर सकते हैं जैसे: फ़ॉन्ट, फ़ॉन्ट साइज़, टेक्स्ट स्टाइल, सेल का बैकग्राउंड कलर, टेक्स्ट कलर, सेल का हॉरिजॉन्टल और वर्टिकल अलाइनमेंट आदि। इसे एक सेल या कई सेल्स पर लागू किया जा सकता है।.

 

टेबल प्रारूप

 

पंक्ति की ऊँचाई और स्तंभ की चौड़ाई पिक्सेल में निर्धारित की जा सकती है। कृपया मेनू फॉर्मेट > कॉलम/पंक्ति का आकार लागू करें , फिर कॉलम का आकार बदलें / पंक्ति का आकार बदलें 'हो गया' बटन पर क्लिक करें

 

पंक्ति-स्तंभ-आकार

 

 

2. थीम और सॉर्टिंग विकल्प

मेनू थीम थीम चयन का मिलेगा । थीम लागू करने के लिए बस उस पर क्लिक करें।

 

थीम-चयन

 

यदि आपकी टेबल में पहले से डेटा मौजूद है और आप उस पर कोई थीम लागू करते हैं, तो सारा डेटा हटा दिया जाएगा। यदि आप किसी नई टेबल पर थीम लागू करते हैं, तो उदाहरण डेटा और स्टाइल जोड़ दिए जाएंगे और उन्हें संपादित किया जा सकता है।.

मेनू थीम > वैकल्पिक रंग में हेडर और फुटर स्टाइलिंग के साथ अपनी टेबल की लाइन को रंगने में मदद करती है । आप टेम्पलेट स्टाइल चुन सकते हैं या प्लगइन सेटिंग्स में जाकर अपनी खुद की स्टाइल बना सकते हैं।

 

वैकल्पिक-रंग

 

सॉर्टेबल पैरामीटर आपको फ्रंटएंड पर AJAX डेटा सॉर्टिंग करने की अनुमति देता है। आप इसे मेनू फॉर्मेट > सॉर्ट

 

सॉर्टेबल-और-फ़िल्टर-टेबल

 

टेबल अलाइनमेंट का मतलब है उस div को अलाइन करना जिसमें पूरी टेबल है, उदाहरण के लिए पूरी टेबल को सेंटर में लाना। आप इसे मेनू फॉर्मेट > टेबल अलाइनमेंट

 

टेबल-अलाइन

 

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

 

टेबल-हाइलाइटिंग

 

3. सेल पर टूलटिप जोड़ें

सेल पर माउस होवर करने पर टूलटिप भी उपलब्ध है (इसे कंपोनेंट विकल्पों से सक्रिय करना होगा)। टेबल के प्रत्येक सेल पर राइट क्लिक करने पर टूलटिप

 

टेबल-सेल-टूलटिप

 

आप टूलटिप की चौड़ाई पिक्सल में सेट कर सकते हैं। ऐसा करने पर आपको संपादन के लिए एक संपादक वाला टूलटिप दिखाई देगा।.

 

टूलटिप-संपादक

 

सामग्री जोड़ें और सहेजें, बस हो गया। माउस को होवर करने पर टूलटिप सार्वजनिक पृष्ठ पर प्रदर्शित होगा।.

 

टूलटिप-होवर

 

4. एसीएल और फ्रंटएंड प्रशासन

आप Joomla फ्रंटएंड से अपनी टेबल को मैनेज कर सकते हैं। Joomla मेनू मैनेजर से, एक नया मेनू आइटम जोड़ें और टाइप के रूप में 'टेबल मैनेज करें' चुनें टेम्पलेट के रूप में Droptables चुनें

 

मेनू-droptables

 

यहां आप फ्रंटएंड से Droptables मैनेजर का दृश्य देख सकते हैं।.

 

Droptables-फ्रंटएंड

 

नोट: फ्रंटएंड पर टेबल मैनेजर इंटरफेस को फुल स्क्रीन में प्रदर्शित करने के लिए, आपको टेम्पलेट स्टाइल > Droptables फ्रंटएंड का चयन करना चाहिए।

 

आप Joomla User Group ACL का उपयोग करके टेबल संपादन क्रियाओं को नियंत्रित कर सकते हैं। सबसे पहले, यह निर्धारित करने के लिए कि किसे टेबल देखने की अनुमति है, आपको Droptables कॉन्फ़िगरेशन में User Roles

 

फ्रंटएंड-टेबल-एडिशन

 

आप मेनू टेबल > टेबल एक्सेस से किसी टेबल के लिए स्वामी निर्धारित कर सकते हैं।

 

उपयोगकर्ता-समूह-एसीएल

 

5. पंक्ति और स्तंभ को स्थिर करना

स्तंभ जमना

कॉलम फ्रीज़ करने का विकल्प मेनू फॉर्मेट > रिस्पॉन्सिव ऑप्शंस । आप अधिकतम 5 कॉलम फ्रीज़ कर सकते हैं। गिनती पहले कॉलम से शुरू होती है।

 

फ्रीज-कॉलम

 

कॉलम/पंक्ति को स्थिर करने के लिए एक अतिरिक्त विकल्प है जो आपको टेबल की ऊंचाई तय करने की सुविधा देता है (क्योंकि आपके टेबल कंटेनर की ऊंचाई अनंत हो सकती है)।.

 

टेबल की ऊंचाई

 

जब आप फ्रीज करने के लिए कॉलम का चयन कर लेते हैं, तो आप अपनी टेबल पर स्क्रॉल कर पाएंगे और हमेशा स्थिर कॉलम प्रदर्शित होगा।.

 

फिक्स-लाइन-डिस्प्लेइंग

 

पंक्ति जमना

आप इसे मेनू फॉर्मेट > टेबल हेडर , यहाँ से आप विकल्प को चालू कर सकते हैं और पंक्तियों को फ्रीज करने के लिए सेट कर सकते हैं (अधिकतम 5 पंक्तियाँ)।

 

पंक्ति-फ्रीज़-टेबल-हेडर

 

यदि आप टेबल की ऊंचाई निर्धारित करना चाहते हैं, तो कृपया रिस्पॉन्सिव विकल्पों पर वापस जाएं।

इसके बाद सेटिंग के अनुसार फ्रंटएंड पर पहली पंक्ति स्थिर हो जाएगी।.

 

पंक्ति-फ्रीज़

 

6. कॉलम डेटा को फ़िल्टर करना

फॉर्मेट > फ़िल्टर में फ़िल्टरिंग का विकल्प उपलब्ध है । सार्वजनिक डेटा फ़िल्टरिंग फ़ील्ड को सक्रिय करने के लिए क्लिक करके आप इसे सक्रिय कर सकते हैं।

 

सॉर्ट-फ़िल्टर

 

फ़िल्टर के उदाहरण:

 

डेटा-फ़िल्टर

 

7. सेल पैडिंग और बॉर्डर त्रिज्या

आप टूलबार पर बॉर्डर आइकन पा सकते हैं जो सेल पर पैडिंग और बॉर्डर रेडियस को समायोजित करने में मदद करता है।.

 

पैडिंग-बॉर्डर

 

 

8. कस्टम सीएसएस

मेनू फॉर्मेट > कस्टम CSS में जाकर CSS जोड़ सकेंगे ।

 

कस्टम-सीएसएस

 

प्रत्येक सेल, पंक्ति और स्तंभ को पहचानने और उस पर कस्टम CSS लागू करने के लिए उनके निर्देशांक होते हैं। R पंक्ति को दर्शाता है, C स्तंभ को। यहाँ पंक्ति 1 (r1) और स्तंभ 4 (c4) इस प्रकार हैं: dtr1 dtc4

 

सीएसएस-निर्देशांक

 

कोड मिरर का उपयोग करके सीएसएस कोड को रंगीन किया गया है। सीएसएस कोड कम कोड भी हो सकता है, यह भी काम करता है!

 

सीएसएस-कस्टम-टेबल

 

9. रिस्पॉन्सिव जूमला टेबल्स

क्या मेरी टेबल रिस्पॉन्सिव हैं या छोटे डिवाइसों पर स्क्रॉल का उपयोग करती हैं?

कॉलम छिपाना

Droptables प्राथमिकता टूल के ज़रिए रिस्पॉन्सिव डिज़ाइन को एक विकल्प के रूप में उपलब्ध कराया गया है। डिफ़ॉल्ट रूप से, रिस्पॉन्सिव फ़ीचर अक्षम रहता है, जिससे ओवरफ़्लो की समस्या आती है (हालांकि मोबाइल पर यह बहुत अच्छे से काम करता है)। कॉलम छिपाने के मेनू फ़ॉर्मेट > रिस्पॉन्सिव विकल्प पर जाना होगा

 

रिस्पॉन्सिव-हाइडिंग-कॉल

 

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

स्क्रॉल सुविधा वाली तालिका (कम कॉलम के लिए बेहतर)

 

रिस्पॉन्सिव-टेबल-स्क्रॉल

 

कॉलम छिपा हुआ टेबल (अधिक संख्या में कॉलम के लिए बेहतर)

 

रिस्पॉन्सिव-टेबल-कॉलम-हाइड

 

दोहराया गया हेडर

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

 

दोहराया-शीर्षक

 

आपकी मांग के अनुसार अनुकूलन के विकल्प उपलब्ध होंगे:

  • रिस्पॉन्सिव ब्रेकपॉइंट (px): पिक्सेल में ब्रेकपॉइंट मान चुनें ताकि यह निर्धारित किया जा सके कि टेबल कब रिस्पॉन्सिव मोड में बदलेगी।
  • रिस्पॉन्सिव अधिकतम ऊंचाई (पिक्सेल): रिस्पॉन्सिव मोड सक्रिय होने पर, ब्रेकपॉइंट मान के आधार पर, एक अधिकतम ऊंचाई निर्धारित करें ताकि टेबल बहुत लंबी न हो जाए।
  • रिस्पॉन्सिव मोड स्टाइलिंग: इस रिस्पॉन्सिव मोड के लिए डिफ़ॉल्ट स्टाइलिंग लागू करें या टेबल के रंगों का उपयोग करें।

उसके बाद, आप देख सकते हैं कि फ्रंटएंड पर टेबल कैसी दिखेगी।.

 

रिपीटेड-हेडर-फ्रंटएंड

 

10. तालिका डाउनलोड करें

अपनी टेबल को सार्वजनिक रूप से साझा करने के लिए, मेनू टेबल और एक्सपोर्ट एक्सेल बटन विकल्प पर टिक करें। फ्रंटएंड पर डाउनलोड करते समय फ़ाइल का प्रकार *.xlsx होगा।

 

निर्यात-एक्सेल

 

11. पृष्ठ संख्या

मेनू फॉर्मेट > पेजिंग में आपको यह सुविधा मिलेगी । टॉगल बटन का उपयोग करके इसे सक्रिय करें और प्रति पृष्ठ प्रदर्शित होने वाली पंक्तियों की संख्या चुनें।

 

पृष्ठीकरण-विकल्प

 

12. एकल सेल के लिए प्रारूप 

Droptables में आप एक या अधिक सेल के लिए दिनांक और समय, मुद्रा और संख्या जैसे फॉर्मेट सेट कर सकते हैं। सबसे पहले, आपको एक या अधिक सेल का चयन करना होगा। फिर मेनू फॉर्मेट > दिनांक और समय पर जाएं।

 

दिनांक-समय-कोशिकाएँ

 

उसके बाद, मुद्राओं और संख्याओं के साथ भी यही प्रक्रिया दोहराई जा सकती है।

 

13. फ्रंटएंड पर तालिका प्रिंट करें

फ्रंटएंड पर प्रिंट बटन दिखाने के लिए मेनू टेबल और प्रिंट बटन विकल्प पर टिक करना चाहिए।

 

प्रिंट-बटन

An Error Occurred: Whoops, looks like something went wrong.

Sorry, there was a problem we could not recover from.

The server returned a "500 - Whoops, looks like something went wrong."

Help me resolve this