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

Html में टेबल कैसे बनाते है

आइए एक उदाहरण लेते हैं, HTML कोड:

टेबल उदाहरण

कॉलम 1

कॉलम 2

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

आइए अब सभी टैग विशेषताओं को विस्तार से देखें।

टैग गुण और गुण

ओपनिंग टैग के लिए

1. संपत्ति संरेखण = "पैरामीटर" - तालिका के संरेखण को सेट करता है। यह निम्नलिखित मान ले सकता है:

उपरोक्त उदाहरण में, हमने तालिका को align="center" के साथ केंद्रित किया।

यह विशेषता न केवल तालिका पर लागू की जा सकती है, बल्कि अलग-अलग तालिका कक्षों पर भी लागू की जा सकती है।

उदाहरण के लिए

12. संपत्ति चौड़ाई = "संख्या" - तालिका की चौड़ाई निर्धारित करती है: या तो पिक्सेल में या प्रतिशत के रूप में।

13. संपत्ति वर्ग = "वर्ग_नाम" - आप उस वर्ग का नाम निर्दिष्ट कर सकते हैं जिससे तालिका संबंधित है।

14. संपत्ति शैली = "शैली" - शैलियों को प्रत्येक तालिका के लिए व्यक्तिगत रूप से सेट किया जा सकता है।

अब तालिका के अंदर गोता लगाने और तालिका सेल विशेषताओं को देखने का समय आ गया है। ये विशेषताएँ प्रारंभिक टैग में लिखी जानी चाहिए।

हमारे उदाहरण का नतीजा:

एक तालिका का विभाजन

किसी टेबल को भागों में विभाजित करने के लिए निम्नलिखित HTML टैग्स का उपयोग किया जाता है:

• उपनाम तालिका में समूह शीर्षलेख रखने के लिए उपयोग किया जाता है ("तालिका शीर्षलेख", शीर्षलेख से भ्रमित न हों)।
• उपनाम तालिका (पाद लेख) के "पाद लेख" को शामिल करने के लिए उपयोग किया जाता है।
• उपनाम तालिका (शरीर) के "शरीर" को समाहित करने के लिए उपयोग किया जाता है।

तत्व निम्नलिखित संदर्भ में एक तालिका में केवल एक बार उपयोग किया जाना चाहिए: एक तत्व के भीतर

तत्वों

हमारे उदाहरण का परिणाम।

फ्रेम के साथ टेबल

परिणाम:

सीमाओं के बिना तालिका

फ्रेम के साथ टेबल

टैग गुण और कोशिकाओं को मिलाने के लिए

उदाहरण

परिणाम:

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

html तालिका पंक्ति समूहीकरण टैग

अधिक जटिल टेबल बनाने के लिए टैग का उपयोग किया जा सकता है:

उदाहरण

परिणाम:

html टेबल कॉलम ग्रुपिंग टैग

टैग विशेषता और

सुडोकू तालिका के उदाहरण से यह समझने का सबसे आसान तरीका है कि कैसे पंक्ति और स्तंभ समूहीकरण का उपयोग किया जा सकता है।

कॉल टैग प्रत्येक कॉलम के लिए अलग-अलग पैरामीटर सेट करता है। इससे कोई फर्क नहीं पड़ता कि स्रोत कोड में कैसे लिखना है:

या

उदाहरण

परिणाम:

स्टाइल सेट करने की कोशिश न करें पाठ संरेखितटैग के लिए और . पाठ टैग के बीच रखा गया ..., इस शैली को इनहेरिट नहीं करता क्योंकि टैग किसी टैग का बच्चा नहीं है , कोई टैग नहीं .

एक विशिष्ट तालिका स्तंभ में पाठ के क्षैतिज संरेखण को शैली निर्दिष्ट करके बदला जा सकता है पाठ संरेखितछद्म वर्ग के लिए टीडी:एनटी-चाइल्ड(एन), जहाँ n स्तंभ संख्या है। हालाँकि, यह विधि काम नहीं करेगी यदि तालिका कक्षों में कोई विशेषता है कॉल्सपन.

उदाहरण

परिणाम:

हालाँकि, यह विधि काम नहीं करेगी यदि तालिका कक्षों में कोई विशेषता है कॉल्सपन.

अध्याय 4

HTML में टेबल्स

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

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

और

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

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

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

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

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

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

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

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

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

