तालिका पंक्तियों के समूह को परिभाषित करने वाला टैग। डिजाइन और डिजाइन विशेषताएँ

09.11.2015


हैलो!
हम HTML की मूल बातें सीखना जारी रखते हैं। इस पाठ में मैं आपको बताऊंगा और उदाहरणों के साथ दिखाऊंगा hTML में टेबल कैसे बनाये... और हम यह भी विचार करेंगे कि आप टेबल कोशिकाओं का रंग कैसे सेट कर सकते हैं, टेबल को कैसे केंद्र में रख सकते हैं, टेबल बॉर्डर कैसे बना सकते हैं, आदि।
HTML तालिकाओं का उपयोग अक्सर HTML में कुछ सूचनाओं को सूचीबद्ध करने के लिए किया जाता है। पहले, टेबल का उपयोग वेब पेजों का एक कंकाल बनाने के लिए भी किया जाता था:

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

मुझे लगता है कि आपको यह पता लगाने के लिए कि आपको एक तालिका बनाने के लिए क्या सीखने की आवश्यकता है।

तालिका के मुख्य टैग क्या हैं?

○ टैग टेबल
यह एक तालिका बनाने के लिए मुख्य कंटेनर है, और इसमें स्तंभ और पंक्तियों जैसे अन्य तालिका तत्व शामिल हैं।
समापन टैग की आवश्यकता है।

○ टैग टीआर

कंटेनर के अंदर

……
पंक्तियों को रखा गया है:

टैग का उपयोग करके कॉलम बनाए जाते हैं .
समापन टैग की आवश्यकता है।

ध्यान: इन सभी टैग का उपयोग किए बिना एक तालिका बनाना संभव नहीं है।

अब चलो सिद्धांत का उपयोग करने और व्यवहार में एक तालिका बनाने की कोशिश करते हैं।

काम: तीन कॉलम के साथ एक एकल पंक्ति तालिका बनाएं।

पंक्ति -1 / स्तंभ 1 स्तंभ 2 कॉलम 3

काम: तीन पंक्तियों और तीन स्तंभों वाली एक तालिका बनाएं।

पंक्ति -1 / स्तंभ 1 स्तंभ 2 कॉलम 3
पंक्ति -2 / स्तंभ 1 स्तंभ 2 कॉलम 3
पंक्ति -3 / स्तंभ 1 स्तंभ 2 कॉलम 3

क्या इस बिंदु तक सब कुछ आपके लिए स्पष्ट है? कौन नहीं समझता, हाथ उठाओ! हाँ, सब लोग समझ गए, तो चलिए आगे बढ़ते हैं।

अब आइए तालिका के लिए विशेषताओं को देखें।

* गुण

HTML तालिका सीमाएँ

टैग के लिए तालिका को दृश्यमान बनाने के लिए

लागू विशेषता "सीमा» .

यदि विशेषता मान « सीमा» "0", यदि टैग में नहीं जोड़ा जाता है तो सीमा दिखाई नहीं देगी

गुण "सीमा" तालिका में सीमा दिखाई नहीं देगी।

HTML टेबल बॉर्डर - साइट

पंक्ति -1 / स्तंभ 1 स्तंभ 2 कॉलम 3

परिणाम:

विशेषता में मान बदलने का प्रयास करें "सीमा" पर "दस" .

एक तालिका में कोशिकाओं को कैसे संयोजित किया जाए

एक तालिका उपयोग विशेषताओं में कोशिकाओं को संयोजित करने के लिए "Colspan" और टैग के लिए "rowspan" < टीडी> .

  • colspan - कोशिकाओं का क्षैतिज विलय;
  • rowspan - लंबवत मर्ज कोशिकाएं।

मूल्यों में, निर्दिष्ट करें कि आप कितने सेल मर्ज करना चाहते हैं।

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

परिणाम:

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

परिणाम:

अधिक जटिल उदाहरण:

HTML में टेबल्स - साइट

पंक्ति -1 / स्तंभ 1 स्तंभ 2 कॉलम 3
पंक्ति -2 / स्तंभ 1 स्तंभ 2 कॉलम 3 स्तंभ 4

परिणाम:

तालिका कोशिकाओं के बीच रिक्ति कैसे बढ़ाएं

पाठ और सेल बॉर्डर के बीच की दूरी बढ़ाने के लिए, विशेषता लिखें "Cellpadding" टैग के लिए

"सेलपैडिंग" विशेषता के मूल्यों में, इंडेंटेशन दूरी निर्दिष्ट करें

पंक्ति 1 कॉलम 1 स्तंभ 2

परिणाम:

एक तालिका में कोशिकाओं के बीच रिक्ति बढ़ाने के लिए, विशेषता का उपयोग करें "Cellspacing" टैग के लिए

गुण के मूल्यों में "Cellspacing" कोशिकाओं के बीच की दूरी निर्दिष्ट करें

पंक्ति 1 कॉलम 1 स्तंभ 2

परिणाम:

HTML टेबल बैकग्राउंड कैसे बनाते है

टैग के लिए HTML तालिका की पृष्ठभूमि का उपयोग करने के लिए

तथा

ऐसी विशेषताएं:

  • BGCOLOR - पूरी तालिका के लिए या प्रत्येक सेल के लिए अलग से पृष्ठभूमि का रंग। रंग कोड या शब्द द्वारा दिया जाता है।
  • बैकग्राउंड - तालिका की पृष्ठभूमि तस्वीर से भरी हुई है।
HTML में टेबल्स - साइट
पंक्ति -1 / स्तंभ 1 स्तंभ 2 कॉलम 3
पंक्ति -2 / स्तंभ 1 स्तंभ 2 कॉलम 3 स्तंभ 4

परिणाम:

HTML टेबल में तस्वीर कैसे डालें

टैग के बीच HTML तालिका में एक चित्र सम्मिलित करने के लिए

टैग डालें .

पंक्ति 1 सेल 1 सेल 2

परिणाम:

मान पिक्सेल (px) या प्रतिशत (%) में निर्दिष्ट हैं

HTML तालिका में सामग्री संरेखित करें

HTML तालिका में सामग्री को टैग में उपयोग करने के लिए संरेखित करें गुण "संरेखित" तथा "वेलिजन" :

संरेखित करें - तालिका में सामग्री का क्षैतिज संरेखण।
मान:

  • बाएं - बाईं ओर पुश सामग्री (चूक);
  • केंद्र केंद्र में सेट;
  • सही - सामग्री को दाईं ओर पुश करें

वेलिजन - तालिका में सामग्री का ऊर्ध्वाधर संरेखण।
मान:

  • ऊपर सामग्री को शीर्ष पर दबाएं;
  • तल सामग्री को नीचे की ओर धकेलें;
  • मध्य बीच में सामग्री सेट करें
टेक्स्ट

डिफ़ॉल्ट सेल सामग्री क्षैतिज रूप से दाईं ओर, लंबवत - नीचे की ओर प्रेस की जाती है
सामग्री को क्षैतिज रूप से बाईं ओर संरेखित किया गया है, लंबवत - शीर्ष पर दबाएं सामग्री को केंद्र में क्षैतिज रूप से संरेखित किया गया है, लंबवत - बीच में दबाएं

परिणाम:

HTML तालिका को कैसे संरेखित करें

तालिका को संरेखित करने के लिए, आपको तालिका को टैग के साथ लपेटने की आवश्यकता है

:

टेबल कोड

पंक्ति -1 / स्तंभ 1 स्तंभ 2 कॉलम 3

तालिका में अतिरिक्त और मुख्य टैग

वेबसाइट के लिए तालिका
शीर्षक 1 शीर्षक २
1 2

परिणाम:

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

पिछला पद
अगली पोस्ट

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

इसलिए, hTML में एक साधारण टेबल कैसे बनाते है?
तालिका बनाने के लिए, आपको तीन टैग का उपयोग करने की आवश्यकता है:

टेबल तालिका को खोलने के लिए इस टैग की आवश्यकता है। यह एक प्रकार का कंटेनर है जिसमें अन्य तत्व होते हैं। यहाँ मैंने इसे झुका दिया ताकि आप इसे डोनट के बिना समझ न सकें। जब आप एक उदाहरण देखते हैं, तो आप इसका पता लगा लेंगे।
अंत टैग की आवश्यकता है।

तालिका में एक पंक्ति होती है

पंक्ति 1 पंक्ति 1
पंक्ति 2 पंक्ति 2
पंक्ति 3 पंक्ति 3
सेल 1 सेल 2
सेल 1 सेल 2
सेल 1 सेल 2

टी.आर. एक नई तालिका पंक्ति बनाता है। अंत टैग की आवश्यकता है।

टीडी पंक्ति में एक नया सेल बनाता है। अंत टैग की आवश्यकता है।

आइए उपरोक्त सभी को बेहतर ढंग से समझने के लिए एक उदाहरण देखें:

HTML टेबल

पंक्ति 1 सेल 1 row1 सेल 2
पंक्ति 2 सेल 1 पंक्ति 2 सेल 2
पंक्ति 3 सेल 1 पंक्ति 3 सेल 2

यहाँ परिणाम है:

पंक्ति 1 सेल 1 row1 सेल 2
पंक्ति 2 सेल 1 पंक्ति 2 सेल 2
पंक्ति 3 सेल 1 पंक्ति 3 सेल 2

मुझे सब कुछ समझा दो।
हर बार एक नई तालिका बनाई जाती है, एक टैग खुलता है।

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

टैग के साथ पंक्ति बंद करें .
टैग के साथ एक और पंक्ति खोलना
टैग के साथ पंक्ति बंद करें .
टैग के साथ तीसरी पंक्ति खोलें और इसमें फिर से दो सेल डालें।
टैग के साथ पंक्ति बंद करें .
टैग के साथ तालिका बंद करें
पंक्ति 1 सेल 1 row1 सेल 2
.

मेरे विचार में आपने इसे समझ लिया है? मामले में कोई भूल गया कि एक विशेषता क्या है सीमाजो मैं टैग के साथ उपयोग कर रहा हूं

, मैं आपको याद दिलाता हूं कि यह फ्रेम की मोटाई है। मैं फ़िन सीमा "0" पर सेट किया जाएगा, फिर तालिका की सीमाएं अदृश्य हो जाएंगी।

उदाहरणों की एक जोड़ी की जाँच करें टेबल बनाए और आप आगे जा सकते हैं:

HTML टेबल

