HTML तालिका में इंडेंटेशन. सीमा संपत्ति का उपयोग करना

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

किसी सेल को इंडेंट करने के लिए, विशेषता का उपयोग करें सेलपैडिंगटैग के लिए

इस मामले में, इंडेंटेशन संपत्ति का उपयोग करके सेट किया गया है गद्दी. इसकी मदद से, जहां आवश्यक हो, यानी ऊपर, दाएं, नीचे या बाएं, क्रमशः, इनमें से किसी एक गुण का उपयोग करके इंडेंट करना मुश्किल नहीं होगा: पैडिंग शीर्ष, गद्दी-सही, नीचे गद्दी करनाऔर गद्दी छूट गई.

आप सटीक रूप से निर्दिष्ट कर सकते हैं कि इंडेंटेशन कितने पिक्सेल का होना चाहिए। आइए एक उदाहरण दें जिसमें निचला इंडेंट होगा 20 पिक्सेल, और बाकी सभी होंगे 10 . ऐसा सीएसएस-कोड इस तरह दिखेगा:

टीडी (पैडिंग: 10px; पैडिंग-बॉटम: 20px;)

और इस स्तर पर संपूर्ण शैली कोड:

टेबल (बॉर्डर: ठोस 1px नीला; बॉर्डर-पतन: पतन; ) टीडी (बॉर्डर: ठोस 1px नीला; पैडिंग: 10px; पैडिंग-बॉटम: 20px;)

ब्राउज़र में परिणाम:

कोशिकाओं के बीच रिक्त स्थान

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

तालिकाओं में इंडेंट केवल कोशिकाओं के अंदर ही नहीं पाए जाते हैं। वे स्वयं कोशिकाओं के बीच भी मौजूद हो सकते हैं।

कोशिकाओं के बीच इंडेंट बनाने के लिए दो विकल्प हैं:

1. विशेषता का उपयोग करना कोशिका रिक्तिटैग के लिए

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

आइए एक उदाहरण देखें:

टेबल (बॉर्डर: ठोस 1px नीला; बॉर्डर-संक्षरण: अलग; बॉर्डर-स्पेसिंग: 5px; ) टीडी (बॉर्डर: ठोस 1px नीला; पैडिंग: 10px; पैडिंग-बॉटम: 20px;)

और परिणामी परिणाम:

आइए हम तुरंत यह निर्धारित करें कि आपको ऐसे इंडेंटेशन का उपयोग करने का प्रयास नहीं करना चाहिए सीमा-पतन: पतन. आख़िरकार, इस विकल्प का उपयोग करते समय, कोशिकाएँ एक दूसरे से "चिपक जाती हैं"।

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

वेब पेज बनाने के लिए तालिका मुख्य उपकरणों में से एक है।

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

कोई भी तालिका पंक्तियों और स्तंभों का एक समूह है, जिसके चौराहे पर कोशिकाएँ होती हैं। उदाहरण के लिए:

आइए हमारी तालिका को HTML परिप्रेक्ष्य से देखें:

• तालिका स्वयं टैग का उपयोग करके निर्दिष्ट की जाती है

परिणाम:

जैसा कि आप देख सकते हैं, यह बहुत अच्छा नहीं बना, हम इसे सजाएंगे।

HTML तालिका पैरामीटर: इंडेंटेशन, चौड़ाई, पृष्ठभूमि रंग, फ़्रेम

इस प्रयोजन के लिए टैग

• चौड़ाई- तालिका की चौड़ाई निर्धारित करता है (पिक्सेल में या स्क्रीन की चौड़ाई का %),
• बीजीरंग- तालिका कक्षों का पृष्ठभूमि रंग सेट करता है,
• पृष्ठभूमि- तालिका की पृष्ठभूमि को एक पैटर्न से भर देता है,
• सीमा- संपूर्ण तालिका के चारों ओर निर्दिष्ट चौड़ाई (पिक्सेल में) की सीमा निर्धारित करता है,
• सेलपैडिंग- सेल बॉर्डर और उसकी सामग्री के बीच पिक्सेल में मार्जिन सेट करता है।

परिणाम:

यह बेहतर है, लेकिन हमारी तालिका विंडो के बाएँ किनारे पर दबी हुई है, जैसा कि उसमें पाठ है। आइए तीन और पैरामीटर जोड़कर इसे ठीक करें:

• संरेखित- तालिका संरेखण सेट करता है: बाएँ (दाएँ), दाएँ (बाएँ), केंद्र (केंद्र),
• कोशिका रिक्ति- टेबल सेल के बीच की दूरी (पिक्सेल में) सेट करता है,
• सेलपैडिंग- टेक्स्ट और टेबल सेल की आंतरिक सीमा (पिक्सेल में) के बीच की दूरी निर्धारित करता है।

