'टेबल' एलिमेंट एट्रिब्यूट्स (एचटीएमएल) का उपयोग कैसे करें

HTML तालिका विशेषताएँ आपको HTML तालिकाओं पर बहुत अधिक नियंत्रण प्रदान करती हैं। तालिकाओं को अधिक रुचिकर बनाने और आपके पृष्ठ का रूप बदलने के लिए उनमें बहुत सारी विशेषताएँ उपलब्ध हैं।

HTML तालिका तत्व गुण

में एचटीएमएल 5 तत्व वैश्विक विशेषताओं और एक अन्य विशेषता का उपयोग करता है और यह केवल 1 या खाली (यानी सीमा = "") के मान में बदल गया है। यदि आप बॉर्डर की चौड़ाई बदलना चाहते हैं, तो आपको बॉर्डर-चौड़ाई का उपयोग करना चाहिए सीएसएस संपत्ति.

मान्य HTML5 तालिका विशेषताओं के बारे में जानने के लिए नीचे देखें।

ऐसी कई विशेषताएँ भी हैं जो HTML 4.01 विनिर्देशन का हिस्सा हैं जो HTML5 में अप्रचलित हो गई हैं:

• — तालिका के TD और TH तत्वों पर CSS पैडिंग गुण का उपयोग करें।
• - टेबल पर CSS प्रॉपर्टी बॉर्डर-स्पेसिंग का इस्तेमाल करें।
• -सीएसएस शैलियों का उपयोग करें सीमा-रंग: काला; और मेज पर सीमा-शैली।
• -सीएसएस शैलियों का उपयोग करें सीमा-रंग: काला; और सीमा-शैली तालिका के उपयुक्त तत्वों पर।
• —इसके बजाय, आपको एक कैप्शन में तालिका की संरचना का वर्णन करना चाहिए या पूरी तालिका को एक आकृति में रखना चाहिए और इसे एक FIGCAPTION में वर्णित करना चाहिए। वैकल्पिक रूप से, आप तालिका की संरचना को सरल बना सकते हैं ताकि किसी स्पष्टीकरण की आवश्यकता न हो।
  instagram viewer
• -सीएसएस चौड़ाई संपत्ति का प्रयोग करें।

और एक विशेषता जिसे HTML 4.01 में पदावनत किया गया था और HTML5 में भी अप्रचलित है।

• संरेखित करें—इसके बजाय CSS मार्जिन गुण का उपयोग करें।

ऐसी कई विशेषताएँ भी हैं जो किसी भी HTML विनिर्देश का हिस्सा नहीं हैं। इन विशेषताओं का उपयोग करें यदि आप जानते हैं कि आपके द्वारा समर्थित ब्राउज़र उन्हें संभाल सकते हैं और आपको मान्य HTML की परवाह नहीं है।

• - इसके बजाय CSS संपत्ति पृष्ठभूमि-रंग का उपयोग करें।
• बॉर्डरकलर- इसके बजाय CSS प्रॉपर्टी बॉर्डर-कलर का उपयोग करें।
• बॉर्डरकलरलाइट- इसके बजाय CSS प्रॉपर्टी बॉर्डर-कलर का उपयोग करें।
• Bordercolordark—इसके बजाय CSS गुण सीमा-रंग का उपयोग करें।
• cols—इस विशेषता का कोई विकल्प नहीं है।
• ऊंचाई - इसके बजाय सीएसएस संपत्ति ऊंचाई का प्रयोग करें।
• —इसके बजाय CSS संपत्ति मार्जिन का उपयोग करें।
• —इसके बजाय CSS संपत्ति व्हाइट-स्पेस का उपयोग करें।
• - इसके बजाय CSS संपत्ति का उपयोग लंबवत-संरेखित करें।

HTML5 तालिका तत्व गुण

जैसा कि हमने ऊपर उल्लेख किया है, वैश्विक विशेषताओं से परे केवल एक विशेषता है, जो HTML5 TABLE तत्व पर मान्य है: सीमा।

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

सीमा विशेषता जोड़ने के लिए, यदि कोई सीमा है तो आप मान को 1 पर सेट करते हैं और यदि नहीं है तो खाली (या विशेषता छोड़ दें)। अधिकांश ब्राउज़र बिना किसी सीमा के 0 का समर्थन करेंगे, और किसी भी अन्य पूर्णांक मान (2, 3, 30, 500, आदि) को पिक्सेल में सीमा की चौड़ाई घोषित करने के लिए समर्थन करेंगे, लेकिन यह HTML5 में अप्रचलित है। इसके बजाय, आपको सीमा की चौड़ाई और अन्य शैलियों को परिभाषित करने के लिए CSS बॉर्डर शैली गुणों का उपयोग करना चाहिए।