पंक्ति 1 सेल 1
पंक्ति 2 सेल 1

परिणाम:

किसी चित्र को तालिका में सम्मिलित करने के लिए, आपको HTML फ़ाइल में चित्र सम्मिलित करने के तरीके का बुनियादी ज्ञान होना चाहिए। मैं इस बारे में बात करता हूं। अब जब आप HTML में एक छवि की मूल बारीकियों को जानते हैं, तो आप किसी चित्र को तालिका में सम्मिलित करने का प्रयास कर सकते हैं। इसे इस प्रकार किया जा सकता है:

टैग के बीच की रेखा में एक छवि डालें।

HTML टेबल

पंक्ति 1 सेल 1 पंक्ति 1 सेल 2

परिणाम:

पंक्ति 1 सेल 1 पंक्ति 1 सेल 2

तालिका में कोशिकाओं को कैसे संयोजित करें?

किसी तालिका में कक्षों को संयोजित करने के लिए, आपको इस तरह की विशेषताओं का उपयोग करने की आवश्यकता है:
कॉल्सपन - कॉलम की संख्या निर्धारित करता है।
डिफ़ॉल्ट 1 है।
rowspan - पंक्तियों की संख्या निर्धारित करता है।
डिफ़ॉल्ट 1 है।


कोशिकाओं का विलय करो विशेषता का उपयोग करके शीर्ष पंक्ति में कॉल्सपन :

HTML टेबल

पंक्ति 1 सेल 1 + 2
पंक्ति 2 सेल 1 पंक्ति 2 सेल 2

परिणाम:

मैं तालिका का आकार कैसे निर्धारित करूं?

तालिका की ऊंचाई और चौड़ाई निर्धारित करने के लिए, निम्नलिखित विशेषताओं का उपयोग करें:

चौड़ाई - टेबल की चौड़ाई। आकार पिक्सेल में या प्रतिशत के रूप में सेट किया गया है।
ऊंचाई - टेबल की ऊंचाई। आकार पिक्सेल में या प्रतिशत के रूप में सेट किया गया है।

HTML टेबल

पंक्ति 1 सेल 1row1 सेल 2
पंक्ति 2 सेल 1 पंक्ति 2 सेल 2

परिणाम:

एक तालिका में सामग्री संरेखित करना

तालिका के अंदर सामग्री (पाठ, चित्र) को संरेखित करने के लिए, आप निम्नलिखित विशेषताओं का उपयोग कर सकते हैं:

संरेखित करें - तालिका में सामग्री का क्षैतिज संरेखण।
विशेषता हेतु संरेखित करें मान असाइन किए गए हैं: बाएँ (डिफ़ॉल्ट), केंद्र, सही.
बाएं -
सामग्री को बाईं ओर धकेलें;
केंद्र -केंद्र में सेट;
सही -
सामग्री को दाईं ओर पुश करें

वेलिजन - तालिका में सामग्री का ऊर्ध्वाधर संरेखण।
विशेषता हेतु वेलिजन मान असाइन किए गए हैं: ऊपर, नीचे, मध्य.
ऊपर सामग्री को शीर्ष पर दबाएं;
तल सामग्री को नीचे की ओर धकेलें;
मध्य बीच में सामग्री सेट करें

HTML टेबल

पंक्ति 1 सेल 1 row1 सेल 2
पंक्ति 2 सेल 1 पंक्ति 2 सेल 2

परिणाम:

टेबल बैकग्राउंड कैसे बनाएं?

आप अपनी सभी कोशिकाओं के लिए तालिका की पृष्ठभूमि भी सेट कर सकते हैं, साथ ही साथ प्रत्येक सेल के लिए अलग से। आप पृष्ठभूमि को एक रंग के साथ, या एक तस्वीर के साथ सेट कर सकते हैं। पृष्ठभूमि के लिए दो विशेषताएँ हैं:

BGCOLOR - पूरी तालिका के लिए या प्रत्येक सेल के लिए अलग से पृष्ठभूमि का रंग। रंग कोड या शब्द द्वारा दिया जाता है।
पृष्ठभूमि - तालिका में पृष्ठभूमि चित्र से भरी हुई है।

ध्यान: यदि आप पृष्ठभूमि को एक रंग या पूरी तालिका के लिए पृष्ठभूमि छवि के साथ सेट करना चाहते हैं, तो विशेषताएँ टैग में सेट की जानी चाहिए

... और अगर केवल एक विशिष्ट सेल के लिए, तो टैग (तालिका पंक्ति) और टैग के साथ समाप्त होता है... एक पंक्ति में एक एकल सेल को टैग की एक जोड़ी द्वारा तैयार किया गया है (तालिका डेटा) या (टेबल हैडर)। टैग ... अंत कोड, तथा छोड़ा जा सकता है। इस स्थिति में, पंक्ति या सेल विवरण का अंत अगली पंक्ति या सेल की शुरुआत या तालिका का अंत है। अंत तालिका टैग
.

एक बेहतर समझ के लिए, एक उदाहरण देखें:

HTML टेबल

पंक्ति 1 सेल 1 row1 सेल 2
पंक्ति 2 सेल 1 पंक्ति 2 सेल 2

परिणाम:

ध्यान: यदि चित्र प्रति सेल आकार में छोटा है, तो यह तब तक दोहराएगा जब तक कि यह सेल को अंत तक न भर दे। यदि चित्र सेल से बड़ा है, तो छवि का बैकग्राउंड सेल आकार में फिट होने के लिए क्रॉप किया जाएगा।

और अंत में, मैं आपको इसके बारे में और बताऊंगा दो उपयोगी विशेषताएँ.

यदि आप अचानक सभी कोशिकाओं के बीच की दूरी बढ़ाना चाहते हैं, तो निम्नलिखित विशेषताएं मदद करेंगी:

CELLPADDING -Html टेबल के प्रत्येक सेल के फ्रेम और उसमें मौजूद सामग्री के बीच का अंतर।

HTML टेबल

पंक्ति 1 सेल 1 row1 सेल 2
पंक्ति 2 सेल 1 पंक्ति 2 सेल 2

परिणाम:

पंक्ति 1 सेल 1 row1 सेल 2
पंक्ति 2 सेल 1 पंक्ति 2 सेल 2

cellspacing पड़ोसी कोशिकाओं की सीमाओं के बीच -Dance।

HTML टेबल

पंक्ति 1 सेल 1 row1 सेल 2
पंक्ति 2 सेल 1 पंक्ति 2 सेल 2

परिणाम:

पंक्ति 1 सेल 1 row1 सेल 2
पंक्ति 2 सेल 1 पंक्ति 2 सेल 2

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

अध्याय 4

HTML टेबल

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

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

तथा
प्रदर्शित फ़ॉन्ट में है और सभी रिक्त स्थान और टैब महत्वपूर्ण हैं। ऐसे पाठ के लिए संरेखण कार्य मैन्युअल रूप से किया गया था, जिसने दस्तावेजों के निर्माण को काफी धीमा कर दिया था। सारणीबद्ध डेटा के लिए समर्थन वास्तविक मानक बन गया है, क्योंकि यह मूल रूप से सभी प्रमुख ब्राउज़रों में लागू किया गया था और HTML 3.2 विनिर्देश में काफी समय तय होने के बाद ही किया गया था।

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

चावल . 4.1. विशिष्ट HTML तालिका उदाहरण


चावल . 4.2. सीमाओं के बिना एक तालिका का उदाहरण

बेसिक HTML टेबल्स बनाना

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

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

और टैग के साथ समाप्त होता है
... टैग की इस जोड़ी के अंदर तालिका की सामग्री का विवरण है। किसी भी तालिका में एक या अधिक पंक्तियाँ होती हैं, जिनमें से प्रत्येक व्यक्तिगत कोशिकाओं के लिए डेटा निर्दिष्ट करती है।

प्रत्येक पंक्ति टैग के साथ शुरू होती है

तथा तथा आमतौर पर टेबल हेडर सेल के लिए उपयोग किया जाता है, और - डेटा कोशिकाओं के लिए। उपयोग में अंतर केवल कोशिकाओं की सामग्री को प्रदर्शित करने के लिए डिफ़ॉल्ट रूप से उपयोग किए जाने वाले फ़ॉन्ट के प्रकार में निहित है, साथ ही सेल के भीतर डेटा का स्थान भी है। प्रकार की कोशिकाओं की सामग्री बोल्ड और केंद्रित (ALIGN \u003d CENTER, VALIGN \u003d MIDDLE) में प्रदर्शित किया गया है। एक टैग द्वारा परिभाषित कोशिकाएं डिफ़ॉल्ट प्रदर्शन डेटा बाईं ओर (ALIGN \u003d LEFT) और ऊर्ध्वाधर दिशा में मध्य (VALIGN \u003d MIDDLE) से संरेखित।

टैग

तथा तालिका पंक्ति विवरण के बाहर दिखाई नहीं दे सकता है
छोड़ा नहीं जा सकता।

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

तालिका में एक शीर्षक हो सकता है, जो कुछ टैग में निहित है तथा... तालिका शीर्षलेख का विवरण टैग के अंदर स्थित होना चाहिए

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

डिफ़ॉल्ट रूप से, तालिका शीर्षलेख पाठ इसके ऊपर (ALIGN \u003d TOP) स्थित होता है और क्षैतिज रूप से केंद्रित होता है।

सूचीबद्ध टैग में पैरामीटर हो सकते हैं, जिनमें से संख्या और मूल्य अलग-अलग हैं। हालांकि, सबसे सरल मामले में, टैग का उपयोग मापदंडों के बिना किया जाता है, जो डिफ़ॉल्ट मानों पर ले जाता है।

प्राथमिक तालिकाओं के निर्माण के लिए यह जानकारी काफी है। आइए एक सरल तालिका का उदाहरण दें जिसमें दो पंक्तियों और दो स्तंभों का समावेश है, जिसका प्रदर्शन अंजीर में दिखाया गया है। 4.3।

सरलतम तालिका का एक उदाहरण

पंक्ति 1 की सेल 1 सेल 2 पंक्ति 1
पंक्ति 2 का सेल 1 सेल 2 पंक्ति 2


चित्र: 4.Z. सरलतम तालिका का एक उदाहरण

किसी पृष्ठ पर तालिकाएँ देखें

आइए विभिन्न मापदंडों के उद्देश्य को देखें, जिनका उपयोग टेबल का वर्णन करने वाले टैग में किया जा सकता है।