एक तालिका में एक शीर्षक हो सकता है जो टैग की एक जोड़ी में संलग्न हो और. टेबल हेडर का विवरण टैग के अंदर रखा जाना चाहिए

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

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

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

चावल। 4.जेड।एक साधारण तालिका का एक उदाहरण

एक पृष्ठ पर तालिकाओं का प्रतिनिधित्व

तालिका का वर्णन करने वाले टैग में उपयोग किए जा सकने वाले विभिन्न पैरामीटर के असाइनमेंट पर विचार करें।

टेबल हैडर

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

तालिका के निचले भाग पर शीर्षक

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

चावल। 4.4।हेडर के साथ टेबल

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

निचला-संरेखित शीर्षक बाएँ-संरेखित

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

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

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

टैग विकल्प

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

पैरामीटर सीमा

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

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

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

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

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

चावल। 4.6। 10 px मोटे बॉर्डर वाली टेबल

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

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

यहां कुछ उदाहरण दिए गए हैं:

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

सेलस्पेसिंग पैरामीटर

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

चावल। 4.7। CELLSPACING=0 मान वाली तालिका

सेलपैडिंग पैरामीटर

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

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

चावल। 4.8।सेलपैडिंग = 10 मान वाली तालिका

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

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

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

पैरामीटर चौड़ाई और ऊंचाई

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

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

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

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

पैरामीटर संरेखित करें

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

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

ये 43 सबसे अधिक बार सामने आने वाले नाम 92% नमूने को कवर करते हैं।

चावल। 4.9।रैपिंग टेक्स्ट के साथ बॉर्डरलेस टेबल

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

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

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

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

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

सेंट पीटर्सबर्ग की वयस्क आबादी

अब्राहम सिकंदर अलेक्सई अल्बर्ट अनातोली एंड्री Arkady बोरिस वादिम प्रेमी वालेरी तुलसी विजेता विटाली व्लादिमीर व्लादिस्लाव व्याचेस्लाव गेनाडी जॉर्ज हरमन ग्रेगरी डिमिट्री

यूजीन येफिम इवान इगोर इल्या यूसुफ Konstantin एक सिंह लियोनिद माइकल निकोलस ओलेग पॉल पीटर उपन्यास शिमोन सेर्गेई स्टानिस्लाव एडवर्ड यूरी याकूब

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



चावल। 4.10।बिना बॉर्डर वाली टेबल जिसमें तीन कॉलम हों

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

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

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

,
,

---

, हेडर कोड - से

पहले

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

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

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

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

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

इस उदाहरण का ब्राउज़र रेंडरिंग चित्र में दिखाया गया है। 4.11।




चावल। 4.11।तालिका कक्षों में डेटा संरेखित करना

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

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

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

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

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

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

या