परिणाम:

कृपया ध्यान दें कि तालिका में दोहरी सीमाएँ हैं। यदि आप निर्दिष्ट करते हैं सेलस्पेसिंग = "0", तो सीमाएँ सामान्य रूप ले लेंगी:

सामान्य तौर पर, दो पैरामीटर सीमाओं के लिए ज़िम्मेदार होते हैं:

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

परिणाम:

यह ध्यान दिया जाना चाहिए कि सीमाएँ विभिन्न ब्राउज़रथोड़ा अलग तरीके से प्रदर्शित किया जाता है।

HTML टैग्स tr और td

तालिकाएँ पंक्ति दर पंक्ति बनती हैं। इसलिए, लाइन (tr) में निर्दिष्ट पैरामीटर लाइन के सभी सेल (td) तक अपना प्रभाव बढ़ाते हैं। स्ट्रिंग्स के तीन पैरामीटर हो सकते हैं:

• संरेखित- कोशिकाओं में पाठ को क्षैतिज रूप से संरेखित करता है, मान ले सकता है: बाएँ (दाएँ), दाएँ (बाएँ), केंद्र (केंद्र),
• वेलिजन- कोशिकाओं में पाठ को लंबवत रूप से संरेखित करता है, मान ले सकता है: ऊपर (ऊपर), नीचे (नीचे), केंद्रित (मध्य),
• बीजीरंग- लाइन का रंग सेट करता है.

• चौड़ाई- कॉलम की चौड़ाई निर्धारित करता है (पिक्सेल में या प्रतिशत के रूप में, जहां 100% तालिका की चौड़ाई है),
• ऊंचाई- सेल की ऊंचाई निर्धारित करता है, और एक ही पंक्ति में सभी सेल इस ऊंचाई के हो जाएंगे।

परिणाम:

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

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

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

सीमा-संक्षरण: अलग - प्रत्येक कोशिका की अपनी सीमा होती है (डिफ़ॉल्ट)

सीमा-पतन: पतन - साझा सीमा

बॉर्डर-पतन: इनहेरिट - मान मूल तत्व से लिया गया है

उदाहरण के लिए, आइए एक तालिका बनाएं और पृष्ठ पर मौजूद सभी तालिकाओं की कोशिकाओं के लिए एक फ़्रेम सेट करें। आइए पहले यह देखने के लिए कुछ भी न बदलें कि तालिका कैसी दिखेगी:

शैली:

1 2 3 4 5 6