टेबल हेडर

टेबल हैडर टैग एकमात्र मान्य पैरामीटर ALIGN है, जो TOP (तालिका के ऊपर शीर्षलेख) या BOTTOM (तालिका के नीचे शीर्ष लेख) हो सकता है। ALIGN पैरामीटर को छोड़ा जा सकता है, जो ALIGN \u003d TOP के मान से मेल खाता है। क्षैतिज दिशा में, तालिका शीर्षक हमेशा केंद्रित होता है। तालिका में शीर्षक नहीं हो सकता है। ज्यादातर मामलों में, सादे पाठ का उपयोग तालिका शीर्षक के रूप में किया जाता है, जिसे HTML विनिर्देश द्वारा विनियमित किया जाता है, लेकिन वास्तव में, टैग के बीच तथा अनुभाग में उपयोग किए गए किसी भी HTML तत्वों को लिखना अनुमत है ... यहाँ तालिका शीर्षक प्रविष्टि का एक उदाहरण दिया गया है:

तालिका के निचले भाग में स्थित शीर्षक

यदि यह शीर्ष लेख विवरण उपरोक्त उदाहरण में जोड़ा गया है, तो तालिका को चित्र में दिखाया गया है। 4.4।


चित्र: 4.4।शीर्षक के साथ तालिका

Microsoft इंटरनेट एक्सप्लोरर शीर्षक का स्थान चुनने के लिए अतिरिक्त विकल्प प्रदान करता है। ऊपर दिए गए मानों के साथ, ALIGN पैरामीटर क्षैतिज संरेखण के लिए LEFT, CENTER और राइट मानों को स्वीकार करता है। ध्यान दें कि यह उन दुर्लभ मामलों में से एक है जहाँ क्षैतिज और ऊर्ध्वाधर दोनों संरेखण के लिए व्यापक रूप से उपयोग किए जाने वाले ALIGN पैरामीटर का उपयोग किया जा सकता है। उदाहरण के लिए, ALIGN \u003d RIGHT यह सुनिश्चित करेगी कि शीर्षक तालिका के दाईं और ऊपर स्थित है। यदि आप ALIGN \u003d BOTTOM लिखते हैं, तो, जैसा कि ऊपर दिए गए उदाहरण में, शीर्षक तालिका के नीचे स्थित होगा। हालांकि, एक ही शीर्ष लेख में दो बार ALIGN पैरामीटर का उपयोग करने की अनुमति नहीं है। इसलिए, ऊर्ध्वाधर संरेखण के लिए एक विशेष पैरामीटर अतिरिक्त रूप से पेश किया गया था - VALIGN, जो मान TOP या BOTTOM लेता है। उदाहरण के लिए, तालिका के निचले भाग में शीर्ष के लिए, बाईं ओर संरेखित, विवरण इस तरह दिखता है:

वाम-औचित्य शीर्ष

Microsoft इंटरनेट एक्सप्लोरर में शीर्षक के इस विवरण के साथ तालिका निम्नानुसार प्रदर्शित की जाएगी (छवि 4.5)। यदि इस उदाहरण को नेटस्केप में देखा जाता है, तो शीर्षक डिफ़ॉल्ट रूप से, टेबल के ऊपर और मध्य में क्षैतिज रूप से रखा जाएगा।


चित्र: 4.5। Microsoft इंटरनेट एक्सप्लोरर द्वारा टेबल हेडर का क्षैतिज संरेखण

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

टैग पैरामीटर

टेबल बनाते समय उपयोग किया जाने वाला मुख्य टैग टैग है

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

बोर्डर पैरामीटर

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

तालिका में फ़्रेम जोड़ने के लिए, आपको कोड में शामिल होना चाहिए

एक BORDER पैरामीटर, जो संख्यात्मक हो सकता है।

उदाहरण के लिए,

या
.

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

10-पिक्सेल बॉर्डर वाली तालिका का एक उदाहरण अंजीर में दिखाया गया है। 4.6।


चित्र: 4.6।10-पिक्सेल बॉर्डर वाली तालिका

HTML 3.0 विनिर्देश में BORDER पैरामीटर के लिए कोई मान शामिल नहीं था। यह केवल HTML 3.2 में किया गया है। उदाहरण के लिए, Microsoft इंटरनेट एक्सप्लोरर के पुराने संस्करणों ने संख्यात्मक मान निर्दिष्ट करने की अनुमति नहीं दी थी।

ध्यान दें कि बोर्डर पैरामीटर की अनुपस्थिति में, फ़्रेम खींचे नहीं जाते हैं, लेकिन उनके लिए जगह छोड़ दी जाती है (यह केवल एनएफ़स्केप पर लागू होता है)। बोर्डर पैरामीटर की अनुपस्थिति या उपस्थिति में तालिका का कुल आकार नहीं बदलता है (अपवाद BORDER \u003d 0 स्थापित करने का मामला है)। इस प्रकार, इन मामलों में दो आसन्न कोशिकाओं के बीच न्यूनतम दूरी फ्रेम की मोटाई, यानी दो पिक्सेल के बराबर होगी। संभव है कि बॉर्डर्स \u003d 0 की स्थापना के द्वारा कोशिकाओं को एक-दूसरे के करीब रखा जा सके, जिसका अर्थ है कोई सीमा नहीं। कुछ ब्राउज़र BORDER पैरामीटर के संख्यात्मक मान को सेट करने का समर्थन नहीं कर सकते हैं, फिर शून्य के बराबर मान को अनदेखा किया जाएगा और तालिका को सीमाओं के साथ खींचा जाएगा।

यहाँ कुछ उदाहरण हैं:

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

CELLSPACING पैरामीटर

पैरामीटर नोटेशन फ़ॉर्म: CELLSPACING \u003d num, जहाँ पिक्सेल में पैरामीटर का संख्यात्मक मान है, जिसे छोड़ा नहीं जा सकता है। संख्यात्मक मान समीपस्थ कोशिकाओं (अधिक सटीक रूप से, सेल फ्रेम के बीच) क्षैतिज और लंबवत दोनों के बीच की दूरी को निर्धारित करता है। डिफ़ॉल्ट रूप से, मान को दो माना जाता है। ध्यान दें कि परंपरागत रूप से प्रकाशन प्रणालियों में, आसन्न तालिका कोशिकाओं की एक आम सीमा होती है। HTML तालिकाओं में, डिफ़ॉल्ट रूप से, उनके बीच जगह छोड़ दी जाती है, जैसा कि ऊपर की आकृति (चित्रा 4.6) में स्पष्ट रूप से देखा जा सकता है। जब आप CELLSPACING \u003d 0 सेट करते हैं, तो आसन्न कोशिकाओं की सीमाएं मर्ज हो जाएंगी और तालिका के एक ही ग्रिड (चित्र। 4.7) का प्रभाव पैदा करेगी।


चित्र: 4.7।CELLSPACING \u003d 0 के साथ तालिका

CELLPADDING पैरामीटर

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

अंजीर में। 4.8 CELLPADDING \u003d 10 के साथ तालिका का एक उदाहरण दिखाता है।


चित्र: 4.8।CELLPADDING \u003d 10 के साथ तालिका

CELLPADDING और CELLSPACING पैरामीटर एक-दूसरे के समान हैं। सीमाओं के बिना एक तालिका के लिए, एक या दूसरे पैरामीटर को बदलने से एक ही परिणाम होता है। दोनों पैरामीटर क्षैतिज और लंबवत रूप से संबंधित पैडिंग को प्रभावित करते हैं। दुर्भाग्य से, क्षैतिज और ऊर्ध्वाधर मार्जिन का अलग-अलग प्रबंधन किया जाता है, उदाहरण के लिए, छवियों से मार्जिन के लिए (टैग के HSPACE और VSPACE पैरामीटर ), नहीं दिया गया।

सभी तीन पैरामीटर - बोर्डर, सेलपैडिंग और सेलस्पैकिंग एक दूसरे से स्वतंत्र रूप से कार्य करते हैं, यदि उनमें से कोई भी छोड़ा गया है, तो उसका डिफ़ॉल्ट मान लिया जाता है। विशेष रूप से, यदि उपरोक्त सभी मापदंडों को छोड़ दिया जाता है, तो आसन्न कोशिकाओं के डेटा के बीच न्यूनतम दूरी 6 पिक्सेल (नेटस्केप के लिए) होगी। यह मान CELLSPACING के लिए दो पिक्सेल, CELLPADDING के लिए एक पिक्सेल और प्रत्येक सेल की सीमा के लिए एक पिक्सेल से बना है। सबसे कॉम्पैक्ट तालिका निम्नलिखित विवरण निर्दिष्ट करके प्राप्त की जाएगी:

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

WIDTH और HEIGHT पैरामीटर

तालिकाओं को प्रदर्शित करते समय, उनकी चौड़ाई और ऊंचाई स्वचालित रूप से ब्राउज़र द्वारा गणना की जाती है और कई कारकों पर निर्भर करती है: पूरे दस्तावेज़ के विवरण में निर्दिष्ट पैरामीटर, इस तालिका, इसकी व्यक्तिगत पंक्तियों और कोशिकाओं, कोशिकाओं की सामग्री, साथ ही साथ पैरामीटर किसी विशेष ब्राउज़र में दस्तावेज़ को देखते समय निर्धारित होते हैं। , उदाहरण के लिए, फ़ॉन्ट प्रकार और आकार, व्यूपोर्ट आकार, आदि प्रदर्शित करते समय, तालिका आकार की गणना स्वचालित रूप से इन कारकों को ध्यान में रखते हुए की जाती है, जबकि तालिका को सबसे सुविधाजनक रूप में प्रस्तुत करने का प्रयास किया जाता है - तालिका की व्यवस्था करने के लिए ताकि यह व्यूपोर्ट में फिट हो जाए। बड़े दस्तावेज़ों को देखने की सामान्य योजना, एक नियम के रूप में, दस्तावेज़ की सामग्री के रैखिक स्क्रॉलिंग के लिए उबलती है और पाठ को विभिन्न तालिकाओं, छवियों आदि के साथ मिलाया जाता है। यह HTML दस्तावेजों और किसी भी पाठ संपादकों में बनाए गए साधारण दस्तावेज़ों पर लागू होता है। ... अधिकांश टेक्स्ट एडिटर (जैसे कि माइक्रोसॉफ्ट वर्ड) और एचटीएमएल ब्राउज़र स्वचालित रूप से टेक्स्ट को प्रारूपित करते हैं (यदि संभव हो तो) ताकि लाइनें व्यूपोर्ट की चौड़ाई से अधिक न हों। यह दस्तावेज़ की क्षैतिज स्क्रॉलिंग की आवश्यकता से बचा जाता है। टेबल के साथ ब्राउज़रों द्वारा इसी तरह की कार्रवाई की जाती है - यदि संभव हो, तो उन्हें प्रारूपित करें ताकि तालिका की चौड़ाई व्यूपोर्ट की चौड़ाई से अधिक न हो। यह निष्कर्ष निकाला जा सकता है कि तालिकाओं की चौड़ाई एक अधिक महत्वपूर्ण, सर्वोपरि पैरामीटर है, जिसकी गणना ऊंचाई की तुलना में सबसे पहले की जाती है।

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

