HTML टेबल्समध्ये सेलपॅडिंग आणि सेलस्पेसिंग सेट करण्यासाठी CSS वापरणे

HTML टेबल्समध्ये सेलपॅडिंग आणि सेलस्पेसिंग सेट करण्यासाठी CSS वापरणे
Lucas Simon
शनिवार, २२ जून, २०२४ रोजी १:२२:३५ म.उ.
CSS

CSS टेबल स्पेसिंगचा परिचय

HTML सारण्यांसह कार्य करताना, इच्छित लेआउट साध्य करण्यासाठी सेलमधील आणि सेलमधील अंतर नियंत्रित करणे महत्वाचे आहे. पारंपारिकपणे, हे अंतर व्यवस्थापित करण्यासाठी सेलपॅडिंग आणि सेलस्पेसिंग विशेषता थेट HTML टॅगमध्ये वापरल्या गेल्या आहेत. तथापि, आधुनिक वेब डेव्हलपमेंट पद्धती चांगल्या लवचिकतेसाठी आणि चिंता वेगळे करण्यासाठी CSS वापरण्याची शिफारस करतात.

हे लेख कसे पुनर्स्थित करायचे ते एक्सप्लोर करेल सेलपॅडिंग आणि सेलस्पेसिंग CSS गुणधर्मांसह विशेषता. तुमच्या सारण्यांचे स्वरूप आणि देखभालक्षमता वाढवून तुम्ही समान प्रभाव कसे मिळवू शकता हे दाखवण्यासाठी आम्ही स्पष्ट उदाहरणे देऊ.

आज्ञा वर्णन
border-collapse हे CSS गुणधर्म सेट करते की टेबल बॉर्डर एकाच बॉर्डरमध्ये कोलमडल्या पाहिजेत की वेगळ्या केल्या पाहिजेत.
padding सेलची सामग्री आणि त्याची सीमा यांच्यातील जागा परिभाषित करते.
border रुंदी आणि रंगासह, टेबल सेलची सीमा शैली निर्दिष्ट करते.
<th> HTML सारणीमध्ये शीर्षलेख सेल परिभाषित करते.
<td> HTML सारणीमध्ये मानक सेल परिभाषित करते.
width टेबलची रुंदी निर्दिष्ट करते.

टेबल स्पेसिंगसाठी CSS समजून घेणे

प्रदान केलेल्या स्क्रिप्टमध्ये, आम्ही पारंपारिक HTML पुनर्स्थित करतो cellpadding आणि १ टेबल सेलमधील आणि मधील अंतर नियंत्रित करण्यासाठी CSS गुणधर्मांसह विशेषता. पहिली स्क्रिप्ट मध्ये CSS ब्लॉक वापरते <style> टेबल आणि त्याच्या सेलवर जागतिक स्तरावर शैली लागू करण्यासाठी टॅग. आम्ही वापरतो border-collapse समीप सेलच्या सीमा एकाच बॉर्डरमध्ये विलीन झाल्याची खात्री करण्यासाठी गुणधर्म, एक स्वच्छ देखावा तयार करणे. द padding च्या आत मालमत्ता ५ आणि td निवडकर्ते सामग्री आणि सेल बॉर्डरमधील जागा प्रभावीपणे बदलून सेट करतात cellpadding.

दुसरी स्क्रिप्ट इनलाइन CSS वापरून समान परिणाम कसे मिळवायचे ते दाखवते, जे संपूर्ण दस्तऐवजावर परिणाम न करता थेट विशिष्ट घटकांवर शैली लागू करण्यासाठी उपयुक्त आहे. वैयक्तिक घटकांशी व्यवहार करताना इनलाइन CSS अधिक लवचिकता प्रदान करते परंतु जास्त वापरल्यास HTML कोड कमी वाचनीय बनवू शकतो. सेटिंग करून border-collapse वर ९ टॅग आणि वापरून style वर विशेषता <th> आणि <td> टॅग, आम्ही टेबलवर सुसंगत सेल पॅडिंग सुनिश्चित करतो. ही पद्धत ठळक करते की पारंपारिक गुणधर्मांच्या तुलनेत CSS HTML घटकांच्या शैलीसाठी अधिक मॉड्यूलर आणि देखभाल करण्यायोग्य दृष्टीकोन कसा प्रदान करू शकतो.

CSS सह सेलपॅडिंग आणि सेलस्पेसिंग बदलणे

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>

CSS सह सेलपॅडिंग आणि सेलस्पेसिंग सेट करणे

लवचिकतेसाठी इनलाइन CSS वापरणे

१

टेबल स्पेसिंगसाठी प्रगत CSS तंत्र