. नोटेशन: COLSPAN=num, जहां संख्या एक संख्यात्मक मान है जो निर्दिष्ट करता है कि वर्तमान सेल को क्षैतिज रूप से विस्तारित करने के लिए कितने कॉलम हैं। ROWSPAN पैरामीटर का उपयोग समान है, केवल यहां आप उन पंक्तियों की संख्या निर्दिष्ट करते हैं जिन्हें वर्तमान सेल को लंबवत फैलाना चाहिए। डिफ़ॉल्ट रूप से, ये पैरामीटर एक के मान पर सेट होते हैं। एक ही समय में एक सेल के लिए दोनों मापदंडों के मान सेट करना संभव है। इन मापदंडों के मूल्यों को सही ढंग से सेट करना एक बहुत ही सरल कार्य नहीं हो सकता है, खासकर जब से अधिकांश HTML संपादक आपको HTML कोड की बाद की पीढ़ी के साथ केवल सबसे सरल तालिकाओं को नेत्रहीन रूप से डिजाइन करने की अनुमति देते हैं। अंजीर पर। 4.12 निम्न HTML कोड द्वारा प्राप्त टेबल डिस्प्ले का एक उदाहरण दिखाता है: सेल दो पंक्तियों में फैली हुई है सेल दो स्तंभों में फैला हुआ है सेल 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 Internet Explorer दोनों कक्षों को कक्षों की पृष्ठभूमि के रंग में प्रदर्शित करता है। एनएससीए मोज़ेक जैसे ब्राउज़र उपयोगकर्ता को उपयुक्त विकल्पों का चयन करके तालिका में खाली कोशिकाओं को जारी करने की प्रकृति का निर्धारण करने की अनुमति देता है। ऐसी विशेषताओं को जानने से आप उन तालिकाओं को डिज़ाइन कर सकेंगे जो उपयोगकर्ता द्वारा चुने गए ब्राउज़र की परवाह किए बिना उचित रूप से प्रदर्शित होंगी। कुछ मामलों में, कुछ खाली सेल के बजाय एक ही कोड वाले सेल बनाना पर्याप्त होता है। तालिका स्तंभों में डेटा संरेखित करना तालिकाएँ बनाते समय एक सामान्य समस्या अलग-अलग पंक्तियों या स्तंभों के लिए संरेखण विकल्प सेट करना है। वर्तमान पंक्ति के सभी कक्षों की सामग्री को संरेखित करने के लिए, कोड में आवश्यक पैरामीटर सेट करना पर्याप्त है . अधिक बार, हालांकि, यह सुनिश्चित करना आवश्यक है कि एक ही कॉलम में सभी तत्व समान रूप से संरेखित हों, क्योंकि ज्यादातर मामलों में कॉलम में सजातीय डेटा होता है। HTML के पुराने संस्करणों में, COLSPEC (COLumn SPECification) पैरामीटर का उपयोग करने का प्रस्ताव किया गया था, जो टैग में सेट किया गया था और . यह सुविधा HTML विनिर्देश द्वारा प्रदान नहीं की गई है, लेकिन नेटस्केप और माइक्रोसॉफ्ट इंटरनेट एक्सप्लोरर दोनों द्वारा समर्थित है। प्रविष्टि प्रपत्र टैग के समान ही है। , अर्थात्: BGCOLOR = मूल्य, जहाँ मूल्य RGB प्रारूप या उसके नाम में रंग की सामग्री है। उदाहरण: या . नेस्टेड टेबल अलग-अलग तालिका कक्षों में अनुभाग में अनुमत लगभग कोई भी भाषा टैग और डेटा हो सकता है। दस्तावेज़। विशेष रूप से, एक अन्य टेबल को पूरी तरह से टेबल सेल के अंदर रखा जा सकता है। ऐसी तालिकाओं को नेस्टेड कहा जाता है। उनके निर्माण के नियम तालिकाओं के निर्माण से भिन्न नहीं होते हैं और उन्हें अलग विवरण की आवश्यकता नहीं होती है। हम केवल ध्यान दें कि तालिकाओं का समर्थन करने वाले सभी ब्राउज़र नेस्टिंग के कई स्तरों के साथ जटिल तालिकाओं को सही ढंग से प्रदर्शित नहीं करते हैं, इसलिए उनके उपयोग के लिए सावधानी बरतने की आवश्यकता है। यहां एक तालिका का उदाहरण दिया गया है जो एक स्तर के नेस्टिंग का उपयोग करती है। लेनिनग्राद क्षेत्र के शहर एच - शहर की जनसंख्या (हजार निवासी, 1992) पी - सेंट पीटर्सबर्ग से दूरी (किमी) सेंट पीटर्सबर्ग के अधीनस्थ शहर शहर एच पी ज़ेलेनोगोर्स्क 13.6 50 कोल्पीनो 144.6 26 सेंट पीटर्सबर्ग 45.2 48 लोमोनोसोव 42.0 40 वोरोनिश 25.4 30 पेट्रोड्वोरेट्स 83.8 29 पुश्किन 95.1 24 सेंट पीटर्सबर्ग में 34.9 35 सभी शहर अधीनस्थ प्रशासन पीटर्सबर्ग, है प्रत्यक्ष शहरी टेलीफ़ोन नंबर। क्षेत्रीय अधीनता के शहर शहर एच पी सेंट पीटर्सबर्ग 21.6 संरेखित करें = सही> 245 वोल्खोव 50.3 संरेखित करें = सही> 122 सेंट पीटर्सबर्ग में 32.9 24 वायबोर्ग 80.9 130 Vysotsk 1.0 संरेखित करें = सही> 159 गैचिना 80.9 46 सेंट पीटर्सबर्ग में 11.9 संरेखित करें = सही> 147 सेंट पीटर्सबर्ग 5.9 157 सेंट पीटर्सबर्ग में 51.5 संरेखित करें = दायां> 138 किरीशी 53.8 संरेखित करें = दाएं> 115 किरोव्स्क 23.8 55 लोडिनोय पोल 27.3 संरेखित करें = सही> 244 लगा 41.8 139 (तालिका निरंतरता) शहर एच पी लुबन 4.7 85 नोवाया लाडोगा 11.2 संरेखित करें = सही> 141 Otradnoe 22. 9 संरेखित करें = दायां> 40 पिकालेवो 25.1 संरेखित करें = सही> 246 भूमिगत 23.1 285 प्रिसोर्स्क 6.7 137 सेंट पीटर्सबर्ग 20.5 संरेखित करें = सही> 145 सेंट पीटर्सबर्ग 15.8 संरेखित करें = सही> 201 स्लेट 42.6 संरेखित करें=दाएं>192 अनानास पैदा करने का स्थान 57.6 81 सेंट पीटर्सबर्ग में 72.0 संरेखित करें = सही> 200 सेंट पीटर्सबर्ग 33.8 53 सेंट पीटर्सबर्ग में 12.5 64 चावल। 4.14।नेस्टेड टेबल उदाहरण इस उदाहरण का प्रदर्शन परिणाम अंजीर में दिखाया गया है। 4.14। पहली नज़र में, ऐसा लगता है कि उदाहरण में कोई नेस्टिंग टेबल नहीं है। वास्तव में, संपूर्ण दस्तावेज़ एक सीमाहीन तालिका है जिसमें एक हेडर और केवल एक पंक्ति होती है जिसमें पाँच कोशिकाएँ होती हैं। ऐसी तालिका का संगठन पृष्ठ पर डेटा को व्यवस्थित करने के एकमात्र उद्देश्य को पूरा करता है। पहले सेल के अंदर एक और टेबल है जिसका अपना हेडर है और इसमें तीन कॉलम हैं, इसके बाद टेक्स्ट को बीच में संरेखित किया गया है। तीसरी और पाँचवीं कोशिकाओं में भी अलग-अलग तालिकाएँ होती हैं। दूसरी और चौथी कोशिकाएँ खाली हैं, उनमें कोई डेटा नहीं है और एक एकल WIDTH पैरामीटर है जो इसकी चौड़ाई निर्दिष्ट करता है। उनका उद्देश्य इंडेंट को पहले और तीसरे के साथ-साथ तीसरी और पांचवीं कोशिकाओं के बीच सेट करना है जिसमें टेबल स्थित हैं। इस तरह के इंडेंट को सेट करने के लिए यह संभावित विकल्पों में से एक है। एक अन्य विकल्प सेलस्पेसिंग पैरामीटर का उपयोग करना है, जो कोशिकाओं के बीच की दूरी को निर्धारित करता है, लेकिन यह पैरामीटर इंडेंट को क्षैतिज और लंबवत दोनों तरह से सेट करता है, जिसकी फिलहाल आवश्यकता नहीं है। इसके अलावा, सेलस्पेसिंग पैरामीटर (साथ ही सेलपैडिंग) द्वारा निर्दिष्ट स्थान के विपरीत, व्यूपोर्ट के संकीर्ण होने पर दी गई चौड़ाई वाला एक खाली सेल सिकुड़ जाएगा। इस उदाहरण के लिए, ब्राउज़र के व्यूपोर्ट की चौड़ाई को कम करने का प्रयास करें, या उसी प्रभाव से, उस फ़ॉन्ट का आकार बढ़ाकर देखें जिसमें पाठ प्रदर्शित होता है। तालिकाओं के बीच की दूरी को शून्य कर दिया जाएगा, जिससे सभी सूचनाओं को एक ही समय में यथासंभव लंबे समय तक देखना संभव हो जाएगा, हालांकि, एक और परिवर्तन तालिका को नुकसान नहीं पहुंचाएगा, लेकिन क्षैतिज स्क्रॉलिंग की अनुमति देगा। इसी तरह की योजना के अनुसार, आप सूचनाओं के प्लेसमेंट को व्यवस्थित कर सकते हैं, जिसमें न केवल तालिकाओं, बल्कि चित्र, पाठ के टुकड़े आदि भी शामिल हैं। टेबल बनाने की सुविधाएँ यह खंड व्यक्तिगत ब्राउज़रों की कुछ विशिष्ट विशेषताओं के साथ-साथ तालिकाओं के निर्माण और प्रदर्शन की कुछ सूक्ष्मताओं पर चर्चा करता है। तालिकाओं में रिक्त कक्ष प्रदर्शित करना विभिन्न ब्राउज़रों द्वारा तालिकाओं की प्रस्तुति की विशेषताओं में से एक खाली कोशिकाओं का प्रदर्शन है। भाषा विवरण के अनुसार, सभी ब्राउज़रों को खाली कोशिकाओं के साथ लाइनों को पैड करना चाहिए यदि उनकी संख्या शेष पंक्तियों की तुलना में किसी भी पंक्ति में कम पर सेट है। इसके अतिरिक्त, तालिका में कहीं भी ऐसी कोशिकाएँ हो सकती हैं जिनमें डेटा न हो। खाली सेल और अदृश्य डेटा वाले सेल में अंतर होता है। टैग की एक जोड़ी के अंदर खाली सेल में और और प्रत्येक टेबल कॉलम के संरेखण और चौड़ाई को परिभाषित किया। उदाहरण के लिए, सेटिंग colspec="L40 R50 C80" को कोशिकाओं में तालिका डेटा संरेखण के तीन स्तंभों के लिए परिभाषित किया गया है: पहले स्तंभ के लिए - बाएँ, दूसरे के लिए - दाएँ और तीसरे के लिए - केंद्र, साथ ही प्रत्येक स्तंभ की चौड़ाई . जैसा कि HTML भाषा विकसित हुई है, इसे बहिष्कृत कर दिया गया है और वर्तमान में यह भाषा विनिर्देश का हिस्सा नहीं है और अधिकांश ब्राउज़रों द्वारा समर्थित नहीं है। नतीजतन, नेटस्केप नेविगेटर के पास इस समस्या को हल करने के लिए कोई विशेष उपकरण नहीं है, और एकमात्र विकल्प या तो डिफ़ॉल्ट संरेखण का उपयोग करना है या जहां आवश्यक हो, प्रत्येक सेल में उपयुक्त मान सेट करना है। माइक्रोसॉफ्ट इंटरनेट एक्सप्लोरर विशेष टैग प्रदान करता है - और . ये टैग विवरण के तुरंत बाद दिखाई देने चाहिए। टैग की पहली उपस्थिति से पहले . टैग विकल्प और SPAN हो सकता है, जो पैरामीटर मानों से प्रभावित आसन्न स्तंभों की संख्या निर्धारित करता है, और ALIGN, जो संबंधित कॉलम (या कॉलम) के सभी कक्षों में डेटा के क्षैतिज संरेखण को निर्धारित करता है। ALIGN पैरामीटर के लिए मान्य मान LEFT, RIGHT और CENTER हैं। स्पैन पैरामीटर के लिए, डिफ़ॉल्ट मान एक है। उपनाम अतिरिक्त रूप से आपको VALIGN पैरामीटर सेट करने की अनुमति देता है, जो कोशिकाओं में डेटा के लंबवत संरेखण को निर्धारित करता है। VALIGN पैरामीटर के लिए मान्य मान MIDDLE, TOP और BOTTOM हैं। टैग के बीच का अंतर और यह है कि उनमें से पहला, स्तंभों के लिए डेटा संरेखण मापदंडों को सेट करने के अलावा, एक समूह में कई स्तंभों का एक सशर्त संघ भी करता है। नियम पैरामीटर का उपयोग करते समय इस एकत्रीकरण का प्रभाव दिखाया गया है, जिसका वर्णन नीचे किया गया है। डिफ़ॉल्ट रूप से, तालिका के सभी स्तंभों को एक समूह के रूप में माना जाता है। उपनाम समूह में अलग-अलग कॉलम में डेटा के संरेखण को निर्धारित करने के लिए केवल उपयोग किया जाना चाहिए। आइए एक उदाहरण लेते हैं। मान लीजिए कि 6 कॉलम वाली एक तालिका बनाना आवश्यक है, और उनमें से पहले तीन में डेटा सही-संरेखित होना चाहिए, और अगले तीन बीच में होना चाहिए। इस समस्या को हल करने के लिए, HTML कोड का निम्न भाग लिखें: (तालिका के लिए डेटा) इस कोड को प्रदर्शित करने का परिणाम चित्र में दिखाया गया है। 4.16। चावल। 4.16।सेल के समूहों में डेटा के लिए विभिन्न संरेखण विकल्पों वाली तालिका एक और उदाहरण। मान लीजिए कि पिछली तालिका में, पहले दो स्तंभों को दाईं ओर संरेखित किया जाना चाहिए, और तीसरा - मध्य में, और सभी तीन स्तंभों को एक समूह में जोड़ा जाना चाहिए। अगले तीन स्तंभों को भी एक साथ समूहीकृत किया जाना चाहिए और पहले समूह के समान संरेखण होना चाहिए। इस समस्या को हल करने के लिए, HTML कोड का निम्न भाग लिखें: (तालिका के लिए डेटा) इस उदाहरण में, टैग के बाद

