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

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

एचटीएमएल टेबल तत्व गुण

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

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

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

• सीएसएस का प्रयोग करें गद्दी मेज पर संपत्ति टीडी तथा वें तत्वों।
• सीएसएस संपत्ति का उपयोग करें सीमा-रिक्ति मेज़ पर।
• सीएसएस शैलियों का उपयोग करें सीमा-रंग: काला; तथा झालर की शैली मेज़ पर।
• सीएसएस शैलियों का उपयोग करें सीमा-रंग: काला; तथा झालर की शैली तालिका के उपयुक्त तत्वों पर।
• - इसके बजाय, आपको तालिका में तालिका की संरचना का वर्णन करना चाहिए कैप्शन या पूरी तालिका को एक में डाल दें आंकड़ा और इसे एक में वर्णित करना FIGCAPTION। वैकल्पिक रूप से, आप तालिका की संरचना को सरल बना सकते हैं ताकि कोई स्पष्टीकरण की आवश्यकता न हो।
• सीएसएस का प्रयोग करें चौड़ाई संपत्ति।

और एक विशेषता जो HTML 4.01 में बहिष्कृत थी और HTML5 में भी अप्रचलित है।

एचटीएमएल 4.01 टेबल गुणों के बारे में और जानें।

• संरेखितसीएसएस का प्रयोग करें हाशिया इसके बजाय संपत्ति।

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

• सीएसएस संपत्ति का उपयोग करें पीछे का रंग बजाय।
• किनारे का रंगसीएसएस संपत्ति का उपयोग करें किनारे का रंग बजाय।
• bordercolorlightसीएसएस संपत्ति का उपयोग करें किनारे का रंग बजाय।
• bordercolordarkसीएसएस संपत्ति का उपयोग करें किनारे का रंग बजाय।
• कॉलम- इस विशेषता का कोई विकल्प नहीं है।
• ऊंचाईसीएसएस संपत्ति का उपयोग करें ऊंचाई बजाय।
• सीएसएस संपत्ति का उपयोग करें हाशिया बजाय।
• सीएसएस संपत्ति का उपयोग करें हाशिया बजाय।
• सीएसएस संपत्ति का उपयोग करें सफेद-अंतरिक्ष बजाय।
• सीएसएस संपत्ति का उपयोग करें ऊर्ध्वाधर- align बजाय।

ब्राउज़र विशिष्ट तालिका विशेषताओं के बारे में और जानें।

एचटीएमएल 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" > इस तालिका में 5 पीएक्स सीमा है।

सीमाओं के साथ दो तालिकाओं का एक उदाहरण देखें।

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

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

<> cellpadding = "20" > इस तालिका में एक हैcellpadding 20 में से सेल सीमाओं को 20 पिक्सेल से अलग किया जाएगा।

सेलपैडिंग के साथ एक तालिका का एक उदाहरण देखें

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

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

<> cellspacing = "20" > इस तालिका में एक हैcellspacing 20 में से कोशिकाओं को 20 पिक्सेल से अलग किया जाएगा।

सेलस्पेसिंग के साथ एक टेबल देखें

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

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

फ्रेम = "एलएचएस" > यह मेज़ होगा सिर्फ बायीं तरफ तैयार

और नीचे फ्रेम के साथ एक और उदाहरण:

फ्रेम = "नीचे" > इस तालिका में नीचे एक फ्रेम है।

फ्रेम के साथ कुछ टेबल देखें

विशेषता समान हैढांचा विशेषता, केवल यह तालिका की कोशिकाओं के चारों ओर सीमाओं को प्रभावित करता है। आप समूहों के बीच कॉलम के बीच सभी कोशिकाओं पर नियम सेट कर सकते हैंtbody तथाtfoot या कोई नहीं।

पंक्तियों के बीच केवल लाइनों के साथ एक टेबल बनाने के लिए, लिखें:

नियम = "पंक्तियाँ" > यह 4x4 तालिका है पंक्तियां कॉलम नहीं हैं के साथ रेखांकित नियम विशेषता।

और कॉलम के बीच लाइनों के साथ एक और:

नियम = "कॉलम" > ये है मेज़ जहां कॉलम कर रहे हैं पर प्रकाश डाला

नियमों के साथ एक तालिका का उदाहरण यहां दिया गया है

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

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

<> सारांश = "यह एक नमूना तालिका है जिसमें फिलर जानकारी होती है। इस तालिका का उद्देश्य सारांश प्रदर्शित करना है।" > कॉलम 1 पंक्ति 1 कॉलम 2 पंक्ति 1 कॉलम 1 पंक्ति 2 कॉलम 2 पंक्ति 2

सारांश के साथ एक तालिका देखें

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

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

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

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

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

एक चौड़ाई के साथ एक तालिका का एक उदाहरण देखें

अस्वीकृत एचटीएमएल 4.01 टेबल विशेषता

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

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

<> align = "सही" > यह तालिका सही गठबंधन है पाठ बाईं ओर इसके चारों ओर बहती है

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

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

<> शैली = "फ्लोट: सही," > यह तालिका सही गठबंधन है पाठ बाईं ओर इसके चारों ओर बहती है

निम्नलिखित बताते हैंटेबल विशेषताएं जो किसी भी HTML विनिर्देश का हिस्सा नहीं हैं।

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

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

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

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

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

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

<> शैली = "पृष्ठभूमि रंग: # सीसीसी;" > इस तालिका में एक भूरे रंग की पृष्ठभूमि है

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

अपनी तालिका की सीमा के रंग को बदलने के लिए, लिखें:

शैली = "सीमा-रंग: लाल;" > इस तालिका में एक लाल सीमा है।

bordercolorlight तथाbordercolordark आपको इंटरनेट एक्सप्लोरर में विशेषताओं को शामिल किया गया ताकि आप अपनी मेज के चारों ओर एक 3 डी सीमा बना सकें। हालांकि, आईई 8 और ऊपर के रूप में, यह केवल आईई 7 मानक मोड और क्विर्क मोड में समर्थित है। माइक्रोसॉफ्ट का कहना है कि ये गुण अब समर्थित नहीं हैं।

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

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

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

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

<> शैली = "ऊंचाई: 30em;" > यह तालिका कम से कम 30 ईएमएस ऊंची है।

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

ऊर्ध्वाधर स्थान को 20 पिक्सल और क्षैतिज स्थान को 40 पिक्सेल तक सेट करने के लिए, लिखें:

<> शैली = "मार्जिन: 20 पीएक्स 40 पीएक्स;" इस तालिका में 20 पिक्सल का बनाम और 40 पिक्सल का एक हस्पेस है।

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

बहुत सारे पाठ के साथ कॉलम बनाने के लिए लपेटें, लिखें:

<> शैली = "सफेद-स्थान: अब्रैप;" > यह एक टन सामग्री के साथ एक स्तंभ है। लेकिन अगर यह कंटेनर से भी बड़ा है, तो पाठ को अगली पंक्ति में लपेटना नहीं चाहिए, बल्कि ब्राउज़र सामग्री को सभी सामग्री देखने के लिए क्षैतिज स्क्रॉल करने के लिए मजबूर करना चाहिए।

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

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

<> शैली = "लंबवत-संरेखण: नीचे;" > नीचे सामग्री।

यह कोशिका बाकी की तुलना में लंबी है और इसलिए ऊंचाई को लम्बा होने के लिए मजबूर कर देगा। तो आप देखेंगे कि लंबवत संरेखित सेल नीचे से गठबंधन है।

बीच में सामग्री।