... अंकन फ़ॉर्म: WIDTH \u003d संख्या या WIDTH \u003d संख्या%, जहाँ संख्या पिक्सेल में संपूर्ण तालिका की चौड़ाई या संपूर्ण विंडो आकार के प्रतिशत के रूप में संख्यात्मक मान है। ध्यान दें कि 100% से अधिक मूल्यों को निर्दिष्ट करने की अनुमति है, हालांकि किसी ऐसे मामले की कल्पना करना मुश्किल है जहां यह आवश्यक है। उदाहरण:

.

व्यक्तिगत कोशिकाओं के लिए समान पैरामीटर निर्धारित किए जा सकते हैं। ध्यान दें कि पैरामीटर के लिए एक विशिष्ट मूल्य निर्दिष्ट करना, उदाहरण के लिए WIDTH \u003d 200, इसका मतलब यह नहीं है कि तालिका में किसी भी मामले में निर्दिष्ट चौड़ाई होगी, लेकिन केवल अनुशंसित चौड़ाई निर्धारित करता है, जिसे जब भी संभव हो बनाए रखा जाएगा। आइए इसे उदाहरणों के साथ समझाते हैं। मान लीजिए कि आपके पास एक तालिका है, इन शर्तों के तहत, डिफ़ॉल्ट रूप से निर्दिष्ट एक से कम चौड़ाई होगी। इस स्थिति में, ब्राउज़र तालिका की सभी स्तंभों को आनुपातिक रूप से विस्तारित करके तालिका की चौड़ाई को आवश्यक तक बढ़ा देगा। व्यूपोर्ट को नीचे करने से तालिका की चौड़ाई नहीं बदलेगी और इसे देखने के लिए क्षैतिज रूप से स्क्रॉल करने की आवश्यकता हो सकती है। यदि तालिका में निर्दिष्ट की तुलना में एक डिफ़ॉल्ट चौड़ाई अधिक है, तो ब्राउज़र इसकी चौड़ाई को कम करने की कोशिश करेगा, सबसे पहले, व्यक्तिगत कॉलम की चौड़ाई को कम करने के लिए, जिसके लिए निर्दिष्ट चौड़ाई आवश्यक से अधिक है, और दूसरी बात, कई पंक्तियों में पाठ को अलग-अलग कक्षों में तोड़कर। तालिका की ऊंचाई बढ़ रही है। ये क्रियाएं आवश्यक तालिका आकार प्रदान नहीं कर सकती हैं, और फिर इसमें सबसे छोटी संभव चौड़ाई होगी। तालिकाओं को देखने के लिए आयाम नहीं होने पर तालिकाओं के लिए समान कार्य किए जाते हैं।

विभिन्न ब्राउज़रों के लिए टेबल सेट करने के लिए विशिष्ट एल्गोरिदम थोड़ा भिन्न हो सकते हैं।

ALIGN पैरामीटर

दिए गए टैग पैरामीटर

व्यूपोर्ट में तालिका की क्षैतिज स्थिति को परिभाषित करता है। मान्य मूल्य LEFT (बाएं न्यायसंगत) और RIGHT (दाएं न्यायोचित) हैं। डिफ़ॉल्ट रूप से, तालिकाओं को संरेखित किया जाता है। ध्यान दें कि मान्य मानों में संरेखण पैरामीटर के लिए एक विशिष्ट मूल्य शामिल नहीं है - केंद्र। कुछ HTML स्रोत इस मामले में मान्य केंद्र (केंद्र) का हवाला देते हैं। यह HTML विनिर्देशन का अनुसरण करता है, लेकिन व्यवहार में, नेटस्केप नेविगेटर और Microsoft इंटरनेट एक्सप्लोरर दोनों केवल दो मूल्यों को लागू करते हैं। तथ्य यह है कि टैग में ALIGN पैरामीटर की उपस्थिति
न केवल तालिका का स्थान निर्धारित करता है, बल्कि छवियों के प्रवाह के समान पाठ को विपरीत पक्ष से तालिका के चारों ओर प्रवाह करने की अनुमति देता है। किसी भी मामले में दोनों ओर से तालिका के चारों ओर पाठ लपेटने की सुविधा नहीं दी गई है। अधिक सटीक प्रवाह नियंत्रण के लिए, टैग का उपयोग करें
CLEAR पैरामीटर के साथ उसी तरह से किया जाता है जैसे कि इसके लिए किया जाता है ... यदि ALIGN पैरामीटर छोड़ा गया है, तो टेबल की दाईं और / या बाईं ओर का स्थान हमेशा खाली रहेगा, इसकी चौड़ाई के बावजूद। यदि तालिका को चारों ओर लपेटने के लिए पाठ की आवश्यकता नहीं है, तो आप व्यूपोर्ट के केंद्र में अपनी स्थिति प्राप्त कर सकते हैं। इसके लिए, उदाहरण के लिए, संपूर्ण तालिका विवरण को टैग की एक जोड़ी के अंदर रखा जा सकता है
तथा
.

आइए लिपटे पाठ के साथ एक तालिका का एक उदाहरण दें, जिसका प्रदर्शन अंजीर में दिखाया गया है। 4.9।

इसके चारों ओर प्रवाहित पाठ के साथ तालिका


एक वयस्क