जिससे समूहीकरण का अर्थ प्रकट होता है।

सलाह

चूंकि टैग का दायरा

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




चावल। 4.17।समूहीकृत स्तंभों वाली तालिका

तालिका सीमाओं का रंग सेट करना

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

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

टिप्पणी

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

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

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

,	और

, , डब्ल्यू

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

टैग

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

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

और.

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

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

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

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

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

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

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

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

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

उदाहरण:

.

टिप्पणी

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

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

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

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

स्तंभ शीर्षक 1	स्तंभ शीर्षक 2	स्तंभ शीर्षक 3
आंकड़े	आंकड़े	आंकड़े
आंकड़े	आंकड़े	आंकड़े
आंकड़े	आंकड़े	आंकड़े
आंकड़े	आंकड़े	आंकड़े
आंकड़े	आंकड़े	आंकड़े
आंकड़े	आंकड़े	आंकड़े
नतीजा	नतीजा	नतीजा




चावल। 4.18।माइक्रोसॉफ्ट इंटरनेट एक्सप्लोरर द्वारा टेबल ग्रिड लाइनों का लचीला आरेखण

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

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

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

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

तालिका लंबवत संरेखण

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

, जो Microsoft Internet Explorer के लिए अद्वितीय है, एक VALIGN है जो पाठ के सापेक्ष तालिका के लंबवत संरेखण को निर्दिष्ट करता है। इसका प्रभाव छवियों के लिए समान पैरामीटर के समान है।