बॉर्डर वाली टेबल बनाने के लिए लिखें:

सीमा = "1">
यह एक बॉर्डर वाली टेबल है
यह तालिका विशेषताओं का वर्णन करता है जो HTML 4.01 में मान्य हैं, लेकिन अप्रचलित हैं एचटीएमएल 5. यदि आप अभी भी HTML 4.01 दस्तावेज़ लिखते हैं, तो आप इन विशेषताओं का उपयोग कर सकते हैं, लेकिन उनमें से अधिकांश के पास ऐसे विकल्प हैं जो आपके द्वारा HTML5 पर जाने पर आपके पृष्ठों को भविष्य के लिए अधिक सुरक्षित बना देंगे।

मान्य HTML 4.01 विशेषताएँ

ऊपर वर्णित विशेषता। HTML5 से HTML 4.01 में एकमात्र अंतर यह है कि आप पिक्सेल में बॉर्डर की चौड़ाई को परिभाषित करने के लिए कोई भी पूर्णांक (0, 1, 2, 15, 20, 200, आदि) निर्दिष्ट कर सकते हैं।

5px बॉर्डर वाली तालिका बनाने के लिए, लिखें:

सीमा = "5">

इस तालिका में 5px की सीमा है।

विशेषता सेल बॉर्डर और सेल की सामग्री के बीच स्थान की मात्रा को परिभाषित करती है। डिफ़ॉल्ट दो पिक्सेल है। यदि आप सामग्री और सीमाओं के बीच कोई स्थान नहीं चाहते हैं तो सेलपैडिंग को 0 पर सेट करें।

सेल पैडिंग को 20 पर सेट करने के लिए, लिखें:

सेलपैडिंग = "20">

इस तालिका में 20 की सेलपैडिंग है।

सेल बॉर्डर को 20 पिक्सेल से अलग किया जाएगा।

सेलपैडिंग वाली तालिका का उदाहरण देखें।

विशेषता तालिका कक्षों और कक्ष सामग्री के बीच स्थान की मात्रा को परिभाषित करती है। सेलपैडिंग की तरह, डिफ़ॉल्ट दो पिक्सेल पर सेट होता है, इसलिए यदि आप कोई सेल रिक्ति नहीं चाहते हैं तो आपको इसे 0 पर सेट करना होगा।

तालिका में सेल रिक्ति जोड़ने के लिए, लिखें:

सेलस्पेसिंग = "20">

इस तालिका में 20 का सेलस्पेस है।

कोशिकाओं को 20 पिक्सेल से अलग किया जाएगा।

विशेषता यह पहचानती है कि टेबल के बाहर के बॉर्डर के कौन से हिस्से दिखाई देंगे। आप अपनी टेबल को चारों तरफ से फ्रेम कर सकते हैं, किसी एक तरफ, ऊपर और नीचे, बाएँ और दाएँ, या कोई भी नहीं।

यहाँ केवल बाईं ओर की सीमा वाली तालिका के लिए HTML है:

फ्रेम = "एलएचएस">
यह मेज़
होगा
केवल
बाईं ओर फंसाया।
और नीचे के फ्रेम के साथ एक और उदाहरण:

फ्रेम = "नीचे">
इस टेबल के नीचे एक फ्रेम है।
फ्रेम के साथ कुछ टेबल देखें।

विशेषता फ्रेम विशेषता के समान है, केवल यह तालिका की कोशिकाओं के चारों ओर की सीमाओं को प्रभावित करती है। आप सभी कक्षों पर, स्तंभों के बीच, TBODY और TFOOT या कोई नहीं जैसे समूहों के बीच नियम निर्धारित कर सकते हैं।

केवल पंक्तियों के बीच की रेखाओं वाली तालिका बनाने के लिए, लिखें:

नियम = "पंक्तियाँ">
इस 4x4 तालिका में है
पंक्तियाँ स्तंभ नहीं
के साथ उल्लिखित
नियम विशेषता।
और दूसरा स्तंभों के बीच की रेखाओं के साथ:

नियम = "कॉल्स">
यह है
एक मेज
जहां
कॉलम
कर रहे हैं
पर प्रकाश डाला
विशेषता जानकारी प्रदान करती है स्क्रीन रीडर और अन्य उपयोगकर्ता एजेंटों के लिए तालिका के बारे में जिन्हें टेबल पढ़ने में समस्या हो सकती है। सारांश विशेषता का उपयोग करने के लिए, आप तालिका का एक संक्षिप्त विवरण लिखते हैं और उसे विशेषता के मान के रूप में रखते हैं। सारांश अधिकांश मानक वेब ब्राउज़र में वेब पेज पर प्रदर्शित नहीं होगा।

