टेबल गुणहरू सिक्न HTML टेबलहरूको सबैभन्दा बढी हो
एचटीएमएल तालिका विशेषताहरूले HTML तालिकाहरूमा धेरै अधिक नियन्त्रण प्रदान गर्दछ। त्यहाँ धेरै रमाइलो बनाउन र तपाईंको पृष्ठको नजर परिवर्तन गर्न तालिकाहरूमा उपलब्ध विशेषताहरू छन्।
HTML तालिका तत्व विशेषताहरू
HTML5 मा तत्वले वैश्विक विशेषताहरू र एक अन्य विशेषता प्रयोग गर्दछ:। र यो मात्र 1 वा खाली मान (यानि बोर्डिङ = "") मा परिवर्तन भएको छ। यदि तपाइँ सीमाको चौडाइ परिवर्तन गर्न चाहनुहुन्छ भने, तपाईंले सीमा-चौडाइ CSS गुण प्रयोग गर्नुपर्छ।
वैध HTML5 तालिका विशेषताहरूको बारेमा जान्नको लागि तल हेर्नुहोस्।
त्यहाँ पनि धेरै विशेषताहरू छन् जुन HTML 4.01 विवरणको भाग हो जुन HTML5 मा अप्रचलित भएको छ:
- - तालिकाको TD र TH तत्वहरूमा CSS प्याडिङ सम्पत्ति प्रयोग गर्नुहोस्।
- तालिकामा CSS गुण सीमा-स्पेसिङ प्रयोग गर्नुहोस्।
- - सीएसएस शैलीहरू सीमाना रङ प्रयोग गर्नुहोस्: कालो; र तालिकामा सीमा शैली।
- - सीएसएस शैलीहरू सीमाना रङ प्रयोग गर्नुहोस्: कालो; र तालिका शैलीको उपयुक्त तत्वहरूमा सीमा-शैली।
- -पहिले, तपाइँले CAPTION मा तालिकाको ढाँचाको वर्णन गर्नुपर्छ वा सम्पूर्ण तालिकालाई ढाँचामा राख्नुहोस् र यसलाई FIGCAPTION मा वर्णन गर्नु पर्छ। वैकल्पिक रूपमा, तपाइँ तालिकाको संरचनालाई सरल बनाउन सक्दछ ताकि कुनै व्याख्या आवश्यक पर्दैन।
- - CSS चौडाई सम्पत्ति प्रयोग गर्नुहोस्।
र एक विशेषता जो HTML 4.01 मा निषेध गरिएको थियो र HTML5 मा अप्रचलित छ।
HTML 4.01 तालिका गुणहरूको बारेमा बढि जान्नुहोस्।
- पङ्क्तिबद्ध गर्नुहोस् - सट्टामा CSS मार्जिन सम्पत्ति प्रयोग गर्नुहोस्।
त्यहाँ पनि धेरै विशेषताहरू छन् जुन कुनै HTML विवरणको भाग होइन।
यी विशेषताहरू प्रयोग गर्नुहोस् यदि तपाइँ जान्नुहुन्छ कि ब्राउजरले तपाइँलाई समर्थन गर्न सक्दछ त्यसलाई तिनीहरूलाई सम्भाल्न सक्छ र तपाईं वैध HTML को बारे मा परिक्षण गर्दैनन्।
- यसको सट्टा CSS गुण पृष्ठभूमि रङ प्रयोग गर्नुहोस्।
- bordercolor - यसको सट्टा CSS गुण सिमाना रङ प्रयोग गर्नुहोस्।
- bordercolorlight - यसको सट्टा CSS गुण सिमाना रङ प्रयोग गर्नुहोस्।
- bordercolordark - यसको सट्टा CSS गुण सिमाना रङ प्रयोग गर्नुहोस्।
- रंगहरू - यो विशेषताको कुनै विकल्प छैन।
- उचाईको सट्टामा CSS गुण उचाइ प्रयोग गर्नुहोस्।
- यसको सट्टा CSS गुण मार्जिन प्रयोग गर्नुहोस्।
- यसको सट्टा CSS गुण मार्जिन प्रयोग गर्नुहोस्।
- यसको सट्टा CSS गुण व्हाइट स्पेस प्रयोग गर्नुहोस्।
- यसको सट्टामा CSS गुण ठाडो-पङ्क्तिबद्ध गर्नुहोस्।
ब्राउजर विशिष्ट तालिका गुणहरूको बारेमा बढि जान्नुहोस्।
HTML5 TABLE तत्व विशेषताहरू
हामी माथि उल्लेखित रूपमा, त्यहाँ एक विशेषता हो, वैश्विक विशेषताहरू भन्दा बाहिर HTML5 तालिकामा मान्य छ: सीमा।
किनारा विशेषता सम्पूर्ण तालिकाको वरिपरि सीमा र यो भित्र सबै कक्षहरू परिभाषित गर्न प्रयोग गरिन्छ। त्यहाँ केहि प्रश्न थियो कि यो HTML5 निर्दिष्टीकरणमा समावेश गरिनेछ कि, तर यो बनेको कारणले यो तालिका ढाँचाको बारेमा सूचना प्रदान गर्दछ, मात्र शैली शैली भन्दा बाहिर।
सिमाना विशेषता थप्नको लागि, यदि त्यहाँ सीमा छैन भने सीमा 1 र यदि सेट छैन भने (वा विशेषता छोड्नुहोस्)। प्रायजसो ब्राउजरले कुनै सीमाको लागि 0 लाई पनि समर्थन गर्दछ, र अन्य पूर्णांक मान (2, 3, 30, 500, आदि) लाई पङ्क्तिमा चौडाइ घोषणा गर्न, तर यो HTML5 मा अप्रचलित छ। बरु, तपाइँ सीआरएस सीमाना शैली गुणहरू प्रयोग गर्नु पर्छ किनकी चौडाइ चौडाई र अन्य शैलीहरू परिभाषित गर्न।
सीमाको साथ तालिका सिर्जना गर्न, लेख्नुहोस्:
<तालिका सीमा = "1" >
यो सिमानासँग तालिका हो
HTML 4.01 विशेषताहरू जुन HTML5 मा अप्रचलित छन्। यदि तपाईं HTML 4.01 कागजातहरू लेखनमा योजना बनाउनुहुन्छ भने, तपाइँ तिनीहरूलाई सिक्न सक्नुहुन्छ, अन्यथा, तपाइँ तिनीहरूलाई उपेक्षा गर्न सक्नुहुनेछ। यी विशेषताहरु को अधिकांश भन्दा अधिक विकल्पहरु छन्, माथि वर्णित।
हामी HTML5 (र HTML 4.01) मा वैध तत्वहरूको विशेषताहरूको वर्णन गर्दछौं। यसले HTML 4.01 मा मान्य तालिका विशेषताहरू वर्णन गर्छ, तर HTML5 मा अप्रचलित छन्। यदि तपाइँ अझै पनि HTML 4.01 कागजातहरू लेख्नुभयो भने, तपाइँ यी विशेषताहरू प्रयोग गर्न सक्नुहुनेछ, तर तिनीहरूमध्ये धेरैसँग विकल्पहरू छन् जुन तपाईले तपाइँको पृष्ठहरू HTML5 मा सार्दा भविष्यका लागि भविष्य-प्रमाणीकरण गर्दछ।
वैध HTML 4.01 विशेषताहरू
माथि उल्लेख गरिएको विशेषता।
HTML5 बाट एचटीएमएल 4.01 मा मात्र भिन्नता यो हो कि तपाईं पिक्सेलमा पङ्क्तिको चौडाइ परिभाषित गर्न कुनै पनि पूर्ण पूर्णांक (0, 1, 2, 15, 20, 200, आदि) निर्दिष्ट गर्न सक्नुहुन्छ।
5px सीमासँग तालिका निर्माण गर्न, लेख्नुहोस्:
<तालिका सीमा = "5" >
यो तालिकामा 5px सीमा छ।
सीमाहरूसँग दुई तालिकाहरूको उदाहरण हेर्नुहोस्।
विशेषता सेल सीमानाहरू र कक्षको सामग्रीहरू बीचको ठाउँको मात्रा परिभाषित गर्दछ। पूर्वनिर्धारित दुई पिक्सेल हो। यदि तपाइँ सामग्री र सीमाना बीच कुनै ठाउँ चाहानुहुन्छ 0 मा सेलप्याड सेट गर्नुहोस्।
20 मा सेल प्याडिंग सेट गर्न, लेख्नुहोस्:
cellpadding = "20" >
यो तालिकामा 20 के cellpadding छ।
सेल सीमानाहरू 20 पिक्सलहरूद्वारा अलग गरिनेछ।
सेलप्याडिङको साथ तालिकाको उदाहरण हेर्नुहोस्
विशेषता तालिका तालिका र सेल सामग्री बीचको स्थानको मात्रा परिभाषित गर्दछ। सेलप्याडिंग जस्तै, डिफल्ट दुई पिक्सलहरूमा सेट गरिएको छ, त्यसैले तपाईले यसलाई 0 मा सेट गर्नु पर्दछ यदि तपाईं सेल स्पेसिङ चाहनुहुन्न भने।
टेबलमा सेल स्पेसिङ थप्न, लेख्नुहोस्:
cellspacing = "20" >
यो तालिकामा 20 को सेल स्पेसिंग छ।
कक्ष 20 पिक्सलहरूद्वारा अलग गरिनेछ।
सेलस्पेसको साथ तालिका हेर्नुहोस्
विशेषताले चिठीको बाहिरको वरिपरि किनाराको किनारा दृश्यात्मक हुनेछ। तपाईं आफ्नो तालिका सबै चार पक्षहरूमा, कुनै एक पक्ष, शीर्ष र तल्लो, बायाँ र दायाँ, वा कुनै पनि मा फ्रेम गर्न सक्नुहुन्छ।
यहाँ तालिकाको लागि एचटीएमएल हो केवल बायाँ साइड सीमानासँग:
<तालिका सीमा = "1" फ्रेम = "lhs" >
यो तालिका
हुनेछ
मात्र
बाँया छेउमा राखिएको।
र अर्को उदाहरण तलको फ्रेमसँग:
<तालिका सीमा = "1" फ्रेम = "तल" >
यो तालिकामा तलको फ्रेम छ।
फ्रेमहरूसँग केही तालिकाहरू जाँच गर्नुहोस्
विशेषता फ्रेम गुणसँग समान छ, केवल यसले तालिकाको कक्ष वरिपरि सीमाहरूलाई असर गर्छ। तपाइँ सबै कक्षहरूमा नियमहरू स्तम्भहरू बीच, TBODY र TFOOT वा कुनैपनि समूहहरू बीच सेट गर्न सक्नुहुन्छ।
पङ्क्तिहरू बीचको तालिका मात्र तालिकाको निर्माण गर्न, लेख्नुहोस्:
<तालिका सीमा = "1" नियम = "पङ्क्तिहरू" >
यो 4x4 तालिकामा छ
पंक्तिहरू स्तम्भहरू छैन
लाई उल्लेखित छ
नियम विशेषता।
र अर्को स्तम्भहरू बीचमा स्तम्भहरू:
<तालिका सीमा = "1" नियम = "कोलो" >
यो छ
एउटा तालिका
जहाँ
स्तम्भहरू
हो
हाइलाइट गरियो
यहाँ नियमहरूसँग एअ तालिकाको उदाहरण हो
विशेषता तालिकाको बारेमा जानकारी दिन्छ कि स्क्रिन पाठकहरू र अन्य प्रयोगकर्ता एजेंटहरूका लागि तालिकाहरू पढ्दा समस्या हुन सक्छ। सारांश विशेषता प्रयोग गर्न, तपाइँ तालिकाको छोटो विवरण लेख्नुहोस् र विशेषताको मानको रूपमा राख्नुहोस्। सारांशले वेब पृष्ठमा धेरै मानक वेब ब्राउजरमा प्रदर्शन गर्दैन।
यहाँ सारांशको साथ सरल तालिका कसरी लेख्न सकिन्छ:
<तालिका सारांश = "यो एक नमूना तालिका हो जसले पूरक जानकारी समावेश गर्दछ। यस तालिकाको उद्देश्य सारांश प्रदर्शन गर्न हो।" >
स्तम्भ 1 पङ्क्ति 1
स्तम्भ 2 पङ्क्ति 1
स्तम्भ 1 पङ्क्ति 2
स्तम्भ 2 पङ्क्ति 2
सारांशको साथ तालिका हेर्नुहोस्
विशेषताले या त पिक्सेलमा तालिकाको चौडाइ परिभाषित गर्दछ वा कन्टेनर तत्वको प्रतिशतको रूपमा। यदि चौडाइ सेट गरिएको छैन भने, तालिकाले केवल धेरै स्पेस लिनेछ किनभने यो सामग्री प्रदर्शन गर्न आवश्यक छ, अधिकतम चौडाइको साथमा मूल तत्वको चौडाइको रूपमा।
पिक्सेलमा एक विशिष्ट चौडाइको साथ तालिका निर्माण गर्न, लेख्नुहोस्:
width = "300" >
यो तालिका कन्टेनरको चौडाइको 80% हो जुन यसमा छ।
र चौडाईको साथ तालिका बनाउनुहोस् जुन अभिभावक तत्वको प्रतिशत हो, लेख्नुहोस्:
<तालिका चौडाई = "80%" >
यो तालिका कन्टेनरको चौडाइको 80% हो जुन यसमा छ।
चौडाईको साथ तालिकाको उदाहरण हेर्नुहोस्
Deprecated HTML 4.01 तालिका विशेषता
त्यहाँ TABLE तत्व को एक विशेषता हो जुन HTML 4.01 मा अव्यवस्थित छ र अप्रचलित HTML5 मा पङ्क्तिबद्ध गरिएको छ : पङ्क्तिबद्ध गर्नुहोस् । यो विशेषताले तपाइँलाई जहांको छेउमा राखिएको पृष्ठको सम्बन्धमा तालिकामा अवस्थित हुनु पर्छ जहाँ सेट गर्न दिन्छ। यो विशेषता HTML 4.01 मा बिच्छेद गरिएको छ, र तपाइँ यसलाई प्रयोग गर्नबाट जोगिनै पर्छ। बरु, तपाईंले CSS गुण वा मार्जिन-बायाँ: स्वत: प्रयोग गर्नु पर्छ। र मार्जिन-दाँया: ओटो; शैलीहरू। फ्लोट सम्पत्तिले तपाईंलाई परिणाम दिन्छ जुन कुन पङ्क्तिबद्ध गुणलाई प्रदान गर्दछ नजिक छ, तर यसले बाँकी पृष्ठहरूलाई सामग्री प्रदर्शन गर्न असर गर्दछ। मार्जिन-दायाँ: ओटो; र मार्जिन बायाँ: स्वत: के हो W3C एक विकल्प को रूप मा सिफारिस गर्दछ।
यहाँ संरेखण विशेषता को प्रयोग गरेर एक निन्दा गरिएको उदाहरण हो:
align = "right" >
यो तालिका दाँया पङ्क्तिबद्ध छ
पाठ बायाँतिर बाँया हुन्छ
पङ्क्तिबद्ध विशेषता प्रयोग गरेर एक उदास उदाहरण हेर्नुहोस्।
र मान्य (गैर-बिच्छेदन) HTML सँग एकै प्रभाव प्राप्त गर्न, लेख्नुहोस्:
<तालिका शैली = "फ्लोट: दायाँ;" >
यो तालिका दाँया पङ्क्तिबद्ध छ
पाठ बायाँतिर बाँया हुन्छ
निम्न तालिका बताईएको विशेषताहरु जुन कुनै एचटीएमएल विवरणको भाग होइन।
अघिल्लो जानकारी एचटीएमएल 4.01 मा मान्य एचटीएमएल तत्व को विशेषताहरु को वर्णन गर्दछ तर HTML5 मा अप्रचलित छन्।
निम्न तालिका निर्दिष्ट विशेषताहरू जुन कुनै पनि हालको विवरणमा मान्य छैन। यदि तपाईं ध्यान राख्नुहुन्न कि तपाईको पृष्ठहरू मान्य छ वा तपाईंको प्रयोगकर्ताहरूलाई यी तत्वहरूलाई समर्थन गर्ने ब्राउजर प्रयोग गर्दछ, त्यसपछि तपाइँ यी तत्वहरू प्रयोग गर्न सक्नुहुनेछ। तर तीमध्ये धेरै जसो आधुनिक ब्राउजरहरूमा असमर्थित छन् वा विकल्पहरू छन् जसले अधिक मानकहरू-अनुपालन गर्दछ।
हामी तपाइँको HTML तालिकाहरूमा यी विशेषताहरू प्रयोग गर्न सिफारिस गर्दैनौं ।
विशेषता एक पुरानो विशेषता हो जुन CSS बाट व्यापक रूपमा समर्थित थियो अघि समावेश गरिएको थियो। यसले तपाईंलाई तालिकाको पृष्ठभूमि रङ परिवर्तन गर्न अनुमति दिन्छ। तपाईले रंग नाम वा हेक्साडेसिमल कोड सेट गर्न सक्नुहुन्छ। यो विशेषता अझै पनि ब्राउजरमा काम गर्दछ, तर भविष्यका प्रमाणपत्र HTML को लागी, तपाईंले यसलाई प्रयोग गर्नुभएन, र यसको सट्टा CSS प्रयोग गर्नुपर्दछ।
यो विशेषताको लागि राम्रो विकल्प शैली गुण हो।
तालिकाको पृष्ठभूमि रङ परिवर्तन गर्न, लेख्नुहोस्:
<तालिका शैली = "पृष्ठभूमि रंग: #ccc;" >
यो तालिकामा खैरो पृष्ठभूमि छ
Bgcolor विशेषताको समान, bordercolor विशेषताले तपाईंलाई विशेषताको रंग परिवर्तन गर्न दिन्छ। यो विशेषता केवल इन्टरनेट एक्सप्लोरर द्वारा समर्थित छ। बरु, तपाईंले बोर्डर-शैली शैली गुण प्रयोग गर्नुपर्छ।
तपाईंको तालिकाको किनाराको रंग परिवर्तन गर्न, लेख्नुहोस्:
<तालिका सीमा = "1" शैली = "सीमा-रंग: रातो;" >
यो तालिकामा रातो सीमाना छ।
Internet Explorer मा bordercolorlight र bordercolordark विशेषताहरू तपाइँलाई तपाईंको तालिकाको वरिपरि एक 3D सीमा बनाउनको लागि अनुमति दिईयो। यद्यपि, IE8 र माथिको रूपमा, यो केवल IE7 मानक मोड र क्विक्स मोडमा समर्थित छ। माइक्रोसफ्टले बताउँछ कि यी गुणहरूलाई अब समर्थित छैन।
छोटो समयको लागि, लेन्ट एन्टेशनमा टिभी विशेषताहरूलाई प्रस्तावित गरिएको थियो ब्राउजरले कसरी तालिकामा कति स्तम्भहरू थाह थियो भनेर मद्दत गर्न थालेको थियो। आधार थियो कि यसले ठूलो तालिकाहरूको प्रतिपादन गतिमा मद्दत गर्नेछ। यद्यपि यो मात्र इन्टरनेट एक्सप्लोररद्वारा लागू भएको थियो, र IE8 र माथिको रूपमा, यो मात्र IE7 मानक मोड र क्विक्स मोडमा समर्थित छ।
किनभने त्यहाँ चौडाइ विशेषता हो (अप्रचलित HTML5 मा) धेरै व्यक्तिले मान्यो त्यहाँ त्यहाँ तालिकाहरूको लागि उचाइ गुण थियो। तर किनभने तालिकाहरू तिनीहरूको सामग्रीको चौडाइ अनुरूप वा सीएसएस वा चौडाइ विशेषतामा परिभाषित चौडाइ अनुरूप छ, उचाईलाई रोक्न सकिएन। त्यसैले यसको सट्टा, ब्राउजरले ऊँचाई विशेषतालाई तालिकाको न्यूनतम उचाइ परिभाषित गर्न अनुमति दिएको छ। यदि तालिका उचाइभन्दा ठूलो थियो भने, यसले लामो प्रदर्शन गर्नेछ। तर तपाईले सम्पत्ति प्रयोग गर्नुपर्छ
सीएसएस उचाइ सम्पत्तिको साथ तपाईं उचाइलाई रोक्न सक्नुहुन्छ यदि तपाइँ CSS गुणको साथसाथै कुनै पनि थप सामग्रीसँग के हुन्छ भनेर परिभाषित गर्न सक्नुहुन्छ।
तालिकामा न्यूनतम उचाइ सेट गर्न, लेख्नुहोस्:
<तालिका शैली = "ऊंचाई: 30em;" >
यो तालिका कम से कम 30 ईम उच्च छ।
बायाँ / दायाँ तिर वरिपरि दुई विशेषताहरू र थप स्पेस (hspace) र तालिकाको / माथिल्लो स्थान (स्पेसस्पेस)। तपाईले शैली गुणको सट्टा प्रयोग गर्नु पर्छ।
20 पिक्सलमा ठाडो स्पेस सेट गर्नुहोस् र 40 पिक्सलहरूमा तेर्सो स्पेस सेट गर्नुहोस्, लेख्नुहोस्:
<तालिका शैली = "मार्जिन: 20px 40px;"
यो तालिकामा 20 पिक्सेलमा एक टेम्प्लेस र 40 पिक्सेलको एचस्पेस छ।
विशेषता एक ब्युलेन विशेषता हो जसले परिभाषित गर्दछ कि तालिकाको सामग्री आमाबाबु वा सञ्झ्यालको किनारामा लम्किएको वा क्षैतिज स्क्र्रोल बल गर्नु पर्छ। यसको सट्टा, तपाईंले सीएसएस गुण प्रयोग गरेर प्रत्येक तालिका कक्षको लपेटिङ विशेषताहरू परिभाषित गर्नुपर्छ।
धेरै पाठको साथ स्तम्भ बनाउनको लागि स्तम्भ बनाउन, लेख्नुहोस्:
<तालिका>
style = "सेतो स्पेस: nowrap;" > यो सामग्रीको एक टनको साथ स्तम्भ हो। तर यो कन्टेनर भन्दा ठूलो भए पनि पाठलाई अर्को लाइनमा लपेनु हुँदैन, तर ब्राउजर सञ्झ्याललाई सबै सामग्री हेर्न तेर्सो स्क्रोल गर्न बलियो बनाउनुहोस्।
अन्तमा, विशेषताले प्रत्येक सेलको सामग्री कसरी सेल भित्र ठाडो पङ्क्तिबद्ध गर्नुपर्छ भनेर परिभाषित गर्दछ। यस अमान्य विशेषताको सट्टा, तपाईंले संरेखण परिवर्तन गर्न चाहानु भएको प्रत्येक कक्षमा CSS गुण प्रयोग गर्नुपर्छ। तपाईले यस शैलीको प्रभावहरूलाई ध्यान दिनुहुने छैन जबसम्म सेल सामग्रीहरू अन्य, ठूलो कक्षहरू द्वारा बनाईएको उपलब्ध स्थान भन्दा कम छन्।
सेललाई तल पङ्क्तिबद्ध गर्न बलियो गर्न (बीचमा, डिफल्टको रूपमा), लेख्नुहोस्:
<तालिका>
यो कक्ष बाँकी भन्दा लामो छ र त्यसैले ऊँचा उचाइ लामो हुनेछ। त्यसोभए तपाईंले देख्न सक्नुहुनेछ ठाडो पङ्क्तिबद्ध कक्ष तल निस्किएको छ।
style = "ठाडो-पङ्क्तिबद्ध: तल;" > सामग्रीमा तल।
बीचमा सामग्री।