बेहतर HTML टेबल्स बनाना

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

हेडर इमेज सौजन्य से

बोगदान रैंकी

बोगदान इंसपायर्ड मैग का एक संस्थापक सदस्य है, जिसके पास इस अवधि में लगभग 6 वर्षों का अनुभव है। अपने खाली समय में वह शास्त्रीय संगीत का अध्ययन करना और दृश्य कला का पता लगाना पसंद करते हैं। वह भी Fixies के साथ काफी जुनूनी है। वह पहले से ही 5 का मालिक है।