2024 में बेहतर HTML तालिकाएँ बनाने के लिए एक व्यापक मार्गदर्शिका

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

सही तालिकाओं को बनाना लगभग असंभव है जब तक कि उनमें इतनी कम वस्तुएँ न हों कि कोई समस्या उत्पन्न होने की संभावना न हो। त्रुटियों के प्रकार शामिल हो सकते हैं:

• टेक्स्ट रैपिंग गलत है
• औचित्य त्रुटियां
• स्क्रीन से टेबल रेंडरिंग
• स्क्रॉल समस्याओं
• रो ऊंचाई त्रुटियों
• स्तंभ की चौड़ाई त्रुटियां
• सामान्य कुरूपता या अनहोनी

इस लेख में हम इस तरह की समस्याओं से बचने के तरीके पर एक नज़र डालेंगे, इसलिए आपकी तालिकाओं में एक अच्छी छाप बनाने का सबसे अच्छा मौका है।

टालने की रणनीति से बचें

क्योंकि टेबल सही होना बहुत मुश्किल है, इसलिए कुछ लोग उनका उपयोग करने से बचने की कोशिश करते हैं। कुछ सामान्य रणनीतियाँ सीएसएस का उपयोग नकली तालिका बनाने के लिए कर रही हैं, और कोड में इसे लागू किए बिना डेटा तालिका की छवि का उपयोग कर रही हैं।

इन दोनों से बचने की रणनीतियों में खामियां हैं और इनसे बचना चाहिए। तालिका का अनुकरण करने के लिए सीएसएस का उपयोग करने से तालिका में निहित अर्थ संरचना की कमी होती है, जो प्रयोज्य और पहुंच संबंधी समस्याएं पैदा कर सकती है।

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

फ्रेमवर्क आपके दोस्त हैं

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

लगता है सब कुछ नहीं हैं

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

यह आपको यह याद दिलाने में भी मददगार हो सकता है कि अच्छे टेबल निर्माण के लिए टेबल को अच्छा दिखाने के अलावा और भी बहुत कुछ चाहिए। यह भी उपयोगी होना चाहिएformatआयन वितरण प्रणाली यदि तालिका का लक्ष्य संदेश देना नहीं हैformatआयन, तो आप जो कुछ भी कर रहे हैं उसके लिए आपको एक टेबल का उपयोग नहीं करना चाहिए।

पहुंच के लिए लक्ष्य

कुछ लोगों को मुद्रित पाठ देखने और पढ़ने में कठिनाई होती है, इसलिए उनके लिए तालिकाओं को सुलभ बनाना एक अच्छा विचार है। आप अपनी तालिकाओं को और अधिक सुलभ बनाने के बारे में जानने के लिए आवश्यक सब कुछ जान सकते हैं WebAIM.

तालिका घटकों को आईडी मान देने पर विचार करें

तालिका के प्रत्येक भाग (पंक्तियों, कोशिकाओं) पर अधिकतम नियंत्रण के लिए, आप उन्हें देने पर विचार कर सकते हैंdiviदोहरी आईडी मान। वर्ग मूल्यों को जोड़ने से आपको और भी अधिक लचीलापन मिलेगा।

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

टेबल मेकिंग की जटिलताओं में से एक यह है कि हम पंक्तियों की घोषणा करते हैं लेकिन कॉलम की नहीं। स्तंभों को गतिशील रूप से बनाया जाता है, जिनकी गणना प्रत्येक पंक्ति में आपके द्वारा कितने डेटा आइटम के अनुसार की जाती है। यही कारण है कि टेबल आपके पृष्ठ लोडिंग समय में जोड़ते हैं।

प्रभावी रूप से इसका मतलब है कि कॉलम केवल एक सार अर्थ में मौजूद है, पृष्ठ को प्रस्तुत करने से पहले, इसलिए आप उन्हें किसी भी प्रकार का संदर्भ नहीं दे सकते। एक पंक्ति पर पहला TD आइटम, उदाहरण के लिए, "FirstCol" देकर, आप सीधे कॉलम को संदर्भित करने का एक तरीका प्रदान करते हैं।

कॉम्पैक्ट टेबल सबसे अच्छी हैं

बड़े, उच्च दृश्यता वाले घटकों के साथ सब कुछ बनाना फैशनेबल हो गया है। एक पहुंच के दृष्टिकोण से, यह अद्भुत है। प्रयोज्य के संदर्भ में, हालांकि, यह हमेशा सबसे अच्छा तरीका नहीं है, क्योंकि यह समस्याओं का कारण बन सकता है।