गृहकार्य। इस पाठ में, मैं हर चीज़ का विस्तार से वर्णन नहीं करूँगा - केवल सामान्य बिंदु। चित्र को पूरा करने के लिए, उदाहरण परिणाम देखें। तीन तालिकाएँ बनाएँ, जिनमें से प्रत्येक में एक पंक्ति और तीन स्तंभ (कॉलम) हों। पहली तालिका में, पृष्ठ का हेडर या "हेडर" रखें (HTML दस्तावेज़ के "हेडर" के साथ भ्रमित न हों), दूसरे में - बाएँ और दाएँ मेनू, साथ ही मुख्य सामग्री (सामग्री) , तीसरे में - पृष्ठ का पाद लेख या "पाद लेख"। प्रत्येक टेबल के पहले और आखिरी कॉलम की चौड़ाई तय कर दें। महत्वपूर्ण। टैग का प्रयोग करें केवल चार बटन बनाने के लिए क्षैतिज मेनूपृष्ठ के शीर्षलेख में. अन्य मामलों में, छवियों को पृष्ठभूमि में जाने दें, और तालिकाओं की दूसरी कोशिकाओं में केवल रंगों का उपयोग किया जाता है, और पहली और आखिरी तालिका में यह #99FF99 है। पृष्ठ सामग्री पाठ को तालिका कक्ष के दोनों ओर संरेखित करें और शीर्षक को केन्द्रित करें। जहां तक ​​टेबल सेल्स और सेल इंडेंट के बीच की दूरी का सवाल है, तो आप स्वयं सोचें कि उन्हें कहां पूरी तरह से हटा दिया जाना चाहिए और कहां बढ़ाया जाना चाहिए। यह लोकप्रिय हो गया, वेब डिज़ाइनरों ने मुख्य रूप से टेबल लेआउट पद्धति का उपयोग किया और बहुत अच्छे परिणाम प्राप्त किये। HTML में टेबल बनाने के लिए टैग का उपयोग किया जाता है मेज़ - आवश्यक टैग, टेबल को खोलना और बंद करना कैप्शन- तालिका शीर्षक दर्शाने वाला वैकल्पिक टैग वां- एक वैकल्पिक टैग, जिसके उद्घाटन और समापन टैग में कॉलम नाम होता है। आमतौर पर बोल्ड दिखाई देता है टी.आर.- एक आवश्यक टैग जो लाइन को खोलता और बंद करता है टीडी- एक पंक्ति में सेल के खुलने और बंद होने का संकेत देने वाला एक आवश्यक टैग एक साधारण तालिका के लिए उदाहरण कोड तालिका नाम स्टोबेट्स 1 स्टोबेट्स 2 प्रथम सेल में पाठ दूसरे सेल में टेक्स्ट ब्राउज़र प्रदर्शित करेगा HTML में टेबल का उद्देश्य टेबल पर पाठ बहुत महत्वपूर्ण है! तालिकाओं के लिए धन्यवाद, आप न केवल पाठ, बल्कि चित्र, लिंक और भी बहुत कुछ व्यवस्थित कर सकते हैं। तालिका में आप निर्दिष्ट कर सकते हैं पृष्ठभूमि(या उसका रंग), खरोज, चौड़ाई, सीमाऔर अन्य पैरामीटरजो उसे एक खूबसूरत लुक देगा उपस्थिति. तालिका - समझने की दिशा में आपका पहला कदम वेब डिजाइन! पहले, कई साइटें पूरी तरह से तालिकाओं के रूप में रखी गई थीं, यानी, उपयोगकर्ता ने जो कुछ भी देखा (साइड मेनू, शीर्ष मेनू, सामग्री) वह एक बड़ी तालिका की कोशिकाओं की सामग्री थी। उस नोट पर, आइए सीधे उन विशेषताओं पर चलते हैं जो तालिका को सुंदर बनाती हैं... HTML तालिकाओं के गुण और पैरामीटर: इंडेंटेशन, चौड़ाई, पृष्ठभूमि रंग, बॉर्डर (फ़्रेम) यू टेबल टैगनिम्नलिखित गुण हैं: चौड़ाई- टेबल की चौड़ाई. पिक्सेल या स्क्रीन चौड़ाई के % में हो सकता है. बीजीरंग- तालिका कोशिकाओं की पृष्ठभूमि का रंग पृष्ठभूमि- तालिका की पृष्ठभूमि को एक पैटर्न से भर देता है सीमा- तालिका में फ़्रेम और बॉर्डर। मोटाई पिक्सेल में इंगित की गई है सेलपैडिंग- सेल सामग्री और उसकी आंतरिक सीमा के बीच पिक्सेल में पैडिंग पहले की तरह, हम विशेषता मान को उद्धरण चिह्नों में लिखते हैं। आइए एक उदाहरण का उपयोग करके इन विशेषताओं के उपयोग को देखें। ऐसा करने के लिए, आइए एक तालिका बनाएं (लेकिन पहले से ही बेहद कम इस्तेमाल किए जाने वाले कैप्शन और वें टैग के बिना) और पैरामीटर को विशेषता पर सेट करें सीमा, चौड़ाई (तालिका, पंक्ति या सेल की चौड़ाई)और बीजीरंग (सेल रंग) परिणामस्वरूप, निम्न तालिका ब्राउज़र में प्रदर्शित होगी: चौखटा- मेज के चारों ओर फ्रेम को इंगित करने वाली एक विशेषता। निम्नलिखित मान हैं: शून्य - कोई फ़्रेम नहीं, ऊपर - केवल शीर्ष फ्रेम, नीचे - केवल निचला फ्रेम, एचसाइड्स - केवल ऊपर और नीचे के फ्रेम, vsides - केवल बाएँ और दाएँ फ़्रेम, एलएचएस - केवल बायां फ्रेम, आरएचएस - केवल दायां फ्रेम, बॉक्स - फ्रेम के सभी चार भाग। नियम- तालिका के भीतर, कोशिकाओं के बीच की सीमाओं को दर्शाने वाली एक विशेषता। निम्नलिखित मान हैं: कोई नहीं - कोशिकाओं के बीच कोई सीमा नहीं है, समूह - केवल पंक्तियों के समूहों और स्तंभों के समूहों के बीच की सीमाएँ (थोड़ी देर बाद चर्चा की जाएगी), पंक्तियाँ - केवल पंक्तियों के बीच की सीमाएँ, cols - केवल स्तंभों के बीच की सीमाएँ, सभी - सभी सीमाएँ प्रदर्शित करें। आइए कोड उदाहरण देखें स्टोबेट्स 1 स्टोबेट्स 2 परिणाम आइए अब एक सुंदर तालिका बनाने का प्रयास करें। ऐसा करने के लिए, आइए उपयोग शुरू करें तालिका संरेखण. ऐसा करने के लिए, निम्नलिखित पहले से ही परिचित पैरामीटर हैं: संरेखित- टेबल संरेखण. इसे बाएँ (बाएँ), दाएँ (दाएँ), केंद्र (केंद्र) में रखा जा सकता है कोशिका रिक्ति- टेबल कोशिकाओं के बीच की दूरी। पिक्सेल में निर्दिष्ट (डिफ़ॉल्ट 0 पिक्सेल) सेलपैडिंग- सेल सामग्री और उसकी आंतरिक सीमा के बीच पिक्सेल में पैडिंग (डिफ़ॉल्ट 0 पिक्सेल) आइए एक उदाहरण देखें स्टोबेट्स 1 स्टोबेट्स 2 पहले कॉलम के पहले सेल में टेक्स्ट दूसरे कॉलम के दूसरे सेल में टेक्स्ट ब्राउज़र एक केन्द्रित तालिका प्रदर्शित करेगा जो इस तरह दिखेगी: HTML तालिकाओं में tr पंक्तियाँ और td कोशिकाएँ मैं आपको फिर से याद दिला दूं कि तालिकाएँ पंक्ति दर पंक्ति (tr) बनती हैं। पंक्तियों (tr) में पहले से ही कोशिकाएँ (td) हैं। यदि आप किसी स्ट्रिंग (tr) के लिए एक पैरामीटर निर्दिष्ट करते हैं, तो यह इसके लिए मान्य होगा सभी कोशिकाएँ(टीडी) इस पंक्ति में, यदि किसी विशिष्ट सेल के लिए, तो केवल उसके लिए। उपरोक्त उदाहरणों में, मैंने पंक्ति के लिए रंग निर्दिष्ट किया था; यह पैरामीटर सभी कोशिकाओं के अनुसार वितरित किया गया था। tr और td टैग के लिए निम्नलिखित हैं संरेखित- सेल के अंदर टेक्स्ट का संरेखण। बायां किनारा (बाएं), दायां किनारा (दाएं), केंद्र (केंद्र) वेलिजन- सेल के अंदर टेक्स्ट का लंबवत संरेखण। ऊपर (ऊपर), नीचे (नीचे), केंद्र (मध्य) बीजीरंग- लाइन का रंग सेट करता है चौड़ाई- कॉलम की चौड़ाई (नीचे सभी सेल इस पैरामीटर को स्वीकार करेंगे) पिक्सेल में या प्रतिशत के रूप में इंगित की गई है, जहां 100% संपूर्ण तालिका की चौड़ाई है ऊंचाई- सेल ऊंचाई (पंक्ति के सभी सेल इस पैरामीटर को स्वीकार करेंगे) आइए उस कोड को देखें जहां कोशिकाओं की सामग्री (टीडी) को विभिन्न किनारों पर संरेखित किया गया है: पहले में बाईं ओर, दूसरे में दाईं ओर: स्टोबेट्स 1 स्टोबेट्स 2 पहले कॉलम के पहले सेल में टेक्स्ट दूसरे कॉलम के दूसरे सेल में टेक्स्ट स्टोबेट्स 1 स्टोबेट्स 2 परिणाम टेबल्स का उपयोग करके आप एक बहुत अच्छा पेज बना सकते हैं। यह न भूलें कि आप सेल में न केवल टेक्स्ट डाल सकते हैं, बल्कि चित्र, लिंक आदि भी डाल सकते हैं!) आपके ध्यान देने के लिए धन्यवाद! मुझे आशा है कि सामग्री उपयोगी थी! मित्रों को बताओ ट्विटर सैमसंग गेम... एंड्रॉइड डेस्कटॉप गायब हो गया है या लॉन्चर काम नहीं कर रहा है! अगला लेख एक्सपीरिया कंपेनियन - एक्सपीरिया को अपडेट करने और पुनर्स्थापित करने के लिए विंडोज पीसी पर एक नया एप्लिकेशन ये भी पढ़ें Android के लिए सर्वश्रेष्ठ संगीत प्लेयर 2024-03-13 00:03:49 हब, स्विच और राउटर क्या है? 2024-03-12 00:04:38 JSON संक्षिप्त नाम डिकोडिंग 2024-03-11 00:04:21 एक दिलचस्प प्रभाव के साथ jQuery छवि गैलरी 2024-03-09 00:04:15 स्टोबेट्स 1 स्टोबेट्स 2 पहले कॉलम के पहले सेल में टेक्स्ट दूसरे कॉलम के दूसरे सेल में टेक्स्ट