सारांश के साथ एक साधारण तालिका लिखने का तरीका यहां दिया गया है:

सारांश = "यह एक नमूना तालिका है जिसमें भराव की जानकारी है। इस तालिका का उद्देश्य सारांश प्रदर्शित करना है।">

कॉलम 1 पंक्ति 1.

कॉलम 2 पंक्ति 1.

कॉलम 1 पंक्ति 2.

कॉलम 2 पंक्ति 2.

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

पिक्सेल में एक विशिष्ट चौड़ाई वाली तालिका बनाने के लिए, लिखें:

चौड़ाई = "300">

यह तालिका उस कंटेनर की चौड़ाई का 80% है जिसमें वह है।

और एक चौड़ाई वाली तालिका बनाने के लिए जो मूल तत्व का प्रतिशत है, लिखें:

चौड़ाई = "८०%">

यह तालिका उस कंटेनर की चौड़ाई का 80% है जिसमें वह है।

बहिष्कृत HTML 4.01 तालिका विशेषता

तालिका तत्व की एक विशेषता है जो HTML 4.01 में बहिष्कृत है और HTML5 में अप्रचलित है: संरेखित करें। यह विशेषता आपको यह सेट करने देती है कि पृष्ठ के बगल में स्थित पाठ के सापेक्ष तालिका कहाँ स्थित होनी चाहिए। यह विशेषता HTML 4.01 में बहिष्कृत कर दी गई है, और आपको इसका उपयोग करने से बचना चाहिए। इसके बजाय, आपको CSS गुण या मार्जिन-लेफ्ट: ऑटो; और मार्जिन-दाएं: ऑटो; शैलियाँ। फ्लोट प्रॉपर्टी आपको एक परिणाम देती है जो प्रदान की गई संरेखण विशेषता के करीब है, लेकिन यह शेष पृष्ठ सामग्री प्रदर्शित करने के तरीके को प्रभावित कर सकती है। मार्जिन-दाएं: ऑटो; और मार्जिन-बाएं: ऑटो; W3C एक विकल्प के रूप में क्या अनुशंसा करता है।

संरेखण विशेषता का उपयोग करके एक बहिष्कृत उदाहरण यहां दिया गया है:

संरेखित करें = "दाएं">

यह तालिका सही संरेखित है।

पाठ इसके चारों ओर बाईं ओर बहता है।

और मान्य (गैर-बहिष्कृत) HTML के साथ समान प्रभाव प्राप्त करने के लिए, लिखें:

शैली = "फ्लोट: दाएं;">

यह तालिका सही संरेखित है।

पाठ इसके चारों ओर बाईं ओर बहता है।

अप्रचलित तालिका गुण

पिछली जानकारी HTML तत्व की विशेषताओं का वर्णन करती है जो HTML 4.01 में मान्य हैं लेकिन HTML5 में अप्रचलित हैं।

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

हम इन विशेषताओं का उपयोग करने की अनुशंसा नहीं करते हैं अपने एचटीएमएल टेबल पर।

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

इस विशेषता का बेहतर विकल्प शैली गुण है।

किसी तालिका की पृष्ठभूमि का रंग बदलने के लिए, लिखें:

शैली = "पृष्ठभूमि-रंग: #ccc;">

इस तालिका की पृष्ठभूमि धूसर है।

bgcolor विशेषता के समान, बॉर्डरकलर विशेषता आपको विशेषता का रंग बदलने देती है। यह विशेषता केवल इंटरनेट एक्सप्लोरर द्वारा समर्थित है। इसके बजाय, आपको सीमा-रंग शैली की संपत्ति का उपयोग करना चाहिए।

अपनी तालिका के बॉर्डर का रंग बदलने के लिए, लिखें:

शैली = "सीमा-रंग: लाल;">
इस तालिका में एक लाल सीमा है।
आपको अपनी टेबल के चारों ओर एक 3D बॉर्डर बनाने की अनुमति देने के लिए इंटरनेट एक्सप्लोरर में बॉर्डरकलरलाइट और बॉर्डरकलरडार्क विशेषताओं को शामिल किया गया था। हालाँकि, IE8 और बाद के संस्करण के रूप में, यह केवल IE7 मानक मोड में समर्थित है और विचित्र मोड. Microsoft बताता है कि ये गुण अब समर्थित नहीं हैं।