बूटस्ट्रैप के डेवलपर्स ने प्रयोग किया responsive टेबल, लेकिन टेबल और responsiveएक साथ ठीक नहीं चल रहा है। अपनी तालिकाओं को शुरू से ही डिज़ाइन करना ताकि वे पोर्ट्रेट मोड में मोबाइल स्क्रीन पर फ़िट हों, एक स्मार्ट चाल है।

तालिकाओं को हमेशा स्क्रॉल किया जाना चाहिए

यह एक अच्छा अभ्यास है कि हमेशा एक टेबल के ओवरफ्लो मूल्य को ऑटो पर सेट करें, लेकिन टेबल पर ही नहीं। इसके बजाय, एक div के अंदर तालिका लपेटें, कुछ इस तरह से:

फिर इसमें बहुत सारे PHP कोड होते हैं जो टेबल बॉडी का निर्माण करते हैं, इसके साथ क्लोजिंग:

तालिका को स्क्रॉल करने का काम करने वाला हिस्सा पहली पंक्ति पर है, जहां टेबल-रैप डिव को एक निश्चित ऊंचाई दी गई है और इसका ओवरफ्लो मूल्य ऑटो पर सेट किया गया है। यदि आप मेज के चारों ओर एक आवरण के बजाय, टेबल पर ही ऐसा करते हैं, तो इसके अनपेक्षित प्रभाव हो सकते हैं।

जरूरत पड़ने पर हैवी हिटर में कॉल करें

सरल तालिकाओं के लिए, यह ओवरकिल है, लेकिन जब आपके पास एक तालिका होती है जो वास्तव में समायोज्य स्तंभ चौड़ाई और स्तंभ छँटाई जैसे फायदे की आवश्यकता होती है, तो कुछ शक्तिशाली jQuery के अनुप्रयोग हैं जो जटिल तालिकाओं के निर्माण के कार्य में मदद करने के लिए बनाए गए हैं।

वर्डप्रेस साइट के लिए सबसे प्रभावशाली विकल्प आपको चाहिए wpDataTables, एक वर्डप्रेस टेबल plugin जो टेबल, चार्ट और डेटा प्रबंधन के साथ आपके काम को आसान बनाता है। इसके साथ, आप बना सकते हैं responsive वर्डप्रेस टेबल और चार्ट।

RSI plugin बड़ी तालिकाओं के साथ, लाखों पंक्तियों तक, वास्तव में तेज़ी से काम करता है, लेकिन आप तालिकाओं पर बहुत सारे अनुकूलन और फ़िल्टरिंग भी कर सकते हैं जैसे कि आप Excel या Google स्प्रेडशीट में होंगे।

सबसे बड़ी और सबसे अच्छी संभावना है Flexigrid। यह जावा स्विंग टेबल के समान दिखता है, और इसी तरह से काम करता है।

फ्लेक्सिग्रिड की विशेषताएं आपकी ज़रूरत के लिए बहुत अधिक हो सकती हैं, इसलिए इस मामले में आप विचार कर सकते हैं TableSorter, जो काफी सरल है।

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

स्वचालित रूपांतरण उपकरण सामान्य रूप से सर्वोत्तम परिणाम नहीं देंगे

सीएमएस प्लग-इन उपलब्ध हैं जो आपको दस्तावेज़ तालिकाओं को HTML तालिकाओं में बदलने की अनुमति देते हैं। ये मैन्युअल रूप से टेबल बनाने के रूप में कहीं भी अच्छे नहीं हैं, इसलिए यदि आप बेहतर परिणाम चाहते हैं, तो इस तरह का ऑटोमेशन जाने का रास्ता नहीं है।

हालांकि, आपका अपना घर-निर्मित स्वचालन ठीक है

डेटाबेस से अपनी टेबल बनाने के लिए PHP का उपयोग करनाformatआयन हमेशा एक अच्छा विचार है, और निश्चित रूप से सब कुछ मैन्युअल रूप से टाइप करने के लिए बेहतर है। यहां अंतर यह है कि स्वचालन कैसे काम करता है, इस पर आपका पूरा नियंत्रण है।

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

उचित रूप से तालिकाओं का उपयोग करें और वे आपको पुरस्कृत करेंगे

अच्छी तालिकाएँ डिज़ाइन की जाती हैं, वे यूं ही नहीं होती हैं। जब आप एक in . डिज़ाइन करते हैंformatआयन वितरण प्रणाली, आप चाहते हैं कि यह कुशल और प्रभावी हो। सुनिश्चित करें कि आपकी तालिकाएँ ठीक उसी तरह से डिज़ाइन की गई हैं, और आपकी साइट को उनके समावेश से अधिकतम लाभ प्राप्त होगा।

हेडर इमेज सौजन्य से मैगी ऐपलटन