CSS Border Collapse (in Table Borders)

CSS Border Collapse का उपयोग HTML tables में borders के behavior को control करने के लिए किया जाता है। यह property यह तय करती है कि table, th और td के borders अलग-अलग दिखेंगे या आपस में merge होकर एक single border की तरह दिखाई देंगे।

यह property केवल table elements पर apply होती है।

border-collapse Property

border-collapse table के borders को manage करने के लिए इस्तेमाल की जाती है।

Basic syntax:

table {
  border-collapse: value;
}

border-collapse के Values

collapse

collapse value से adjacent borders merge होकर एक single border बन जाते हैं। यह सबसे अधिक इस्तेमाल होने वाला option है।

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

इस case में cell के बीच double border दिखाई नहीं देता।

separate

separate default value होती है। इसमें हर cell का border अलग-अलग दिखाई देता है।

table {
  border-collapse: separate;
}

table, th, td {
  border: 1px solid black;
}

इसमें cells के बीच double borders दिख सकते हैं।

border-spacing Property

जब border-collapse: separate; होता है, तब border-spacing property से cells के बीच की दूरी control की जाती है।

table {
  border-collapse: separate;
  border-spacing: 10px;
}

Two values देने पर:

table {
  border-spacing: 10px 20px;
}

यहाँ:

• horizontal spacing: 10px
• vertical spacing: 20px

border-collapse: collapse; होने पर border-spacing काम नहीं करता।

Table Border Styling Example

Complete table styling example:

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #333;
  padding: 10px;
  text-align: left;
}

Hidden Borders in Tables

Tables में border-style: hidden; का special behavior होता है। यह adjacent borders को भी hide कर सकता है।

table {
  border-collapse: collapse;
}

td {
  border: hidden;
}

border-collapse का Practical Use

• Clean और professional tables बनाने के लिए
• Exam results, data tables और reports display करने के लिए
• Double borders को remove करने के लिए
• Large datasets को readable बनाने के लिए

CSS Border Collapse tables को structured और visually clear बनाने के लिए एक essential property है।