थोड़े समय के लिए, TABLE तत्व पर cols विशेषता का प्रस्ताव ब्राउज़रों को यह जानने में मदद करने के लिए किया गया था कि तालिका में कितने कॉलम हैं। आधार यह था कि इससे बड़ी तालिकाओं के प्रतिपादन में तेजी लाने में मदद मिलेगी। हालाँकि यह केवल इंटरनेट एक्सप्लोरर द्वारा लागू किया गया था, और IE8 और ऊपर के रूप में, यह केवल IE7 मानक मोड और क्विर्क मोड में समर्थित है।

चूंकि चौड़ाई विशेषता है (एचटीएमएल 5 में अप्रचलित) कई लोगों ने माना कि टेबल के लिए भी ऊंचाई विशेषता थी। लेकिन चूँकि तालिकाएँ अपनी सामग्री की चौड़ाई या CSS या चौड़ाई विशेषता में परिभाषित चौड़ाई के अनुरूप होती हैं, इसलिए ऊँचाई को सीमित नहीं किया जा सकता है। तो इसके बजाय, ब्राउज़र ने ऊंचाई विशेषता को तालिका की न्यूनतम ऊंचाई को परिभाषित करने की अनुमति दी। यदि तालिका उस ऊँचाई से ऊँची होती, तो वह ऊँची प्रदर्शित होती। लेकिन आपको संपत्ति का उपयोग करना चाहिए।

सीएसएस ऊंचाई संपत्ति के साथ आप ऊंचाई को बाधित कर सकते हैं यदि आप सीएसएस संपत्ति का उपयोग करते हैं और साथ ही यह परिभाषित करने के लिए कि किसी अतिरिक्त सामग्री के साथ क्या होता है।

टेबल पर न्यूनतम ऊंचाई निर्धारित करने के लिए, लिखें:

शैली = "ऊंचाई: 30em;">

यह तालिका कम से कम 30 ईएमएस ऊंची है।

तालिका के बाएँ/दाएँ पक्ष (hspace) और ऊपर/नीचे (vspace) के चारों ओर दो विशेषताएँ और अतिरिक्त स्थान। आपको इसके बजाय स्टाइल प्रॉपर्टी का उपयोग करना चाहिए।

वर्टिकल स्पेस को 20 पिक्सल और हॉरिजॉन्टल स्पेस को 40 पिक्सल पर सेट करने के लिए लिखें:

शैली = "मार्जिन: 20px 40px;"

इस तालिका में 20 पिक्सेल का बनाम स्थान और 40 पिक्सेल का hspace है।

विशेषता एक बूलियन विशेषता है जो परिभाषित करती है कि तालिका की सामग्री को मूल तत्व या विंडो के किनारे पर लपेटना चाहिए या क्षैतिज स्क्रॉलिंग को बाध्य करना चाहिए। इसके बजाय, आपको CSS प्रॉपर्टी का उपयोग करके प्रत्येक टेबल सेल की रैपिंग विशेषताओं को परिभाषित करना चाहिए।

बहुत सारे टेक्स्ट वाले कॉलम को रैप न करने के लिए, लिखें:

style="white-space: nowrap;">यह एक टन सामग्री वाला कॉलम है। लेकिन भले ही यह कंटेनर से चौड़ा हो, टेक्स्ट को अगली पंक्ति में नहीं लपेटना चाहिए, बल्कि सभी सामग्री को देखने के लिए ब्राउज़र विंडो को क्षैतिज रूप से स्क्रॉल करने के लिए मजबूर करना चाहिए।
अंत में, विशेषता परिभाषित करती है कि प्रत्येक सेल की सामग्री को सेल के भीतर लंबवत रूप से कैसे संरेखित करना चाहिए। इस अमान्य विशेषता के बजाय, आपको उस प्रत्येक सेल पर CSS गुण का उपयोग करना चाहिए जिसका संरेखण आप बदलना चाहते हैं। आप इस शैली के प्रभावों को तब तक नोटिस नहीं करेंगे जब तक कि सेल की सामग्री अन्य, बड़े सेल द्वारा बनाए गए उपलब्ध स्थान से कम न हो।

किसी सेल को नीचे से संरेखित करने के लिए बाध्य करने के लिए (बजाय बीच में, डिफ़ॉल्ट के रूप में), लिखें:

यह सेल बाकियों की तुलना में लंबी है और इसलिए ऊंचाई को लंबा करने के लिए बाध्य करेगी। तो आप देखेंगे कि लंबवत संरेखित सेल नीचे की ओर संरेखित है।
शैली = "ऊर्ध्वाधर-संरेखण: नीचे;"> नीचे की सामग्री।
बीच में सामग्री।