सीएसएस टेबल स्पेसिंग का परिचय
HTML तालिकाओं के साथ काम करते समय, वांछित लेआउट प्राप्त करने के लिए कोशिकाओं के भीतर और बीच की दूरी को नियंत्रित करना महत्वपूर्ण है। परंपरागत रूप से, इस रिक्ति को प्रबंधित करने के लिए सेलपैडिंग और सेलस्पेसिंग विशेषताओं का सीधे HTML टैग में उपयोग किया गया है। हालाँकि, आधुनिक वेब विकास प्रथाएँ बेहतर लचीलेपन और चिंताओं को अलग करने के लिए सीएसएस का उपयोग करने की सलाह देती हैं।
यह लेख यह पता लगाएगा कि इसे कैसे बदला जाए सेलपैडिंग और कोशिका रिक्ति सीएसएस गुणों के साथ विशेषताएँ। हम यह प्रदर्शित करने के लिए स्पष्ट उदाहरण प्रदान करेंगे कि आप अपनी तालिकाओं की उपस्थिति और रखरखाव को बढ़ाकर समान प्रभाव कैसे प्राप्त कर सकते हैं।
| आज्ञा | विवरण |
|---|---|
| border-collapse | यह CSS गुण निर्धारित करता है कि तालिका की सीमाएँ एक ही सीमा में सिमट जानी चाहिए या अलग हो जानी चाहिए। |
| padding | किसी सेल की सामग्री और उसके बॉर्डर के बीच के स्थान को परिभाषित करता है। |
| border | चौड़ाई और रंग सहित तालिका कक्षों की बॉर्डर शैली निर्दिष्ट करता है। |
| <th> | HTML तालिका में हेडर सेल को परिभाषित करता है। |
| <td> | HTML तालिका में एक मानक सेल को परिभाषित करता है। |
| width | तालिका की चौड़ाई निर्दिष्ट करता है. |
टेबल स्पेसिंग के लिए सीएसएस को समझना
प्रदान की गई स्क्रिप्ट में, हम पारंपरिक HTML को प्रतिस्थापित करते हैं और तालिका कोशिकाओं के भीतर और बीच की दूरी को नियंत्रित करने के लिए सीएसएस गुणों के साथ विशेषताएँ। पहली स्क्रिप्ट में CSS ब्लॉक का उपयोग किया जाता है तालिका और उसकी कोशिकाओं पर विश्व स्तर पर शैलियों को लागू करने के लिए टैग। हम उपयोग करते हैं border-collapse यह सुनिश्चित करने के लिए संपत्ति कि आसन्न कोशिकाओं की सीमाएं एक ही सीमा में विलीन हो जाती हैं, जिससे एक साफ-सुथरा लुक तैयार होता है। के भीतर संपत्ति और चयनकर्ता प्रभावी ढंग से प्रतिस्थापित करते हुए, सामग्री और सेल बॉर्डर के बीच का स्थान निर्धारित करते हैं cellpadding.
दूसरी स्क्रिप्ट दर्शाती है कि इनलाइन सीएसएस का उपयोग करके समान परिणाम कैसे प्राप्त किए जा सकते हैं, जो संपूर्ण दस्तावेज़ को प्रभावित किए बिना शैलियों को सीधे विशिष्ट तत्वों पर लागू करने के लिए उपयोगी है। इनलाइन सीएसएस व्यक्तिगत तत्वों से निपटने के दौरान अधिक लचीलापन प्रदान करता है लेकिन अत्यधिक उपयोग किए जाने पर HTML कोड को कम पठनीय बना सकता है। व्यवस्थित करके पर टैग करें और इसका उपयोग करें पर विशेषता <th> और टैग, हम तालिका में लगातार सेल पैडिंग सुनिश्चित करते हैं। यह विधि इस बात पर प्रकाश डालती है कि कैसे सीएसएस पारंपरिक विशेषताओं की तुलना में HTML तत्वों को स्टाइल करने के लिए अधिक मॉड्यूलर और रखरखाव योग्य दृष्टिकोण प्रदान कर सकता है।
सेलपैडिंग और सेलस्पेसिंग को सीएसएस से बदलना
HTML और CSS का उपयोग करना
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS Table Spacing</title><style>table {border-collapse: collapse;width: 100%;}th, td {border: 1px solid black;padding: 10px;}</style></head><body><table><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>Cell 1</td><td>Cell 2</td></tr></table></body></html>
सीएसएस के साथ सेलपैडिंग और सेलस्पेसिंग सेट करना
लचीलेपन के लिए इनलाइन सीएसएस का उपयोग करना
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS Table Spacing</title></head><body><table style="border-collapse: collapse; width: 100%;"><tr><th style="border: 1px solid black; padding: 10px;">Header 1</th><th style="border: 1px solid black; padding: 10px;">Header 2</th></tr><tr><td style="border: 1px solid black; padding: 10px;">Cell 1</td><td style="border: 1px solid black; padding: 10px;">Cell 2</td></tr></table></body></html>
टेबल स्पेसिंग के लिए उन्नत सीएसएस तकनीकें
टेबल स्पेसिंग के लिए सीएसएस का उपयोग करने का एक अन्य महत्वपूर्ण पहलू के बीच के अंतर को समझना शामिल है और . जबकि कोशिकाओं के भीतर की जगह को नियंत्रित करता है, border-spacing कोशिकाओं के बीच की जगह को नियंत्रित करने के लिए उपयोग किया जाता है। को लागू करने यह विशेष रूप से उपयोगी हो सकता है जब आपको कोशिकाओं को अधिक स्पष्ट रूप से अलग करके अधिक आकर्षक तालिकाएँ बनाने की आवश्यकता होती है। उपयोग करने के लिए , आप इसे सीधे पर लागू कर सकते हैं आपके सीएसएस में तत्व, जैसे: table { border-spacing: 10px; }. यह प्रत्येक सेल को 10 पिक्सेल से अलग करता है, जिससे आपकी तालिका की पठनीयता और सुंदरता बढ़ जाती है।
इसके अतिरिक्त, सीएसएस छद्म-वर्गों और छद्म-तत्वों का लाभ उठाकर तालिका स्टाइल को और बढ़ाया जा सकता है। उदाहरण के लिए, का उपयोग करना और चयनकर्ता आपको स्टाइल के लिए विशिष्ट पंक्तियों या स्तंभों को लक्षित करने की अनुमति देते हैं। यह बेहतर पठनीयता के लिए धारीदार प्रभाव प्रदान करते हुए, हर दूसरी पंक्ति या स्तंभ को हाइलाइट करने के लिए फायदेमंद हो सकता है। उदाहरण के लिए, आवेदन करना प्रत्येक सम पंक्ति को हल्के भूरे रंग की पृष्ठभूमि देगा। ऐसी तकनीकें ऐसी तालिकाएँ बनाने में सहायक होती हैं जो न केवल कार्यात्मक होती हैं बल्कि देखने में आकर्षक और पढ़ने में आसान भी होती हैं।
सीएसएस टेबल स्पेसिंग के बारे में सामान्य प्रश्न
- मैं सीएसएस का उपयोग करके सेलस्पेसिंग कैसे सेट करूं?
- उपयोग कोशिकाओं के बीच स्थान निर्धारित करने की संपत्ति।
- मैं सीएसएस में सेलपैडिंग कैसे सेट कर सकता हूं?
- उपयोग संपत्ति के अंदर या कोशिकाओं के भीतर स्थान निर्धारित करने के लिए तत्व।
- सीमा-पतन क्या करता है?
- संपत्ति आसन्न तालिका सेल सीमाओं को एक ही सीमा में विलीन कर देती है।
- क्या मैं टेबल स्पेसिंग के लिए इनलाइन सीएसएस का उपयोग कर सकता हूं?
- हाँ, आप इसका उपयोग कर सकते हैं सीएसएस को सीधे जोड़ने की विशेषता , , और <td> टैग.
- पैडिंग और बॉर्डर-स्पेसिंग के बीच क्या अंतर है?
- जबकि, कोशिकाओं के अंदर की जगह को नियंत्रित करता है कोशिकाओं के बीच की जगह को नियंत्रित करता है।
- मैं किसी तालिका में हर दूसरी पंक्ति को कैसे हाइलाइट कर सकता हूं?
- उपयोग वैकल्पिक पंक्तियों की शैली के लिए सम या विषम तर्क के साथ छद्म वर्ग।
- क्या मैं धारीदार तालिका बनाने के लिए सीएसएस का उपयोग कर सकता हूँ?
- हाँ, शैलियों का उपयोग करके लागू करें या धारीदार प्रभाव प्राप्त करने के लिए चयनकर्ता।
- मैं सीएसएस में टेबल बॉर्डर को मोटा कैसे बनाऊं?
- उपयोग में एक निर्दिष्ट चौड़ाई वाली संपत्ति और चयनकर्ता.
- क्या टेबल स्पेसिंग के लिए HTML विशेषताओं की तुलना में CSS का उपयोग करना बेहतर है?
- हां, सीएसएस का उपयोग अधिक लचीला है और सामग्री और स्टाइल को अलग रखता है, जो वेब विकास में सबसे अच्छा अभ्यास है।
सीएसएस टेबल स्पेसिंग के साथ समापन
टेबल स्पेसिंग के लिए सीएसएस लागू करने से न केवल आपका HTML कोड आधुनिक होता है बल्कि इसकी रखरखाव और पठनीयता भी बढ़ती है। का उपयोग , , और properties तालिका लेआउट पर सटीक नियंत्रण की अनुमति देती है, जो पारंपरिक HTML विशेषताओं की तुलना में अधिक सुरुचिपूर्ण और लचीला समाधान प्रदान करती है। स्वच्छ, प्रतिक्रियाशील और देखने में आकर्षक वेब टेबल बनाने के लिए इन सीएसएस तकनीकों को अपनाना आवश्यक है।