टेबल स्पेसिंगसाठी CSS वापरण्याच्या आणखी एक महत्त्वाच्या पैलूमध्ये फरक समजून घेणे समाविष्ट आहे border-spacing आणि padding. असताना padding पेशींमधील जागा नियंत्रित करते, border-spacing पेशींमधील जागा नियंत्रित करण्यासाठी वापरली जाते. अर्ज करत आहे border-spacing जेव्हा तुम्हाला सेल अधिक स्पष्टपणे विभक्त करून अधिक दृष्यदृष्ट्या आकर्षक सारण्या तयार करण्याची आवश्यकता असते तेव्हा ते विशेषतः उपयोगी असू शकते. वापरणे border-spacing, आपण ते थेट लागू करू शकता ९ तुमच्या CSS मधील घटक, जसे की: table { border-spacing: 10px; }. हे प्रत्येक सेलला 10 पिक्सेलने वेगळे करते, तुमच्या टेबलची वाचनीयता आणि सौंदर्य वाढवते.

याव्यतिरिक्त, CSS स्यूडो-क्लासेस आणि स्यूडो-एलिमेंट्सचा फायदा घेऊन टेबल स्टाइलिंग आणखी वाढवू शकते. उदाहरणार्थ, वापरणे २१ आणि :nth-of-type निवडक तुम्हाला स्टाइलसाठी विशिष्ट पंक्ती किंवा स्तंभ लक्ष्यित करण्याची परवानगी देतात. इतर प्रत्येक पंक्ती किंवा स्तंभ हायलाइट करण्यासाठी, चांगल्या वाचनीयतेसाठी स्ट्रीप प्रभाव प्रदान करण्यासाठी हे फायदेशीर ठरू शकते. उदाहरणार्थ, अर्ज करणे tr:nth-child(even) { background-color: #f2f2f2; } प्रत्येक सम पंक्तीला हलकी राखाडी पार्श्वभूमी देईल. अशी तंत्रे केवळ कार्यक्षम नसून दृष्यदृष्ट्या आकर्षक आणि वाचण्यास सुलभ अशा तक्त्या तयार करण्यात मदत करतात.

CSS टेबल स्पेसिंगबद्दल सामान्य प्रश्न

  1. मी CSS वापरून सेलस्पेसिंग कसे सेट करू?
  2. वापरा border-spacing सेल दरम्यान जागा सेट करण्यासाठी गुणधर्म.
  3. मी CSS मध्ये सेलपॅडिंग कसे सेट करू शकतो?
  4. वापरा padding आत मालमत्ता ५ किंवा td पेशींमध्ये जागा सेट करण्यासाठी घटक.
  5. बॉर्डर-कोलॅप्स काय करते?
  6. द border-collapse प्रॉपर्टी समीप टेबल सेल बॉर्डर एका बॉर्डरमध्ये विलीन करते.
  7. मी टेबल स्पेसिंगसाठी इनलाइन CSS वापरू शकतो का?
  8. होय, आपण वापरू शकता style सीएसएस थेट मध्ये जोडण्यासाठी विशेषता ९, <th>, आणि <td> टॅग
  9. पॅडिंग आणि बॉर्डर-स्पेसिंगमध्ये काय फरक आहे?
  10. ३३ पेशींमधील जागा नियंत्रित करते, तर border-spacing पेशींमधील जागा नियंत्रित करते.
  11. मी टेबलमधील इतर प्रत्येक पंक्ती कशी हायलाइट करू शकतो?
  12. वापरा २१ पर्यायी पंक्ती शैलीसाठी सम किंवा विषम युक्तिवादासह स्यूडो-क्लास.
  13. मी स्ट्रीप टेबल तयार करण्यासाठी CSS वापरू शकतो का?
  14. होय, वापरून शैली लागू करा २१ किंवा :nth-of-type एक धारीदार प्रभाव प्राप्त करण्यासाठी निवडक.
  15. मी CSS मध्ये टेबल बॉर्डर जाड कसे करू शकतो?
  16. वापरा ३८ मध्ये निर्दिष्ट रुंदी असलेली मालमत्ता ५ आणि td निवडकर्ते
  17. HTML विशेषतांपेक्षा टेबल स्पेसिंगसाठी CSS वापरणे चांगले आहे का?
  18. होय, CSS वापरणे अधिक लवचिक आहे आणि सामग्री आणि शैलीचे पृथक्करण राखते, जे वेब डेव्हलपमेंटमधील सर्वोत्तम सराव आहे.

CSS टेबल स्पेसिंगसह रॅपिंग अप

टेबल स्पेसिंगसाठी CSS लागू करणे केवळ तुमच्या HTML कोडचे आधुनिकीकरण करत नाही तर त्याची देखभालक्षमता आणि वाचनीयता देखील वाढवते. चा उपयोग border-collapse, padding, आणि border-spacing गुणधर्म टेबल लेआउटवर तंतोतंत नियंत्रण ठेवण्यास परवानगी देतात, पारंपारिक HTML विशेषतांच्या तुलनेत अधिक मोहक आणि लवचिक समाधान प्रदान करतात. स्वच्छ, प्रतिसाद देणारी आणि दृष्यदृष्ट्या आकर्षक वेब टेबल्स तयार करण्यासाठी या CSS तंत्रांचा स्वीकार करणे आवश्यक आहे.