सीएसएस टेबल स्पेसिंग का परिचय
HTML तालिकाओं के साथ काम करते समय, वांछित लेआउट प्राप्त करने के लिए कोशिकाओं के भीतर और बीच की दूरी को नियंत्रित करना महत्वपूर्ण है। परंपरागत रूप से, इस रिक्ति को प्रबंधित करने के लिए सेलपैडिंग और सेलस्पेसिंग विशेषताओं का सीधे HTML टैग में उपयोग किया गया है। हालाँकि, आधुनिक वेब विकास प्रथाएँ बेहतर लचीलेपन और चिंताओं को अलग करने के लिए सीएसएस का उपयोग करने की सलाह देती हैं।
यह लेख यह पता लगाएगा कि इसे कैसे बदला जाए सेलपैडिंग और कोशिका रिक्ति सीएसएस गुणों के साथ विशेषताएँ। हम यह प्रदर्शित करने के लिए स्पष्ट उदाहरण प्रदान करेंगे कि आप अपनी तालिकाओं की उपस्थिति और रखरखाव को बढ़ाकर समान प्रभाव कैसे प्राप्त कर सकते हैं।
| आज्ञा | विवरण |
|---|---|
| border-collapse | यह CSS गुण निर्धारित करता है कि तालिका की सीमाएँ एक ही सीमा में सिमट जानी चाहिए या अलग हो जानी चाहिए। |
| padding | किसी सेल की सामग्री और उसके बॉर्डर के बीच के स्थान को परिभाषित करता है। |
| border | चौड़ाई और रंग सहित तालिका कक्षों की बॉर्डर शैली निर्दिष्ट करता है। |
| <th> | HTML तालिका में हेडर सेल को परिभाषित करता है। |
| <td> | HTML तालिका में एक मानक सेल को परिभाषित करता है। |
| width | तालिका की चौड़ाई निर्दिष्ट करता है. |
टेबल स्पेसिंग के लिए सीएसएस को समझना
प्रदान की गई स्क्रिप्ट में, हम पारंपरिक HTML को प्रतिस्थापित करते हैं cellpadding और cellspacing तालिका कोशिकाओं के भीतर और बीच की दूरी को नियंत्रित करने के लिए सीएसएस गुणों के साथ विशेषताएँ। पहली स्क्रिप्ट में CSS ब्लॉक का उपयोग किया जाता है <style> तालिका और उसकी कोशिकाओं पर विश्व स्तर पर शैलियों को लागू करने के लिए टैग। हम उपयोग करते हैं border-collapse यह सुनिश्चित करने के लिए संपत्ति कि आसन्न कोशिकाओं की सीमाएं एक ही सीमा में विलीन हो जाती हैं, जिससे एक साफ-सुथरा लुक तैयार होता है। padding के भीतर संपत्ति th और td चयनकर्ता प्रभावी ढंग से प्रतिस्थापित करते हुए, सामग्री और सेल बॉर्डर के बीच का स्थान निर्धारित करते हैं cellpadding.
दूसरी स्क्रिप्ट दर्शाती है कि इनलाइन सीएसएस का उपयोग करके समान परिणाम कैसे प्राप्त किए जा सकते हैं, जो संपूर्ण दस्तावेज़ को प्रभावित किए बिना शैलियों को सीधे विशिष्ट तत्वों पर लागू करने के लिए उपयोगी है। इनलाइन सीएसएस व्यक्तिगत तत्वों से निपटने के दौरान अधिक लचीलापन प्रदान करता है लेकिन अत्यधिक उपयोग किए जाने पर HTML कोड को कम पठनीय बना सकता है। व्यवस्थित करके border-collapse पर <table> टैग करें और इसका उपयोग करें style पर विशेषता <th> और <td> टैग, हम तालिका में लगातार सेल पैडिंग सुनिश्चित करते हैं। यह विधि इस बात पर प्रकाश डालती है कि कैसे सीएसएस पारंपरिक विशेषताओं की तुलना में 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 और padding. जबकि padding कोशिकाओं के भीतर की जगह को नियंत्रित करता है, border-spacing कोशिकाओं के बीच की जगह को नियंत्रित करने के लिए उपयोग किया जाता है। को लागू करने border-spacing यह विशेष रूप से उपयोगी हो सकता है जब आपको कोशिकाओं को अधिक स्पष्ट रूप से अलग करके अधिक आकर्षक तालिकाएँ बनाने की आवश्यकता होती है। उपयोग करने के लिए border-spacing, आप इसे सीधे पर लागू कर सकते हैं <table> आपके सीएसएस में तत्व, जैसे: table { border-spacing: 10px; }. यह प्रत्येक सेल को 10 पिक्सेल से अलग करता है, जिससे आपकी तालिका की पठनीयता और सुंदरता बढ़ जाती है।
इसके अतिरिक्त, सीएसएस छद्म-वर्गों और छद्म-तत्वों का लाभ उठाकर तालिका स्टाइल को और बढ़ाया जा सकता है। उदाहरण के लिए, का उपयोग करना :nth-child और :nth-of-type चयनकर्ता आपको स्टाइल के लिए विशिष्ट पंक्तियों या स्तंभों को लक्षित करने की अनुमति देते हैं। यह बेहतर पठनीयता के लिए धारीदार प्रभाव प्रदान करते हुए, हर दूसरी पंक्ति या स्तंभ को हाइलाइट करने के लिए फायदेमंद हो सकता है। उदाहरण के लिए, आवेदन करना tr:nth-child(even) { background-color: #f2f2f2; } प्रत्येक सम पंक्ति को हल्के भूरे रंग की पृष्ठभूमि देगा। ऐसी तकनीकें ऐसी तालिकाएँ बनाने में सहायक होती हैं जो न केवल कार्यात्मक होती हैं बल्कि देखने में आकर्षक और पढ़ने में आसान भी होती हैं।
सीएसएस टेबल स्पेसिंग के बारे में सामान्य प्रश्न
- मैं सीएसएस का उपयोग करके सेलस्पेसिंग कैसे सेट करूं?
- उपयोग border-spacing कोशिकाओं के बीच स्थान निर्धारित करने की संपत्ति।
- मैं सीएसएस में सेलपैडिंग कैसे सेट कर सकता हूं?
- उपयोग padding संपत्ति के अंदर th या td कोशिकाओं के भीतर स्थान निर्धारित करने के लिए तत्व।
- सीमा-पतन क्या करता है?
- border-collapse संपत्ति आसन्न तालिका सेल सीमाओं को एक ही सीमा में विलीन कर देती है।
- क्या मैं टेबल स्पेसिंग के लिए इनलाइन सीएसएस का उपयोग कर सकता हूं?
- हाँ, आप इसका उपयोग कर सकते हैं style सीएसएस को सीधे जोड़ने की विशेषता <table>, <th>, और <td> टैग.
- पैडिंग और बॉर्डर-स्पेसिंग के बीच क्या अंतर है?
- Padding जबकि, कोशिकाओं के अंदर की जगह को नियंत्रित करता है border-spacing कोशिकाओं के बीच की जगह को नियंत्रित करता है।
- मैं किसी तालिका में हर दूसरी पंक्ति को कैसे हाइलाइट कर सकता हूं?
- उपयोग :nth-child वैकल्पिक पंक्तियों की शैली के लिए सम या विषम तर्क के साथ छद्म वर्ग।
- क्या मैं धारीदार तालिका बनाने के लिए सीएसएस का उपयोग कर सकता हूँ?
- हाँ, शैलियों का उपयोग करके लागू करें :nth-child या :nth-of-type धारीदार प्रभाव प्राप्त करने के लिए चयनकर्ता।
- मैं सीएसएस में टेबल बॉर्डर को मोटा कैसे बनाऊं?
- उपयोग border में एक निर्दिष्ट चौड़ाई वाली संपत्ति th और td चयनकर्ता.
- क्या टेबल स्पेसिंग के लिए HTML विशेषताओं की तुलना में CSS का उपयोग करना बेहतर है?
- हां, सीएसएस का उपयोग अधिक लचीला है और सामग्री और स्टाइल को अलग रखता है, जो वेब विकास में सबसे अच्छा अभ्यास है।
सीएसएस टेबल स्पेसिंग के साथ समापन
टेबल स्पेसिंग के लिए सीएसएस लागू करने से न केवल आपका HTML कोड आधुनिक होता है बल्कि इसकी रखरखाव और पठनीयता भी बढ़ती है। का उपयोग border-collapse, padding, और border-spacing properties तालिका लेआउट पर सटीक नियंत्रण की अनुमति देती है, जो पारंपरिक HTML विशेषताओं की तुलना में अधिक सुरुचिपूर्ण और लचीला समाधान प्रदान करती है। स्वच्छ, प्रतिक्रियाशील और देखने में आकर्षक वेब टेबल बनाने के लिए इन सीएसएस तकनीकों को अपनाना आवश्यक है।