टिप्पणी

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

• टैग के लिए

ALIGN पैरामीटर बाएँ या दाएँ मान ले सकता है, और इसका अर्थ है तालिका का स्थान, क्रमशः बाएँ या दाएँ किनारे पर दबाया गया;

टैग के लिए

, आवश्यक।

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

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

ALIGN पैरामीटर मान को ऊपर या नीचे लेता है, और तालिका के ऊपर या नीचे तालिका शीर्षलेख का स्थान दर्शाता है;

टैग के लिए

और

ALIGN पैरामीटर LEFT, RIGHT या CENTER मान लेता है, और तालिका के संबंधित सेल (या सेल) की सामग्री को क्षैतिज रूप से संरेखित करता है। तालिका दृश्य के लिए वैकल्पिक तालिका समर्थन वेब ब्राउज़रों की एक व्यापक विशेषता बन गई है, इसलिए उनका उपयोग करने से बचने के लिए बहुत कम कारण बचा है। हालाँकि, विचार करें संभव विकल्पडेटा का वैकल्पिक प्रतिनिधित्व जो तालिकाओं के बजाय या उनके अतिरिक्त उपयोग किया जा सकता है। कुछ अन्य तरीके जो तालिकाओं की अवधारणा का उपयोग नहीं करते हैं: पूर्वस्वरूपित पाठ का उपयोग करना। में इस पद्धति का उपयोग परंपरागत रूप से किया जाता रहा है प्रारंभिक संस्करण HTML भाषा, जब तालिका समर्थन अभी मौजूद नहीं था। इसके उपयोग ने वर्तमान में इसकी प्रासंगिकता नहीं खोई है, क्योंकि ऐसे पाठ किसी भी ब्राउज़र द्वारा सही ढंग से प्रदर्शित किए जाएंगे, जिसमें विशुद्ध रूप से पाठ वाले भी शामिल हैं। तालिका वाली छवि का उपयोग करना। तालिका कोई भी बना सकता है पाठ संपादकया यहां तक ​​कि एक वेब ब्राउज़र द्वारा प्रदान किया गया और फिर एक ग्राफिक प्रारूप में चित्र के रूप में सहेजा गया। यह सबसे अच्छा विकल्प नहीं है, क्योंकि यह तालिकाओं के प्रदर्शन को गतिशील रूप से अनुकूलित करने के लिए सभी लचीलेपन को खो देता है। इसके अलावा, एक अतिरिक्त छवि फ़ाइल को संग्रहीत करने की आवश्यकता है, जिसका आकार, इसके अलावा, एक नियम के रूप में, HTML तालिका का वर्णन करने वाले पाठ के आकार से बहुत बड़ा होगा। आवेदन का एक संभावित क्षेत्र सख्ती से परिभाषित आकारों की सारणी है, जिसके लिए किसी बाहरी कारकों (फोंट, ब्राउज़र मोड इत्यादि) पर इसके प्रदर्शन की निर्भरता अस्वीकार्य है। तालिकाओं के बजाय सूचियों का उपयोग करना। सबसे सरल मामलों के लिए, तालिकाओं को व्यवस्थित करने के बजाय, HTML भाषा में उपलब्ध किसी एक प्रकार की सूची के साथ प्राप्त करना काफी संभव है। टेबल तैयार करना HTML तालिकाएँ तैयार करने के लिए, किसी भी संपादक का उपयोग किया जा सकता है, जिनमें से अधिकांश में दृश्य रूप से तालिकाएँ बनाने के उपकरण होते हैं। यहाँ HotDog Professional संपादक में तालिका तैयार करने का एक उदाहरण दिया गया है। तालिका बनाने के लिए, केवल सम्मिलित करें मेनू से तालिका आइटम का चयन करें, जिसके बाद चित्र में दिखाया गया संवाद बॉक्स। 4.19। तालिका बनाना विंडो में उपयुक्त फ़ील्ड भरना है। तालिका में पंक्तियों और स्तंभों की संख्या निर्धारित करने के बाद, आप तालिका के अलग-अलग कक्षों को सीधे भरने के लिए आगे बढ़ सकते हैं, जो उसी संवाद बॉक्स में दिखाया जाएगा। डायलॉग बॉक्स में एक प्रीव्यू बटन होता है, जिसे दबाने पर आप बिल्ट-इन ब्राउजर (चित्र 4.20) का उपयोग करके परिणामी टेबल देख सकते हैं। चावल। 4.19।टेबल बनाने के लिए डायलॉग बॉक्स चावल। 4.20।अंतर्निहित ब्राउज़र का उपयोग करके दिखाई गई तालिका जब आप तालिका के लिए डेटा तैयार करना समाप्त कर लें, तो ठीक क्लिक करें। तब उत्पन्न तालिका विवरण कोड को संपादन योग्य HTML दस्तावेज़ में डाला जाएगा। अंजीर में दिखाए गए उदाहरण के लिए। 4.19, निम्नलिखित कोड उत्पन्न होगा: (कोड का हिस्सा छोड़ा गया) टेबल हेड कॉलम 1 कॉलम 2 कॉलम 3 स्तम्भ 4 1 2 3 4 इसी तरह, नेटस्केप कम्युनिकेटर के नेटस्केप कम्पोज़र घटक का उपयोग करके इस कार्य को हल किया जाता है। अंजीर पर। 4.21 एक संवाद बॉक्स दिखाता है जिसमें आपको आवश्यक फ़ील्ड भरने की आवश्यकता होती है। इनपुट के लिए अतिरिक्त विकल्पउपनाम अतिरिक्त HTML बटन प्रदान किया गया है। डायलॉग बॉक्स के क्षेत्रों को भरने के बाद, आपको अप्लाई बटन पर क्लिक करना चाहिए और फिर आपको टेबल सेल भरने का अवसर दिया जाएगा (चित्र 4.22)। चावल। 4.21।नेटस्केप कम्पोज़र टेबल विकल्पों को सेट करने के लिए डायलॉग बॉक्स चावल। 4.22।खाली तालिका में इनपुट कर्सर की प्रारंभिक स्थिति तब टेबल एक वेब पेज के लिए एक अदृश्य रूपरेखा बनाने में बहुत महत्वपूर्ण भूमिका निभाते हैं। और यह पाठ, मेनू, चित्र आदि को समान रूप से और खूबसूरती से व्यवस्थित करने में मदद करेगा। मैं आपको जो बताने की कोशिश कर रहा हूं उसकी बेहतर समझ के लिए, एक उदाहरण वेब पेज कंकाल देखें: इसलिए, html में सिंपल टेबल कैसे बनाते है? तालिका बनाने के लिए, आपको तीन टैग का उपयोग करने की आवश्यकता है: मेज – तालिका खोलने के लिए इस टैग की आवश्यकता होती है। यह एक प्रकार का कंटेनर है जिसमें अन्य तत्व होते हैं। यहाँ यह इतना मुड़ा हुआ है कि डोनट के बिना इसका पता लगाना असंभव है। कुछ नहीं, जब आप एक उदाहरण देखेंगे तो आप इसका पता लगा लेंगे। समापन टैग आवश्यक। तालिका में एक पंक्ति होती है पंक्ति 1 पंक्ति 1 पंक्ति 2 पंक्ति 2 पंक्ति 3 पंक्ति 3 सेल 1 सेल 2 सेल 1 सेल 2 सेल 1 सेल 2 टी.आर. – एक नई तालिका पंक्ति बनाता है। समापन टैग

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





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

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

