तालिका विशेषताओं को सीखकर HTML तालिकाओं से अधिक लाभ प्राप्त करना
एचटीएमएल टेबल विशेषताएँ आपको HTML तालिकाओं पर बहुत अधिक नियंत्रण देती हैं। उन्हें अधिक दिलचस्प बनाने और अपने पृष्ठ के रूप को बदलने के लिए तालिकाओं के लिए बहुत सारी विशेषताएं उपलब्ध हैं।
एचटीएमएल टेबल तत्व गुण
एचटीएमएल 5 में तत्व वैश्विक विशेषताओं और एक अन्य विशेषता का उपयोग करता है:। और यह केवल 1 या खाली (यानी सीमा = "") का मान बदल गया है। यदि आप सीमा की चौड़ाई बदलना चाहते हैं, तो आपको सीमा-चौड़ाई सीएसएस संपत्ति का उपयोग करना चाहिए।
वैध HTML5 तालिका विशेषताओं के बारे में जानने के लिए नीचे देखें।
ऐसे कई विशेषताएं भी हैं जो HTML 4.01 विनिर्देश का हिस्सा हैं जो HTML5 में अप्रचलित हो गई है:
- - तालिका के टीडी और TH तत्वों पर सीएसएस पैडिंग गुण का उपयोग करें।
- - तालिका पर सीएसएस संपत्ति सीमा-दूरी का उपयोग करें।
- - सीएसएस शैलियों का उपयोग सीमा-रंग: काला; और मेज पर सीमा-शैली।
- - सीएसएस शैलियों का उपयोग सीमा-रंग: काला; और तालिका के उपयुक्त तत्वों पर सीमा-शैली।
- - इसके बजाय, आपको तालिका में तालिका की संरचना का वर्णन करना चाहिए या पूरी तालिका को एक फिगर में रखना चाहिए और इसे एक फ़िगैप्शन में वर्णित करना चाहिए। वैकल्पिक रूप से, आप तालिका की संरचना को सरल बना सकते हैं ताकि कोई स्पष्टीकरण की आवश्यकता न हो।
- सीएसएस चौड़ाई संपत्ति का उपयोग करें।
और एक विशेषता जो HTML 4.01 में बहिष्कृत थी और HTML5 में भी अप्रचलित है।
एचटीएमएल 4.01 टेबल गुणों के बारे में और जानें।
- संरेखित करें - इसके बजाय सीएसएस मार्जिन संपत्ति का उपयोग करें।
ऐसे कई गुण भी हैं जो किसी भी HTML विनिर्देश का हिस्सा नहीं हैं।
इन विशेषताओं का उपयोग करें यदि आप जानते हैं कि आपके द्वारा समर्थित ब्राउज़र उन्हें संभाल सकते हैं और आपको वैध HTML की परवाह नहीं है।
- - इसके बजाय सीएसएस संपत्ति पृष्ठभूमि रंग का उपयोग करें।
- सीमा रंग - इसके बजाय सीएसएस संपत्ति सीमा-रंग का उपयोग करें।
- सीमा रंगीन रोशनी - इसके बजाय सीएसएस संपत्ति सीमा-रंग का उपयोग करें।
- सीमाcolordark- इसके बजाय सीएसएस संपत्ति सीमा रंग का उपयोग करें।
- cols- इस विशेषता का कोई विकल्प नहीं है।
- ऊंचाई- इसके बजाय सीएसएस संपत्ति ऊंचाई का उपयोग करें।
- - इसके बजाय सीएसएस संपत्ति मार्जिन का उपयोग करें।
- - इसके बजाय सीएसएस संपत्ति मार्जिन का उपयोग करें।
- - इसके बजाय सीएसएस संपत्ति सफेद जगह का उपयोग करें।
- - इसके बजाय सीएसएस संपत्ति लंबवत-संरेखण का उपयोग करें।
ब्राउज़र विशिष्ट तालिका विशेषताओं के बारे में और जानें।
एचटीएमएल 5 टेबल तत्व गुण
जैसा कि हमने उपर्युक्त उल्लेख किया है, वैश्विक विशेषताओं से परे केवल एक विशेषता है, जो एक HTML5 टैबलेट तत्व पर मान्य है: सीमा।
सीमा विशेषता का उपयोग पूरे टेबल और उसके भीतर की सभी कोशिकाओं के चारों ओर एक सीमा को परिभाषित करने के लिए किया जाता है। इस बात के बारे में कुछ सवाल था कि इसे HTML5 विनिर्देशन में शामिल किया जाएगा, लेकिन यह तब भी बना रहा क्योंकि यह शैली संरचनाओं से परे तालिका संरचना के बारे में जानकारी प्रदान करता था।
सीमा विशेषता जोड़ने के लिए, यदि कोई सीमा नहीं है और खाली है (या विशेषता छोड़ दें) तो मान को 1 पर सेट करें। अधिकतर ब्राउज़र सीमावर्ती चौड़ाई को पिक्सेल में घोषित करने के लिए किसी भी सीमा के लिए 0 और किसी अन्य पूर्णांक मान (2, 3, 30, 500, आदि) का समर्थन नहीं करेंगे, लेकिन यह HTML5 में अप्रचलित है। इसके बजाय, आपको सीमा चौड़ाई और अन्य शैलियों को परिभाषित करने के लिए सीएसएस सीमा शैली गुणों का उपयोग करना चाहिए।
सीमा के साथ एक टेबल बनाने के लिए, लिखें:
<टेबल सीमा = "1" >
यह सीमा वाला एक तालिका है
एचटीएमएल 4.01 विशेषताएं हैं जो एचटीएमएल 5 में अप्रचलित हैं। यदि आप HTML 4.01 दस्तावेज़ लिखने की योजना बनाते हैं, तो आप उन्हें सीख सकते हैं, अन्यथा, आप उन्हें अनदेखा कर सकते हैं। इनमें से अधिकतर गुणों में ऊपर वर्णित विकल्प हैं।
हम उस तत्व के गुणों का वर्णन करते हैं जो HTML5 (और HTML 4.01) में मान्य हैं। यह उन तालिका विशेषताओं का वर्णन करता है जो HTML 4.01 में मान्य हैं, लेकिन HTML5 में अप्रचलित हैं। यदि आप अभी भी HTML 4.01 दस्तावेज़ लिखते हैं, तो आप इन विशेषताओं का उपयोग कर सकते हैं, लेकिन उनमें से अधिकतर विकल्प हैं जो आपके पृष्ठों को एचटीएमएल 5 पर जाने के लिए भविष्य में प्रमाणित करेंगे।
मान्य एचटीएमएल 4.01 विशेषताएं
हमने ऊपर वर्णित विशेषता।
एचटीएमएल 5 से एचटीएमएल 4.01 में एकमात्र अंतर यह है कि आप पिक्सेल में सीमा की चौड़ाई को परिभाषित करने के लिए किसी भी पूर्ण पूर्णांक (0, 1, 2, 15, 20, 200, आदि) निर्दिष्ट कर सकते हैं।
5 पीएक्स सीमा के साथ एक टेबल बनाने के लिए, लिखें:
<टेबल सीमा = "5" >
इस तालिका में 5px सीमा है।
सीमाओं के साथ दो तालिकाओं का एक उदाहरण देखें।
गुण सेल सीमाओं और सेल की सामग्री के बीच की मात्रा को परिभाषित करता है। डिफ़ॉल्ट दो पिक्सल है। यदि आप सामग्री और सीमाओं के बीच कोई जगह नहीं चाहते हैं तो सेलपैडिंग को 0 पर सेट करें।
सेल पैडिंग को 20 तक सेट करने के लिए, लिखें:
<टेबल सेलपैडिंग = "20" >
इस तालिका में 20 का सेलपैडिंग है।
सेल सीमाओं को 20 पिक्सेल से अलग किया जाएगा।
सेलपैडिंग के साथ एक तालिका का एक उदाहरण देखें
विशेषता तालिका कक्षों और सेल सामग्री के बीच की मात्रा को परिभाषित करती है। सेलपैडिंग की तरह, डिफ़ॉल्ट को दो पिक्सल पर सेट किया जाता है, इसलिए यदि आप कोई सेल स्पेसिंग नहीं चाहते हैं तो आपको इसे 0 पर सेट करना होगा।
किसी तालिका में सेल स्पेसिंग जोड़ने के लिए, लिखें:
<टेबल सेलस्पेसिंग = "20" >
इस तालिका में 20 का सेलस्पेसिंग है।
कक्ष 20 पिक्सेल से अलग हो जाएंगे।
सेलस्पेसिंग के साथ एक टेबल देखें
विशेषता यह दर्शाती है कि तालिका के बाहर के आस-पास की सीमा के कौन से भाग दिखाई देंगे। आप अपनी मेज को सभी चार तरफ, किसी एक तरफ, ऊपर और नीचे, बाएं और दाएं, या कोई भी फ्रेम कर सकते हैं।
यहां बाईं ओर सीमा वाली तालिका के लिए HTML है:
<टेबल सीमा = "1" फ्रेम = "lhs" >
यह तालिका
होगा
केवल
बायीं ओर फ़्रेम किया गया।
और नीचे फ्रेम के साथ एक और उदाहरण:
<टेबल सीमा = "1" फ्रेम = "नीचे" >
इस तालिका में नीचे एक फ्रेम है।
फ्रेम के साथ कुछ टेबल देखें
विशेषता फ्रेम विशेषता के समान है, केवल यह तालिका की कोशिकाओं के चारों ओर सीमाओं को प्रभावित करती है। आप टीबीओडीवाई और टीएफओओटी या किसी भी समूह जैसे समूहों के बीच कॉलम के बीच सभी कोशिकाओं पर नियम सेट कर सकते हैं।
पंक्तियों के बीच केवल लाइनों के साथ एक टेबल बनाने के लिए, लिखें:
<टेबल सीमा = "1" नियम = "पंक्तियां" >
यह 4x4 तालिका है
पंक्तियां कॉलम नहीं
के साथ उल्लिखित
नियम विशेषता।
और कॉलम के बीच लाइनों के साथ एक और:
<टेबल सीमा = "1" नियम = "cols" >
यह है
एक तालिका
जहां
कॉलम
हैं
हाइलाइट किए गए
नियमों के साथ aa टेबल का एक उदाहरण यहां दिया गया है
विशेषता स्क्रीन पाठकों और अन्य उपयोगकर्ता एजेंटों के लिए तालिका के बारे में जानकारी प्रदान करती है जिन्हें तालिकाओं को पढ़ने में परेशानी हो सकती है। सारांश विशेषता का उपयोग करने के लिए, आप तालिका का एक संक्षिप्त विवरण लिखते हैं और इसे विशेषता के मान के रूप में डालते हैं। सारांश अधिकांश मानक वेब ब्राउज़र में वेब पेज पर प्रदर्शित नहीं होगा।
यहां सारांश के साथ एक साधारण तालिका लिखना है:
<तालिका सारांश = "यह एक नमूना तालिका है जिसमें फिलर जानकारी होती है। इस तालिका का उद्देश्य सारांश प्रदर्शित करना है।" >
कॉलम 1 पंक्ति 1
कॉलम 2 पंक्ति 1
कॉलम 1 पंक्ति 2
कॉलम 2 पंक्ति 2
सारांश के साथ एक तालिका देखें
विशेषता तालिका की चौड़ाई को या तो पिक्सेल में या कंटेनर तत्व के प्रतिशत के रूप में परिभाषित करती है। यदि चौड़ाई सेट नहीं की जाती है, तो तालिका केवल उतनी ही जगह लेगी जितनी इसे सामग्री को प्रदर्शित करने की आवश्यकता होती है, अधिकतम चौड़ाई के साथ मूल तत्व की चौड़ाई के समान होती है।
पिक्सल में एक विशिष्ट चौड़ाई वाली तालिका बनाने के लिए, लिखें:
<टेबल चौड़ाई = "300" >
यह तालिका उस कंटेनर की चौड़ाई का 80% है जिसमें यह है।
और एक चौड़ाई वाली तालिका बनाने के लिए जो मूल तत्व का प्रतिशत है, लिखें:
<टेबल चौड़ाई = "80%" >
यह तालिका उस कंटेनर की चौड़ाई का 80% है जिसमें यह है।
एक चौड़ाई के साथ एक तालिका का एक उदाहरण देखें
अस्वीकृत एचटीएमएल 4.01 टेबल विशेषता
टैबलेट तत्व की एक विशेषता है जिसे HTML 4.01 में बहिष्कृत किया गया है और HTML5 में अप्रचलित: संरेखण । यह विशेषता आपको सेट करने देती है कि तालिका के बगल में स्थित पाठ के सापेक्ष पृष्ठ पर स्थित होना चाहिए। यह विशेषता HTML 4.01 में बहिष्कृत कर दी गई है, और आपको इसका उपयोग करने से बचना चाहिए। इसके बजाय, आपको सीएसएस संपत्ति या मार्जिन-बाएं का उपयोग करना चाहिए: ऑटो; और मार्जिन-दाएं: ऑटो; शैलियों। फ्लोट प्रॉपर्टी आपको एक परिणाम देती है जो कि संरेखण विशेषता के करीब है, लेकिन यह शेष पृष्ठ सामग्री प्रदर्शित करने के तरीके को प्रभावित कर सकती है। मार्जिन-दाएं: ऑटो; और मार्जिन बाएं: ऑटो; डब्ल्यू 3 सी एक विकल्प के रूप में सिफारिश करता है।
संरेखण विशेषता का उपयोग कर एक बहिष्कृत उदाहरण यहां दिया गया है:
<टेबल संरेखण = "दाएं" >
यह तालिका सही गठबंधन है
टेक्स्ट बाईं ओर इसके चारों ओर बहता है
संरेखण विशेषता का उपयोग कर एक बहिष्कृत उदाहरण देखें।
और वैध (गैर-बहिष्कृत) HTML के साथ समान प्रभाव प्राप्त करने के लिए, लिखें:
<टेबल शैली = "फ्लोट: दाएं;" >
यह तालिका सही गठबंधन है
टेक्स्ट बाईं ओर इसके चारों ओर बहता है
निम्नलिखित तालिका विशेषताएँ बताती हैं जो किसी भी HTML विनिर्देश का हिस्सा नहीं हैं।
पिछली जानकारी HTML तत्व के गुणों का वर्णन करती है जो HTML 4.01 में मान्य हैं लेकिन HTML5 में अप्रचलित हैं।
निम्नलिखित तालिका विशेषताओं का वर्णन करता है जो किसी भी मौजूदा विनिर्देश में मान्य नहीं हैं। यदि आपको कोई परवाह नहीं है कि आपके पृष्ठ मान्य हैं या आपके उपयोगकर्ता इन तत्वों का समर्थन करने वाले ब्राउज़र का उपयोग करते हैं, तो आप इन तत्वों का उपयोग कर सकते हैं। लेकिन उनमें से अधिकतर या तो आधुनिक ब्राउज़रों में असमर्थित हैं या ऐसे विकल्प हैं जो अधिक मानक-अनुरूप हैं।
हम आपकी एचटीएमएल टेबल पर इन विशेषताओं का उपयोग करने की सलाह नहीं देते हैं ।
विशेषता एक पुरानी विशेषता है जिसे सीएसएस व्यापक रूप से समर्थित होने से पहले शामिल किया गया था। यह आपको तालिका के पृष्ठभूमि रंग को बदलने की अनुमति देता है। आप रंग का नाम या हेक्साडेसिमल कोड सेट कर सकते हैं। यह विशेषता अभी भी बहुत से ब्राउज़रों में काम करती है, लेकिन भविष्य के प्रूफ एचटीएमएल के लिए, आपको इसका उपयोग नहीं करना चाहिए, और इसके बजाय सीएसएस का उपयोग करना चाहिए।
इस विशेषता का बेहतर विकल्प शैली की संपत्ति है।
किसी तालिका के पृष्ठभूमि रंग को बदलने के लिए, लिखें:
<टेबल शैली = "पृष्ठभूमि-रंग: # सीसीसी;" >
इस तालिका में एक भूरे रंग की पृष्ठभूमि है
बीजीकलर विशेषता के समान, सीमा रंग विशेषता आपको विशेषता का रंग बदलने देती है। यह विशेषता केवल इंटरनेट एक्सप्लोरर द्वारा समर्थित है। इसके बजाय, आपको सीमा-रंग शैली की संपत्ति का उपयोग करना चाहिए।
अपनी तालिका की सीमा के रंग को बदलने के लिए, लिखें:
<टेबल सीमा = "1" शैली = "सीमा-रंग: लाल;" >
इस तालिका में एक लाल सीमा है।
सीमावर्ती रंगीन रोशनी और सीमा रंगकार्ड विशेषताओं को इंटरनेट एक्सप्लोरर में शामिल किया गया ताकि आप अपनी मेज के चारों ओर एक 3 डी सीमा बना सकें। हालांकि, आईई 8 और ऊपर के रूप में, यह केवल आईई 7 मानक मोड और क्विर्क मोड में समर्थित है। माइक्रोसॉफ्ट का कहना है कि ये गुण अब समर्थित नहीं हैं।
थोड़े समय के लिए, टैबलेट तत्व पर कोल्स विशेषता को ब्राउज़र को यह जानने में मदद करने के लिए प्रस्तावित किया गया था कि तालिका में कितने कॉलम थे। आधार यह था कि इससे बड़ी तालिकाओं के प्रतिपादन में तेजी आएगी। हालांकि इसे केवल इंटरनेट एक्सप्लोरर द्वारा लागू किया गया था, और आईई 8 और ऊपर के रूप में, यह केवल आईई 7 मानक मोड और क्विर्क मोड में समर्थित है।
चूंकि चौड़ाई विशेषता है (HTML5 में अप्रचलित) कई लोगों ने माना कि टेबल के लिए ऊंचाई विशेषता भी थी। लेकिन क्योंकि तालिकाएं उनकी सामग्री की चौड़ाई या सीएसएस या चौड़ाई विशेषता में परिभाषित चौड़ाई के अनुरूप होती हैं, इसलिए ऊंचाई को बाधित नहीं किया जा सकता है। तो इसके बजाय, ब्राउज़र ने तालिका की न्यूनतम ऊंचाई को परिभाषित करने के लिए ऊंचाई विशेषता को अनुमति दी। यदि तालिका उस ऊंचाई से लम्बा था, तो यह लंबा दिखाई देगी। लेकिन आपको संपत्ति का उपयोग करना चाहिए
सीएसएस की ऊंचाई संपत्ति के साथ आप ऊंचाई को बाधित कर सकते हैं यदि आप सीएसएस संपत्ति का उपयोग करते हैं और यह भी परिभाषित करते हैं कि किसी भी अतिरिक्त सामग्री के साथ क्या होता है।
किसी तालिका पर न्यूनतम ऊंचाई सेट करने के लिए, लिखें:
<टेबल शैली = "ऊंचाई: 30em;" >
यह तालिका कम से कम 30 किमी ऊंची है।
तालिका के बाएं / दाएं किनारे (एच स्पेस) और शीर्ष / नीचे (बनाम) के चारों ओर दो विशेषताओं और अतिरिक्त स्थान। आपको इसके बजाय स्टाइल प्रॉपर्टी का उपयोग करना चाहिए।
ऊर्ध्वाधर स्थान को 20 पिक्सल और क्षैतिज स्थान को 40 पिक्सेल तक सेट करने के लिए, लिखें:
<टेबल शैली = "मार्जिन: 20 पीएक्स 40 पीएक्स;"
इस तालिका में 20 पिक्सल का एक बनाम और 40 पिक्सल का एक हस्पेस है।
विशेषता एक बुलियन विशेषता है जो परिभाषित करती है कि तालिका की सामग्री मूल तत्व या खिड़की के किनारे लपेटनी चाहिए या क्षैतिज स्क्रॉलिंग को बल देना चाहिए। इसके बजाय, आपको सीएसएस संपत्ति का उपयोग करके प्रत्येक टेबल सेल की रैपिंग विशेषताओं को परिभाषित करना चाहिए।
बहुत सारे पाठ के साथ कॉलम बनाने के लिए लपेटें, लिखें:
style = "white-space: nowrap;" > यह एक टन सामग्री के साथ एक स्तंभ है। लेकिन अगर यह कंटेनर से भी बड़ा है, तो पाठ को अगली पंक्ति में लपेटना नहीं चाहिए, बल्कि ब्राउज़र सामग्री को सभी सामग्री देखने के लिए क्षैतिज स्क्रॉल करने के लिए मजबूर करना चाहिए।
अंत में, विशेषता परिभाषित करती है कि सेल के भीतर प्रत्येक सेल की सामग्री को लंबवत रूप से संरेखित करना चाहिए। इस अमान्य विशेषता के बजाय, आपको प्रत्येक सेल पर सीएसएस प्रॉपर्टी का उपयोग करना चाहिए, जिसे आप संरेखण को बदलना चाहते हैं। आप इस शैली के प्रभावों को तब तक नहीं देख पाएंगे जब तक कि कोशिका की सामग्री अन्य, बड़ी कोशिकाओं द्वारा उपलब्ध उपलब्ध स्थान से कम न हो।
एक सेल को नीचे संरेखित करने के लिए मजबूर करने के लिए (मध्य के बजाय, डिफ़ॉल्ट के रूप में), लिखें:
यह सेल बाकी की तुलना में लंबा है और इसलिए ऊंचाई को लम्बा होने के लिए मजबूर कर देगा। तो आप देखेंगे कि लंबवत संरेखित सेल नीचे से गठबंधन है।
style = "लंबवत-संरेखण: नीचे;" > नीचे सामग्री।
मध्य में सामग्री।