सेंट पीटर्सबर्ग की जनसंख्या

  • अब्राहम
  • सिकंदर
  • अलेक्सई
  • अल्बर्ट
  • अनातोली
  • आंद्रेई

  • Arkady
  • बोरिस
  • Vadim
  • वेलेंटाइंस
  • वालेरी
  • Vasiliy

  • विजेता
  • विटाली
  • व्लादिमीर
  • व्लादिस्लाव
  • व्याचेस्लाव

  • गेनाडी
  • जॉर्ज
  • हरमन
  • ग्रेगरी
  • दिमित्री

  • एव्जेनी
  • Efim
  • इवान
  • इगोर
  • इल्या
  • यूसुफ
  • Konstantin

  • एक शेर
  • लियोनिद
  • माइकल
  • निकोले
  • ओलेग
  • पॉल
  • पीटर

  • उपन्यास
  • Semyon
  • सर्गेई
  • स्टानिस्लाव
  • एडवर्ड
  • यूरी
  • याकूब








  • 43 सबसे आम नामों में नमूने का 92% कवर है।

    चित्र: 4.9। बहते हुए पाठ के साथ बॉर्डरलेस टेबल

    इस दस्तावेज़ में ALIGN \u003d LEFT संरेखण पैरामीटर के साथ एक सीमा-रहित तालिका है, जो तालिका के पीछे पाठ को इसके दाईं ओर स्थित करने की अनुमति देता है। तालिका में केवल एक पंक्ति होती है, जिसमें दो सेल होते हैं। प्रत्येक सेल में एक अनियंत्रित सूची का हिस्सा होता है

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

      गलत फैन्स्ला।

      आइए ऐसे पृष्ठ बनाने के लिए थोड़ा अलग उदाहरण दें, जिसका प्रदर्शन अंजीर में दिखाया गया है। 4.10।

      पाठ लपेटे बिना तालिका

      सबसे आम पुरुष नाम

      सेंट पीटर्सबर्ग की वयस्क जनसंख्या

    • अब्राहम
    • सिकंदर
    • अलेक्सई
    • अल्बर्ट
    • अनातोली
    • आंद्रेई

    • Arkady
    • बोरिस
    • Vadim
    • वेलेंटाइंस
    • वालेरी
    • Vasiliy

    • विजेता
    • विटाली
    • व्लादिमीर
    • व्लादिस्लाव
    • व्याचेस्लाव

    • गेनाडी
    • जॉर्ज
    • हरमन
    • ग्रेगरी
    • दिमित्री

    • एव्जेनी
    • Efim
    • इवान
    • इगोर
    • इल्या
    • यूसुफ
    • Konstantin

    • एक शेर
    • लियोनिद
    • माइकल
    • निकोले
    • ओलेग
    • पॉल
    • पीटर

    • उपन्यास
    • Semyon
    • सर्गेई
    • स्टानिस्लाव
    • एडवर्ड
    • यूरी
    • याकूब

    • प्रस्तुत डेटा सेंट पीटर्सबर्ग में रहने वाले 18 वर्ष से अधिक उम्र के 5000 पुरुषों की जानकारी वाले प्रतिनिधि नमूने के विश्लेषण के आधार पर प्राप्त किए गए थे।
      43 सबसे आम नामों में नमूने का 92% कवर है।
      अन्य नामों में से प्रत्येक की घटना की आवृत्ति 0.3% से अधिक नहीं होती है

      चित्र: 4.10। तीन स्तंभों वाली एक सीमाहीन तालिका

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

      तालिका के अंदर डेटा स्वरूपित करना

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

      ,
      ,


      , हेडर कोड - से

      इससे पहले

      , चरित्र प्रारूपण टैग -<В>, , , , , , , टैग ग्राफिक चित्र सम्मिलित करें , हाइपरटेक्स्ट लिंक<А> और इसी तरह। तुरंत, हम इस बात पर जोर देते हैं कि एक अलग सेल के भीतर निर्दिष्ट टैग का दायरा इस सेल की सीमाओं तक सीमित है, भले ही समाप्त टैग की उपस्थिति की परवाह किए बिना। उदाहरण के लिए, यदि एक पाठ रंग को सेल के अंदर परिभाषित किया गया है - , तब भले ही कोई समाप्ति कोड न हो या तालिका के कई कक्षों या पंक्तियों में इसे स्थिति में रखने से, अगले सेल का पाठ डिफ़ॉल्ट रंग में परिलक्षित होगा।

      निम्न विकल्प तालिका कोशिकाओं के भीतर डेटा को प्रारूपित करने के लिए उपलब्ध हैं।

      सेल सामग्री के लिए संरेखण विकल्प ALIGN और VALIGN हैं। कोड में इस्तेमाल किया जा सकता है , तथा ... क्षैतिज संरेखण पैरामीटर ALIGN LEFT, RIGHT और CENTER हो सकता है (डिफ़ॉल्ट के लिए LEFT है और केंद्र के लिए )। VALIGN वर्टिकल अलाइनमेंट पैरामीटर TOP (टॉप), BOTTOM (बॉटम), MIDDLE (मध्य), BASELINE (बेसलाइन) हो सकता है। डिफ़ॉल्ट MIDDLE है। बेसलाइन संरेखण सुनिश्चित करता है कि सभी कक्षों में एक पंक्ति का पाठ एक पंक्ति में लंगर डाले। कोड स्तर पर संरेखण विकल्प सेट करना किसी दिए गए पंक्ति के सभी कोशिकाओं के लिए संरेखण को परिभाषित करता है, जबकि पंक्ति के प्रत्येक व्यक्तिगत सेल में अपने स्वयं के मापदंडों को परिभाषित किया जा सकता है जो निर्दिष्ट मापदंडों के प्रभाव को ओवरराइड करता है .

      यहां एक तालिका का उदाहरण दिया गया है जिसमें पहले स्तंभ की कोशिकाओं में डेटा दाईं ओर संरेखित है, दूसरा स्तंभ केंद्रित है, और तीसरा बाईं ओर (डिफ़ॉल्ट) से संरेखित है:

      तालिका तत्वों को संरेखित करना

      सेल 1 सेल 2 सेल 3
      सेल 4 सेल 5 सेल 6

      ब्राउज़र द्वारा इस उदाहरण का प्रदर्शन अंजीर में दिखाया गया है। 4.11।


      चित्र: 4.11।तालिका कोशिकाओं में डेटा संरेखित करना

      NowRAP पैरामीटर सेल टेक्स्ट को स्वचालित रूप से लाइनों में तोड़ने की क्षमता को अक्षम कर देता है। कोड में इस्तेमाल किया जा सकता है , तथा ... इस पैरामीटर के अनुचित उपयोग से बचा जाना चाहिए, क्योंकि यह तालिकाओं का गतिशील रूप से आकार बदलने और उनकी धारणा को ख़राब करने की क्षमता को काफी कम कर सकता है। ज्यादातर मामलों में, NowRAP को व्यक्तिगत कोशिकाओं पर लागू करने के लिए पर्याप्त है जो वास्तव में एक नई लाइन पर शब्द रैपिंग के निषेध की आवश्यकता होती है। शब्दों को लपेटना केवल शब्दों (रिक्त स्थान) के बीच विभाजकों द्वारा किया जाता है, और कुछ मामलों में, कुछ वर्णों में पाठ को तोड़ने के लिए, स्थान वर्ण के बजाय, गैर-ब्रेकिंग स्पेस (NonBreaking Space) का कोड सेट करें। उदाहरणों में ऐसे मामले शामिल हैं जहां एक अंतर की सिफारिश नहीं की जाती है - एक संख्यात्मक मूल्य और किसी दिए गए मूल्य के माप की इकाई के बीच; अंतिम नाम और आद्याक्षर के बीच। तो, पाठ 650 किमी या येल्तसिन बी.एन. इसे फॉर्म में लिखने की सलाह दी जाती है650 किमी और येल्तसिन बी.एन.

      पैरामीटर WIDTH और HEIGHT को कोड में इस्तेमाल किया जा सकता है तथा ... उनका सिंटैक्स टैग के लिए इन मापदंडों के सिंटैक्स के समान है

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

      जटिल तालिकाओं को कई आसन्न कोशिकाओं को क्षैतिज या लंबवत रूप से एक में संयोजित करने की आवश्यकता होती है। यह सुविधा कोड में सेट COLSPAN (कोलिमन स्पैनिंग) और ROWSPAN (ROW SPANning) के मापदंडों का उपयोग करते हुए कार्यान्वित की जाती है।

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

      अंजीर में। 4.17 उपरोक्त कोड के कार्यान्वयन का परिणाम दिखाता है, साथ ही टैग में RULES \u003d GROUPS प्रविष्टि के साथ ऐसी तालिका प्रदर्शित करने का एक प्रकार है।

      या ... अंकन फ़ॉर्म: COLSPAN \u003d num, जहाँ संख्या एक संख्यात्मक मान है जो यह निर्धारित करता है कि क्षैतिज रूप से वर्तमान सेल का विस्तार करने के लिए कितने कॉलम हैं। ROWSPAN पैरामीटर का उपयोग समान है, केवल यहां आप उन पंक्तियों की संख्या निर्दिष्ट करते हैं जिन्हें वर्तमान सेल को लंबवत रूप से कैप्चर करना चाहिए। डिफ़ॉल्ट रूप से, ये पैरामीटर एक पर सेट हैं। एक सेल के लिए दोनों मापदंडों के मूल्यों की एक साथ सेटिंग की अनुमति है। इन मापदंडों के मूल्यों को सही ढंग से सेट करना बहुत सरल कार्य नहीं हो सकता है, खासकर जब से अधिकांश HTML संपादक आपको केवल HTML कोड की बाद की पीढ़ी के साथ नेत्रहीन निर्माण करने की अनुमति देते हैं।

      अंजीर में। 4.12 एक तालिका प्रदर्शित करने का एक उदाहरण दिखाता है, जो निम्न HTML कोड का उपयोग करके प्राप्त किया जाता है:

      COLSPAN और ROWSPAN मापदंडों का उपयोग करना

      सेल दो लाइनों फैले सेल दो कॉलम फैले
      सेल 3 सेल 4
      सेल 5 सेल 6 सेल 7


      चित्र: 4.12। कई पंक्तियों या स्तंभों वाली कोशिकाओं के साथ तालिका

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

      यहां HTML कोड का एक उदाहरण है (जिसका प्रदर्शन अंजीर में दिखाया गया है। 4.13), जिसमें विस्तारित कोशिकाओं को गलत तरीके से बनाया गया है।

      विस्तारित कोशिकाओं का अवैध उपयोग

      सेल 1 सेल 2

      सेल 3
      (सामान्य
      हा तीन
      लाइनों)

      सेल 4सेल 5
      सेल 6 सेल 7 (दो कॉलम में फैला हुआ)

      चित्र: 4.13।विस्तारित कोशिकाओं की गलत परिभाषा का परिणाम (पाठ ओवरले)

      BGCOLOR पैरामीटर संपूर्ण तालिका, अलग-अलग पंक्तियों या कोशिकाओं के लिए पृष्ठभूमि का रंग निर्धारित करता है। टैग में हो सकता है

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


      चित्र: 4.15। खाली टेबल सेल अलग-अलग ब्राउज़रों द्वारा अलग-अलग तरीके से प्रस्तुत करता है

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

      तालिका कॉलम में डेटा संरेखित करना

      टेबल बनाते समय एक आम समस्या व्यक्तिगत पंक्तियों या स्तंभों के लिए संरेखण विकल्प सेट कर रही है। वर्तमान पंक्ति के सभी कक्षों की सामग्री को संरेखित करने के लिए, बस कोड में आवश्यक पैरामीटर सेट करें

      ... हालांकि, अधिक बार नहीं, एक ही कॉलम में सभी वस्तुओं के लिए एक ही संरेखण सुनिश्चित करना आवश्यक है, क्योंकि ज्यादातर मामलों में, कॉलम में समरूप डेटा होता है। HTML के पुराने संस्करणों में, इसके लिए COLSPEC पैरामीटर (कॉलम विनिर्देश) का उपयोग करने का सुझाव दिया गया था, जिसे टैग में निर्दिष्ट किया गया था
      तथा ... यह सुविधा HTML विनिर्देश में शामिल नहीं है, लेकिन यह नेटस्केप और Microsoft इंटरनेट एक्सप्लोरर दोनों द्वारा समर्थित है। रिकॉर्ड फॉर्म टैग के लिए समान है , क्रमशः: BGCOLOR \u003d मान, जहां RGB प्रारूप में रंग सामग्री या उसका नाम मान के रूप में निर्दिष्ट किया गया है।

      उदाहरण:

      या .

      नेस्टेड टेबल

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

      यहां एक नेस्टिंग स्तर का उपयोग करके तालिका का एक उदाहरण दिया गया है।

      लेनिनग्राद क्षेत्र के शहर

      लेनिनग्राद क्षेत्र के शहर

      एच - शहर की जनसंख्या (हजार निवासी, १ ९९ २)

      पी - सेंट पीटर्सबर्ग से दूरी (किमी)

      सेंट पीटर्सबर्ग के अधीनस्थ शहर
      नगरएचपी
      Zelenegopsk 13.6

      50

      कोल्पीनो144.6

      26

      सेंट पीटर्सबर्ग 45.2

      48

      लोमोनोसोव 42.0

      40

      वोरोनिश 25.4

      30

      Petrodvorets 83.8

      29

      पुश्किन 95.1

      24

      सेंट पीटर्सबर्ग में 34.9

      35

      सभी शहर अधीनस्थ हैं
      शासन प्रबंध
      पीटर्सबर्ग, है
      सीधा शहर
      टेलीफ़ोन नंबर।

      क्षेत्रीय शहर
      नगरएचपी
      सेंट पीटर्सबर्ग 21.6

      ALIGN \u003d RIGHT\u003e 245

      Balkhov 50.3

      ALIGN \u003d RIGHT\u003e 122

      Bcevolozhsk 32.9

      24

      Vyborg 80.9 130
      Vysotsk 1.0

      ALIGN \u003d राइट\u003e 159

      Gatchina 80.9 46
      सेंट पीटर्सबर्ग में 11.9

      ALIGN \u003d RIGHT\u003e 147

      सेंट पीटर्सबर्ग 5.9 157
      सेंट पीटर्सबर्ग में 51.5

      ALIGN \u003d RIGHT\u003e 138

      Kirishi 53.8

      ALIGN \u003d RIGHT\u003e 115

      Kirovsk 23.8

      55

      Lodeinoe ध्रुव 27.3

      ALIGN \u003d अधिकार\u003e 244

      Lyga 41.8139

      (तालिका निरंतरता)
      नगरएचपी
      Lyuban 4.7

      85

      नया लडोगा 11.2

      ALIGN \u003d RIGHT\u003e 141

      संतोषजनक 22. 9

      ALIGN \u003d RIGHT\u003e 40

      Pikalevo 25.1

      ALIGN \u003d RIGHT\u003e 246

      सहयोग 23.1285
      प्रिसोर्स्क 6.7137
      सेंट पीटर्सबर्ग 20.5

      ALIGN \u003d RIGHT\u003e 145

      सेंट पीटर्सबर्ग 15.8

      ALIGN \u003d RIGHT\u003e 201

      स्लेट 42.6

      ALIGN \u003d अधिकार\u003e 192

      अनानास पैदा करने का स्थान 57.6

      81

      सेंट पीटर्सबर्ग में 72.0

      ALIGN \u003d RIGHT\u003e 200

      सेंट पीटर्सबर्ग 33.8

      53

      डब्ल्यू 12.5

      64

      चित्र: 4.14।नेस्टेड टेबल का उदाहरण

      इस उदाहरण को प्रदर्शित करने का परिणाम अंजीर में दिखाया गया है। 4.14।

      पहली नज़र में, ऐसा लगता है कि उदाहरण में तालिकाओं का कोई घोंसला नहीं है। वास्तव में, पूरा दस्तावेज एक सीमाहीन तालिका है जिसमें एक हेडिंग होती है और सिर्फ एक पंक्ति जिसमें पांच सेल होते हैं। ऐसी तालिका का संगठन पृष्ठ पर डेटा की व्यवस्था करने का एकमात्र उद्देश्य प्रदान करता है। पहली सेल के अंदर एक अन्य टेबल है, जिसके शीर्षक और तीन कॉलम हैं, इसके बाद बीच में पाठ संरेखित किया गया है। तीसरी और पाँचवीं कोशिकाओं में अलग-अलग सारणियाँ भी होती हैं। दूसरी और चौथी कोशिकाएँ खाली होती हैं, उनमें कोई डेटा नहीं होता है और एक एकल WIDTH पैरामीटर होता है जो इसकी चौड़ाई निर्धारित करता है। उनका उद्देश्य पहले और तीसरे के बीच इंडेंटेशन सेट करना है, साथ ही तीसरे और पांचवें सेल जिसमें तालिकाओं स्थित हैं। ऐसा इंडेंटेशन सेट करने के संभावित विकल्पों में से एक है। एक अन्य विकल्प सेलस्पैकिंग पैरामीटर का उपयोग करना है, जो कोशिकाओं के बीच की दूरी को निर्धारित करता है, लेकिन यह पैरामीटर क्षैतिज और ऊर्ध्वाधर दोनों इंडेंट सेट करता है, जिसकी वर्तमान में आवश्यकता नहीं है। इसके अलावा, निर्दिष्ट चौड़ाई के साथ एक रिक्त सेल सिकुड़ जाएगा जब व्यूपोर्ट को कम कर दिया जाता है, जैसा कि CELLSPACING पैरामीटर (साथ ही साथ CELLPADDING) द्वारा निर्दिष्ट स्थान के विपरीत है। ब्राउज़र में व्यूपोर्ट की चौड़ाई को कम करने के लिए इस उदाहरण का उपयोग करने का प्रयास करें, या, जो पाठ को प्रदर्शित करने के लिए उपयोग किए जाने वाले फ़ॉन्ट के आकार को बढ़ाने के लिए, वही परिणाम देगा। तालिकाओं के बीच की दूरी शून्य से कम हो जाएगी, जिससे सभी सूचनाओं को एक साथ अधिक से अधिक समय तक एक साथ देखना संभव होगा, हालांकि, आगे के परिवर्तन तालिका को नुकसान नहीं पहुंचाएंगे, लेकिन क्षैतिज रूप से स्क्रॉल करने की क्षमता प्रदान करेंगे। एक समान योजना के अनुसार, आप सूचनाओं के नियोजन को व्यवस्थित कर सकते हैं, जिसमें न केवल सारणियाँ शामिल हैं, बल्कि चित्र, पाठ के टुकड़े आदि भी हैं।

      टेबल बनाने की सुविधाएँ

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

      तालिकाओं में रिक्त कोशिकाओं को प्रदर्शित करना

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

      तथा
      और प्रत्येक टेबल कॉलम के संरेखण और चौड़ाई का निर्धारण किया। उदाहरण के लिए, colspec की स्थापना \u003d "L40 R50 C80" ने तालिका के तीन स्तंभों के लिए कोशिकाओं में डेटा के संरेखण को निर्धारित किया: पहले कॉलम के लिए - LEFT, दूसरे के लिए - RIGHT और तीसरे के लिए - CENTER, साथ ही प्रत्येक स्तंभ की चौड़ाई। जैसा कि HTML भाषा विकसित हुई, यह विकल्प छोड़ दिया गया था और वर्तमान में भाषा विनिर्देश का हिस्सा नहीं है और अधिकांश ब्राउज़रों द्वारा समर्थित नहीं है। नतीजतन, नेटस्केप नेविगेटर के पास इस समस्या को हल करने के लिए विशेष उपकरण नहीं हैं, और एकमात्र विकल्प डिफ़ॉल्ट संरेखण का उपयोग करना है, या जहां आवश्यक हो, प्रत्येक सेल में उपयुक्त मान सेट करें।

      Microsoft इंटरनेट एक्सप्लोरर में विशेष टैग हैं -

      तथा ... विवरण के तुरंत बाद ये टैग दिखाई देने चाहिए
      टैग की पहली घटना से पहले .

      टैग पैरामीटर

      तथा वहाँ स्पैन हो सकता है, जो पैरामीटर मानों से प्रभावित होने वाले सन्निहित स्तंभों की संख्या और ALIGN निर्धारित करता है, जो संबंधित कॉलम (या कॉलम) की सभी कोशिकाओं में डेटा के क्षैतिज संरेखण को निर्धारित करता है। ALIGN पैरामीटर के लिए वैध मान LEFT, RIGHT, और CENTER हैं। SPAN के लिए डिफ़ॉल्ट मान एक है।

      टैग

      इसके अलावा आप वैलोन पैरामीटर सेट करने की अनुमति देता है, जो कोशिकाओं में डेटा के ऊर्ध्वाधर संरेखण को निर्धारित करता है। मान्य पैरामीटर के लिए मान्य मान MIDDLE, TOP और BOTTOM हैं।

      टैग के बीच अंतर

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

      चलिए एक उदाहरण देते हैं। मान लीजिए कि आप 6 स्तंभों वाली एक तालिका बनाना चाहते हैं, जिनमें से पहले तीन डेटा दाईं ओर संरेखित हैं, और अगले तीन बीच में हैं। इस समस्या को हल करने के लिए, आपको निम्नलिखित HTML कोड लिखना चाहिए:

      (तालिका के लिए डेटा)

      इस कोड को प्रदर्शित करने का परिणाम अंजीर में दिखाया गया है। 4.16।


      चित्र: 4.16। सेल समूहों में विभिन्न डेटा संरेखण विकल्पों के साथ तालिका

      एक और उदाहरण। मान लें कि पिछली तालिका में, पहले दो स्तंभों को दाईं ओर, और तीसरे को - बीच में, तीनों स्तंभों को समूहीकृत किया जाना चाहिए। अगले तीन स्तंभों को भी एक साथ समूहीकृत किया जाना चाहिए और पहले समूह के समान संरेखण होना चाहिए। इस समस्या को हल करने के लिए, आपको निम्नलिखित HTML कोड लिखना चाहिए:

      (तालिका के लिए डेटा)

      इस उदाहरण में, टैग के बाद

      जिससे आप समूहीकरण का अर्थ देख सकते हैं।

      सलाह

      टैग के दायरे के बाद से

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


      चित्र: 4.17। समूहबद्ध स्तंभ तालिका

      टेबल बॉर्डर का रंग सेट करना

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

      , ... इन मापदंडों के लिए रंग नाम या इसके हेक्साडेसिमल मान को मान के रूप में उपयोग किया जा सकता है। BORDERCOLOR पैरामीटर सभी तालिका बॉर्डर तत्वों के रंग को निर्धारित करता है, और अन्य दो पैरामीटर BORDERCOLOR मान को ओवरराइड करते हुए व्यक्तिगत घटक सीमाओं के रंग को निर्दिष्ट करते हैं। BORDERCOLORLIGHT पैरामीटर संपूर्ण तालिका के बाएं और ऊपरी किनारों को पेंट करता है और, तदनुसार, प्रत्येक सेल के दाएं और निचले किनारों को निर्दिष्ट रंग में रखता है। दूसरा पैरामीटर BORDERCOLORDARK विपरीत किनारों का रंग सेट करता है। इन मापदंडों की कार्रवाई के संयोजन के कारण, तालिका पृष्ठ की सतह से कुछ ऊपर उठाया जाएगा या गहरा हो जाएगा। यह सब चुने हुए रंग संयोजन पर निर्भर करता है।

      ध्यान दें

      नेटस्केप 4.x ब्राउज़र BORDERCOLOR पैरामीटर का भी समर्थन करता है।

      एक तालिका के लिए पृष्ठभूमि छवि सेट करना

      Microsoft इंटरनेट एक्सप्लोरर (साथ ही नेटस्केप 4.x) बैकग्राउंड पैरामीटर को उसी तरह से तालिका के लिए पृष्ठभूमि छवि को परिभाषित करने की अनुमति देता है जैसे कि एक संपूर्ण HTML दस्तावेज़ कर सकता है। इस पैरामीटर को टैग में सेट किया जा सकता है

      , तथा
      , , w

      Microsoft इंटरनेट एक्सप्लोरर आपको टेबल्स की कई टैग का उपयोग करने की अनुमति देता है और लचीले ढंग से फ्रेम और ग्रिड लाइनों के प्रतिपादन को नियंत्रित करता है।

      टैग

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

      तालिका संरचित टैग

      तथा
      .

      टैग तथा किसी तालिका के शीर्ष लेख और पाद लेख का वर्णन करने के लिए उपयोग किया जाता है। ये टैग तालिका में सबसे अधिक बार दिखाई दे सकते हैं। इनके लिए समाप्त टैग छोड़ा जा सकता है। एक से अधिक पृष्ठों को विस्तारित करने वाली बड़ी तालिकाएँ बनाते समय इन टैगों का उपयोग करना उपयोगी होता है।

      टैग तालिका के विवरण में कई बार हो सकता है, जिसके लिए समाप्त टैग के उपयोग की आवश्यकता होती है... यह टैग उसी तरह से डेटा का तार्किक समूहन करता है जैसे टैग सन्निहित स्तंभों को समूहीकृत करना।

      नए टैग का उपयोग करते समय, तालिका के सीमाओं और ग्रिड लाइनों को अधिक लचीले ढंग से नियंत्रित करना संभव हो जाता है।

      तालिका के चारों ओर ड्राइंग फ्रेम का नियंत्रण टैग के FRAME पैरामीटर द्वारा किया जाता है

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

      FRAME पैरामीटर निम्नलिखित मान ले सकता है:

      • बॉक्स या बोर्डर - फ्रेम को चारों तरफ से खींचा गया है
      • ऊपर - केवल ऊपर की तरफ से
      • नीचे - केवल नीचे की तरफ
      • HSIDES - नीचे और ऊपर की तरफ खींचे गए हैं
      • VSIDES - बाएँ और दाएँ पक्ष खींचे जाते हैं
      • एलएचएस - केवल बाईं ओर
      • आरएचएस - केवल दाईं ओर
      • शून्य - बाहरी फ्रेम के बिना तालिका

      नियम पैरामीटर तालिका की आंतरिक ग्रिड लाइनों के ड्राइंग को नियंत्रित करता है और निम्नलिखित मान ले सकता है:

      • सब - सभी आंतरिक रेखाएँ खींची जाती हैं
      • समूह - केवल रेखाएँ अलग-अलग समूहों को खींचती हैं
      • पंक्तियों - रेखाएँ अलग-अलग रेखाएँ खींची जाती हैं
      • COLS - रेखाएँ कॉलम को अलग करते हुए खींची जाती हैं
      • कोई नहीं - आंतरिक रेखाएं नहीं खींची जाती हैं

      उदाहरण:

      .

      ध्यान दें

      तालिका की फ़्रेम लाइनें खींचना और फ़्रेम को केवल तभी बाहर किया जाएगा जब बोर्डर टैग पैरामीटर मौजूद हो

      ... यदि यह पैरामीटर अनुपस्थित है या इसका मान शून्य है, तो FRAME और RULI पैरामीटर के किसी भी मान के लिए ग्रिड लाइनें और फ़्रेम अनुपस्थित रहेंगे।

      यहां पूर्ण HTML कोड का एक उदाहरण है जो वर्णित क्षमताओं का उपयोग करके एक तालिका बनाता है:

      शीर्षक और सारांश पंक्ति को हाइलाइट करना

      लचीली लाइन नियंत्रण का एक उदाहरण
      ग्रिड टेबल

      स्तंभ शीर्ष 1 कॉलम हैडर 2 स्तंभ शीर्ष 3
      डेटाडेटाडेटा
      डेटाडेटाडेटा
      डेटाडेटाडेटा
      डेटाडेटाडेटा
      डेटाडेटाडेटा
      डेटाडेटाडेटा
      परिणामपरिणामपरिणाम


      चित्र: 4.18।Microsoft इंटरनेट एक्सप्लोरर ब्राउज़र का उपयोग करके तालिका की ग्रिड लाइनों का लचीला ड्राइंग

      इस उदाहरण में, जिसे अंजीर में ब्राउज़र द्वारा प्रदर्शित किया गया है। 4.18, तालिका के चारों ओर ग्रिडलाइन और सीमाओं को नियंत्रित करने के संभावित विकल्पों में से एक दिखाया गया है। तालिका के चारों ओर 5 पिक्सेल की बॉर्डर तैयार की गई है (BORDER \u003d S) केवल ऊपर और नीचे की तरफ (FRAME \u003d HSIDES)। ग्रिड समूहों को डेटा समूहों (RULES \u003d GROUPS) को अलग करने के लिए तालिका के अंदर खींचा गया है। डेटा समूहों को परिभाषित किया जाता है, सबसे पहले, तीन टैग की उपस्थिति से , जिनमें से प्रत्येक एक अलग तालिका स्तंभ घोषित करता है समूह। दूसरा, टैग , तथा<тгоот> तालिका डेटा को समूहों में विभाजित करते हैं, जो आंतरिक क्षैतिज रेखाओं के ड्राइंग को निर्धारित करता है।

      एक तालिका में स्तंभों की संख्या निर्धारित करना

      Microsoft इंटरनेट एक्सप्लोरर (साथ ही नेटस्केप 4.x ब्राउज़र) आपको टैग में निर्दिष्ट करने की अनुमति देता है

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

      तालिकाओं का ऊर्ध्वाधर संरेखण

      अंतिम टैग पैरामीटर

      केवल Microsoft इंटरनेट एक्सप्लोरर के लिए विशिष्ट है, यह VALIGN है, जो पाठ के सापेक्ष तालिका के ऊर्ध्वाधर संरेखण को निर्धारित करता है। इसकी कार्रवाई छवियों के लिए समान है।

      ध्यान दें

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

      • टैग के लिए
      ALIGN पैरामीटर मान लेफ्ट या राइट को ले सकता है, और टेबल के स्थान का अर्थ है, क्रमशः बाएं या दाएं किनारे से संरेखित;
    • टैग के लिए
    • ,
      ALIGN पैरामीटर मान TOP या BOTTOM लेता है, और इसका मतलब है कि तालिका के ऊपर या नीचे तालिका शीर्षलेख का स्थान;
    • टैग के लिए
    • तथा ALIGN पैरामीटर लेफ्ट, राइट या सेंटर वैल्यू को लेता है, और इसका मतलब है कि टेबल में संबंधित सेल (या सेल) की सामग्री को क्षैतिज रूप से संरेखित करना।

      टेबल व्यू के लिए वैकल्पिक

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

      कुछ अन्य तरीके जो तालिकाओं की अवधारणा का उपयोग नहीं करते हैं:

      • पूर्वनिर्मित पाठ का उपयोग करना। यह तकनीक पारंपरिक रूप से HTML के शुरुआती संस्करणों में उपयोग की गई थी, जब टेबल समर्थन अभी तक मौजूद नहीं था। इसके उपयोग ने आज तक इसकी प्रासंगिकता नहीं खोई है, क्योंकि इस तरह के ग्रंथों को शुद्ध रूप से पाठ वाले किसी भी ब्राउज़र द्वारा सही ढंग से प्रदर्शित किया जाएगा।
      • तालिका वाली छवि का उपयोग करना। तालिका को किसी भी पाठ संपादक के साथ बनाया जा सकता है या यहां तक \u200b\u200bकि वेब ब्राउज़र द्वारा प्रदर्शित किया जा सकता है और फिर ग्राफिक स्वरूपों में से एक में चित्र के रूप में सहेजा जा सकता है। यह सबसे अच्छा विकल्प नहीं है, क्योंकि यह तालिकाओं के प्रदर्शन को गतिशील रूप से अनुकूलित करने के लिए सभी लचीलेपन को खो देता है। इसके अलावा, एक छवि के साथ एक अतिरिक्त फ़ाइल संग्रहीत करने की आवश्यकता है, जिसका आकार, इसके अलावा, आमतौर पर HTML तालिका का वर्णन करने वाले पाठ के आकार से बहुत बड़ा होगा। आवेदन का एक संभावित क्षेत्र कड़ाई से परिभाषित आकारों की तालिकाओं है, जिसके लिए किसी भी बाहरी कारकों (फोंट, ब्राउज़र ऑपरेटिंग मोड, आदि) पर इसके प्रदर्शन की निर्भरता अस्वीकार्य है।
      • तालिकाओं के बजाय सूचियों का उपयोग करना। सरलतम मामलों के लिए, तालिकाओं को व्यवस्थित करने के बजाय, HTML में उपलब्ध एक प्रकार की सूचियों के साथ इसे प्राप्त करना काफी संभव है।

      टेबल तैयार करना

      एचटीएमएल टेबल तैयार करने के लिए किसी भी संपादकों का उपयोग किया जा सकता है, जिनमें से अधिकांश के पास नेत्रहीन टेबल बनाने के लिए उपकरण हैं। आइए हॉटडॉग पेशेवर संपादक में एक तालिका तैयार करने का एक उदाहरण देते हैं। एक तालिका बनाने के लिए, बस सम्मिलित करें मेनू से तालिका आइटम का चयन करें, जिसके बाद डायलॉग बॉक्स अंजीर में दिखाया गया है। 4.19। तालिका बनाना विंडो में उपयुक्त फ़ील्ड भरने में शामिल है। तालिका में पंक्तियों और स्तंभों की संख्या निर्धारित करने के बाद, आप तालिका के अलग-अलग कक्षों में सीधे भरने के लिए आगे बढ़ सकते हैं, जो उसी संवाद बॉक्स में दिखाया जाएगा। संवाद बॉक्स में एक पूर्वावलोकन बटन होता है, जिस पर क्लिक करके आप अंतर्निहित ब्राउज़र (चित्र। 4.20) का उपयोग करके परिणामी तालिका देख सकते हैं।


      चित्र: 4.19। टेबल बनाने के लिए डायलॉग बॉक्स


      चित्र: 4.20। अंतर्निहित ब्राउज़र का उपयोग करके तालिका दिखाई गई

      तालिका के लिए डेटा की तैयारी पूरी करने के बाद, ठीक बटन पर क्लिक करें। फिर उत्पन्न तालिका विवरण कोड संपादित HTML दस्तावेज़ में डाला जाएगा। उदाहरण के लिए अंजीर में दिखाया गया है। 4.19, निम्नलिखित कोड उत्पन्न होगा:

      (कोड का हिस्सा छोड़ा गया)

      टेबल के प्रमुख
      स्तम्भ १ स्तम्भ २ स्तम्भ ३ स्तम्भ ४
      1 2 3 4

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

      अतिरिक्त HTML बटन दिया गया है। संवाद बॉक्स के क्षेत्रों में भरने के बाद, आपको लागू करें बटन पर क्लिक करना चाहिए और फिर आपको तालिका कोशिकाओं (छवि 4.22) में भरने का अवसर दिया जाएगा।

      चित्र: 4.21। नेटस्केप कम्पोज़र टेबल पैरामीटर्स डायलॉग बॉक्स


      चित्र: 4.22। एक खाली तालिका में इनपुट कर्सर की प्रारंभिक स्थिति

      एक कार्य

      एक तालिका बनाएं और शैलियों के माध्यम से इसके मापदंडों (कोशिकाओं के बीच मार्जिन और दूरी) निर्दिष्ट करें।

      फेसला

      एक तालिका में कोशिकाओं की पंक्तियाँ और स्तंभ होते हैं जिनमें पाठ और चित्र हो सकते हैं। वेब पेज में एक टेबल जोड़ने के लिए, टैग का उपयोग करें

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

      उदाहरण 1. एक तालिका बनाना

      एचटीएमएल 5 आईई सीआर ओप सा एफएक्स

      टेबल टैग

      सेल 1 सेल 2
      सेल 3 सेल 4

      कोशिकाओं के क्रम और उनकी उपस्थिति को अंजीर में दिखाया गया है। 1।

      चित्र: 1. चार कोशिकाओं के साथ एक तालिका बनाने का परिणाम

      टैग की सीमा विशेषता

      इसे केवल रिक्त मान के साथ जोड़ने की अनुमति है (
      ) या 1 के बराबर। अन्य सभी मान मान्य नहीं हैं।

      पैडिंग शैली की संपत्ति का उपयोग कोशिकाओं के भीतर मार्जिन को नियंत्रित करने के लिए किया जाता है, जिसे td चयनकर्ता में जोड़ा जाता है। कक्ष चयनकर्ता में जोड़े गए बॉर्डर-स्पेसिंग प्रॉपर्टी (उदाहरण 2) द्वारा कोशिकाओं के बीच रिक्ति को बदल दिया जाता है, IE ब्राउज़र केवल संस्करण 8.0 के बाद से इसे समझता है।

      उदाहरण 2. कोशिकाओं के भीतर का क्षेत्र

      एचटीएमएल 5 सीएसएस 2.1 आईई सीआर ओप सा एफएक्स

      टेबल टैग

      शीर्षक 1शीर्षक २
      सेल 3सेल 4

      क्षेत्र और कोशिकाओं के बीच रिक्ति के साथ एक तालिका अंजीर में दिखाया गया है। 2. एक समान परिणाम कोशिकाओं के चारों ओर एक सफेद सीमा के साथ प्राप्त किया जा सकता है।

      चित्र: 2. तालिका कोशिकाओं में क्षेत्र

      लोकप्रिय हो गया, वेब डिजाइनरों ने मुख्य रूप से टेबल लेआउट पद्धति का उपयोग किया और बहुत अच्छे परिणाम मिले।


      Html में तालिका बनाने के लिए उपयोग किया जाने वाला टैग

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

      एक साधारण तालिका के लिए नमूना कोड



      एचटीएमएल तालिका





      तालिका नाम

      स्तम्भ १

      स्तम्भ २

      पहली सेल में टेक्स्ट

      दूसरी सेल में टेक्स्ट



      ब्राउज़र प्रदर्शित करेगा

      HTML में तालिकाओं का उद्देश्य

      स्प्रेडशीट सबक बहुत महत्वपूर्ण है! तालिकाओं के लिए धन्यवाद, आप न केवल पाठ की व्यवस्था कर सकते हैं, बल्कि चित्र, लिंक और भी बहुत कुछ कर सकते हैं। तालिका में आप सेट कर सकते हैं पृष्ठभूमि (या उसका रंग), मांगपत्र, चौड़ाई, सीमा तथा अन्य मापदंडोंजो इसे एक सुंदर रूप देगा। टेबल - समझने के लिए आपका पहला कदम वेब डिजाइन! पहले, कई साइटों को पूरी तरह से टेबल के रूप में रखा गया था, अर्थात, वह सब कुछ जो उपयोगकर्ता ने देखा (साइड मेनू, टॉप मेनू, सामग्री) एक बड़ी तालिका में कोशिकाओं की सामग्री थी।
      उस नोट पर, आइए सीधे उन विशेषताओं पर जाएं जो तालिका को सुंदर बनाती हैं ...

      HTML तालिकाओं के गुण और पैरामीटर: इंडेंट, चौड़ाई, बैकग्राउंड कलर, बॉर्डर (फ्रेम)

      Have तालिका टैग निम्नलिखित विशेषताएं हैं:

      चौड़ाई - टेबल की चौड़ाई। पिक्सेल या स्क्रीन चौड़ाई का% हो सकता है।
      bgcolor - तालिका कोशिकाओं की पृष्ठभूमि का रंग
      पृष्ठभूमि - चित्र के साथ तालिका की पृष्ठभूमि को भरता है
      सीमा - टेबल में फ्रेम और बॉर्डर। मोटाई पिक्सेल में निर्दिष्ट है
      cellpadding - सेल सामग्री और इसकी आंतरिक सीमा के बीच पिक्सेल में पैडिंग
      पहले की तरह, उद्धरणों में विशेषता का मान लिखें।

      आइए इन विशेषताओं के आवेदन पर विचार करें उदाहरण के लिए। ऐसा करने के लिए, एक तालिका बनाएं (लेकिन पहले से ही बेहद मुश्किल से इस्तेमाल किए गए कैप्शन और वें टैग के बिना) और पैरामीटर को विशेषता पर सेट करें सीमा (बॉर्डर), चौड़ाई (तालिका, पंक्ति या सेल की चौड़ाई) तथा bgcolor (सेल रंग)



      एचटीएमएल तालिका







      परिणामस्वरूप, ब्राउज़र निम्न फ़ॉर्म की एक तालिका प्रदर्शित करेगा

      ढांचा - तालिका के चारों ओर एक सीमा को दर्शाते हुए विशेषता। निम्नलिखित मूल्य हैं:

      शून्य - कोई फ्रेम नहीं,
      ऊपर - केवल शीर्ष फ्रेम,
      नीचे - केवल नीचे फ्रेम,
      hsides - केवल ऊपर और नीचे फ्रेम,
      बनाम - केवल बाएं और दाएं फ्रेम,
      lhs - बाईं सीमा,
      rhs - केवल सही सीमा,
      बॉक्स - बॉक्स के सभी चार भाग।

      नियम - एक विशेषता कोशिकाओं के बीच एक मेज के भीतर सीमाओं को दर्शाती है। निम्नलिखित मूल्य हैं:

      कोई नहीं - कोशिकाओं के बीच कोई सीमा नहीं है,
      समूह - केवल पंक्ति समूहों और स्तंभ समूहों के बीच की सीमाएँ (थोड़ी देर बाद चर्चा की जाएगी),
      पंक्तियाँ - केवल पंक्तियों के बीच की सीमाएँ,
      कर्नल - केवल स्तंभों के बीच की सीमाएँ,
      सभी - सभी सीमाओं को प्रदर्शित करते हैं।

      उदाहरण कोड पर विचार करें



      एचटीएमएल तालिका


      स्तम्भ १

      स्तम्भ २









      परिणाम

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

      संरेखित - टेबल संरेखण। इसे बाएं (बाएं), दाएं (दाएं), केंद्र (केंद्र) में तैनात किया जा सकता है
      cellspacing - तालिका कोशिकाओं के बीच की दूरी। पिक्सेल में निर्दिष्ट (डिफ़ॉल्ट 0 पिक्सेल)
      cellpadding - सेल की सामग्री और उसकी आंतरिक सीमा के बीच पिक्सेल में पैडिंग (डिफ़ॉल्ट रूप से 0 पिक्सेल)
      एक उदाहरण पर विचार करें



      एचटीएमएल तालिका


      स्तम्भ १

      स्तम्भ २

      पहले कॉलम के पहले सेल में टेक्स्ट

      दूसरे कॉलम के दूसरे सेल में टेक्स्ट







      ब्राउज़र एक केंद्रित तालिका प्रदर्शित करता है जो इस तरह दिखता है

      HTML तालिकाओं में त्रि तार और td कोशिकाएँ

      मुझे आपको फिर से याद दिलाना है कि टेबल लाइन (ट्र) द्वारा बनाई जाती हैं। पंक्तियों (tr) में पहले से ही कोशिकाएं (td) हैं। यदि आप एक स्ट्रिंग (ट्र) के लिए एक पैरामीटर सेट करते हैं, तो यह मान्य होगा सभी सेल (td) इस पंक्ति में, यदि एक विशिष्ट सेल के लिए है, तो केवल इसके लिए। ऊपर के उदाहरणों में, मैंने लाइन के लिए रंग निर्दिष्ट किया, यह पैरामीटर सभी कोशिकाओं के अनुसार वितरित किया गया था।





      Tr और td टैग के लिए निम्नलिखित हैं

      संरेखित - सेल के अंदर टेक्स्ट अलाइनमेंट। बाएं संरेखित (बाएं), दाएं संरेखित (दाएं), केंद्रित (केंद्र)
      वेलिजन - सेल के अंदर पाठ का ऊर्ध्वाधर संरेखण। ऊपर (ऊपर), नीचे (नीचे), केंद्र (मध्य)
      bgcolor - लाइन का रंग सेट करता है
      चौड़ाई - कॉलम की चौड़ाई (नीचे के सभी सेल इस पैरामीटर को स्वीकार करेंगे) पिक्सल या प्रतिशत में निर्दिष्ट हैं, जहां 100% पूरी तालिका की चौड़ाई है
      ऊंचाई - सेल ऊंचाई (पंक्ति के सभी सेल इस पैरामीटर को स्वीकार करेंगे)

      एक कोड पर विचार करें जहां कोशिकाओं की सामग्री (td) अलग-अलग किनारों पर संरेखित की जाती है: पहले एक में बाईं ओर, दूसरी में दाईं ओर:



      एचटीएमएल तालिका


      स्तम्भ १

      स्तम्भ २

      पहले कॉलम के पहले सेल में टेक्स्ट

      दूसरे कॉलम के दूसरे सेल में टेक्स्ट

      स्तम्भ १

      स्तम्भ २







      परिणाम

      तालिकाओं की सहायता से, आप एक बहुत अच्छा पृष्ठ बना सकते हैं। यह मत भूलो कि आप न केवल पाठ को कक्षों में सम्मिलित कर सकते हैं, बल्कि चित्र, लिंक और भी बहुत कुछ!)

      ध्यान देने के लिए आपको धन्यवाद! मुझे आशा है कि सामग्री सहायक थी!


      स्तम्भ १

      स्तम्भ २

      पहले कॉलम के पहले सेल में टेक्स्ट

      दूसरे कॉलम के दूसरे सेल में टेक्स्ट