आइए सब कुछ समझाते हैं।
प्रत्येक नई तालिका निर्माण से पहले टैग खोला जाता है।

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

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

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

.

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

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

एक दो उदाहरण देखें तालिकाएँ बनाईंऔर आप आगे जा सकते हैं:

पंक्ति 1 सेल 1

पंक्ति 2 सेल 1





परिणाम:

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

टैग के बीच लाइन में चित्र डालें।

पंक्ति 1 सेल 1

पंक्ति 1 सेल 2





परिणाम:

पंक्ति 1 सेल 1

पंक्ति 1 सेल 2

टेबल में सेल्स को मर्ज कैसे करें?

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


खानों को मिलाएंएक विशेषता के साथ शीर्ष पंक्ति में कॉल्सपन :

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





परिणाम:

तालिका का आकार कैसे सेट करें?

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

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

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





परिणाम:



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

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

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

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

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





परिणाम:



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

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

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

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

. और अगर केवल एक विशिष्ट सेल के लिए, तो टैग के लिए

. बेहतर समझ के लिए, एक उदाहरण देखें: पंक्ति 1 सेल 1 पंक्ति 1 सेल 2 पंक्ति 2 सेल 1 पंक्ति 2 सेल 2 परिणाम: ध्यान:यदि चित्र सेल से छोटा है, तो इसे तब तक दोहराया जाएगा जब तक कि यह सेल को अंत तक भर न दे। यदि चित्र सेल से बड़ा है, तो चित्र की पृष्ठभूमि को सेल में फ़िट करने के लिए क्रॉप किया जाएगा। और अंत में मैं आपको इसके बारे में बता दूं दो उपयोगी गुण. यदि आप अचानक सभी कोशिकाओं के बीच की दूरी बढ़ाना चाहते हैं, तो निम्नलिखित विशेषताएँ मदद करेंगी: सेलपैडिंग- प्रत्येक सेल के फ्रेम के बीच की दूरी एचटीएमएल टेबलऔर इसमें जो सामग्री है। पंक्ति 1 सेल 1 पंक्ति 1 सेल 2 पंक्ति 2 सेल 1 पंक्ति 2 सेल 2 परिणाम: पंक्ति 1 सेल 1 पंक्ति 1 सेल 2 पंक्ति 2 सेल 1 पंक्ति 2 सेल 2 सेलस्पेसिंगपड़ोसी कोशिकाओं की सीमाओं के बीच की दूरी है। पंक्ति 1 सेल 1 पंक्ति 1 सेल 2 पंक्ति 2 सेल 1 पंक्ति 2 सेल 2 परिणाम: पंक्ति 1 सेल 1 पंक्ति 1 सेल 2 पंक्ति 2 सेल 1 पंक्ति 2 सेल 2 काहे, मुझे बताया! मुझे आशा है कि मैंने कार्य के साथ मुकाबला किया और मुझे वह सब कुछ समझाया जो मुझे पता था एचटीएमएल टेबल. और मैं आपको सामग्री को अच्छी तरह से ठीक करने की सलाह देता हूं। अपनी स्वयं की तालिका बनाने का प्रयास करें, या बेहतर अभी तक, एक html तालिका से वेब पृष्ठ के लिए एक संपूर्ण रूपरेखा। आपका सब कुछ बढ़िया हो! मेर ब्लॉग को विजिट करने के लिए धन्यवाद शेयर करना: 5,00 / 3 घर →Asus →टेबल को फुल पेज html कैसे बनाते हैं। टैग विशेषताएँ और कोशिकाओं को मर्ज करने के लिए → संबंधित आलेख: आईफोन से क्यूआर कोड कैसे स्कैन करें स्मार्टफोन सैमसंग जीटी I8160 गैलेक्सी ऐस II: समीक्षा और विनिर्देश आईफोन से क्यूआर कोड कैसे स्कैन करें Tele2 के लिए Zvooq सेवा के बारे में सब कुछ