HTML Table Borders

एक बुनियादी Border जोड़ना

table, th, और td elements पर border: 1px solid black apply करने से table के बाहरी edge के साथ-साथ हर individual cell के आसपास भी एक border बनता है, जो classic grid appearance पैदा करता है जिसे ज़्यादातर लोग HTML table सोचते समय imagine करते हैं।

उदाहरण: Adding a Basic Border

<style>
  table, th, td {
    border: 1px solid black;
  }
</style>
<table>
  <tr><th>Name</th></tr>
  <tr><td>Alex</td></tr>
</table>

border-collapse से Lines को Merge करना

border-collapse के बिना, आसपास की cells अपनी-अपनी अलग border खींचती हैं, जो जहां दो cells मिलती हैं वहां visually एक मोटी line जैसी दिखती है। border-collapse: collapse इन shared edges को एक साफ़ single line में merge कर देता है, जो लगभग हर modern table design में दिखता है।

उदाहरण: Merging Lines with border-collapse

<style>
  table {
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
  }
</style>
<table>
  <tr><td>Cell</td></tr>
</table>

Borders को Color और Style करना

किसी भी अन्य CSS border की तरह, table borders default solid black से आगे एक color और line style स्वीकार करती हैं -- border: 2px dashed #3498db एक मोटी, dashed blue line खींचता है, जिससे table borders हमेशा gray या black दिखने के बजाय किसी site की overall color scheme से मेल खा सकती हैं।

उदाहरण: Coloring and Styling Borders

<style>
  table, th, td {
    border: 2px dashed #3498db;
  }
</style>
<table>
  <tr><td>Cell</td></tr>
</table>

सिर्फ Specific Sides को Border करना

CSS आपको किसी cell के border की सिर्फ एक side, जैसे border-bottom, सेट करने देता है, चारों के बजाय -- इसी तरह आम "row divider" table style बनाई जाती है, जहां सिर्फ एक horizontal line rows को अलग करती है और कोई vertical column lines नहीं होतीं।

उदाहरण: Bordering Only Specific Sides

<style>
  td {
    border-bottom: 1px solid #ddd;
  }
</style>
<table>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
</table>

Rounded Table Borders

क्योंकि border-collapse: collapse सभी cell borders को एक single flattened grid में merge कर देता है, collapsed table में individual cells पर border-radius सीधे काम नहीं करता।

इसके बजाय rounded outer corners पाने के लिए border-collapse: separate के साथ border-spacing: 0 चाहिए, या table के चारों ओर एक wrapping container element पर border-radius apply करना पड़ता है।

उदाहरण: Rounded Table Borders

<style>
  .wrapper {
    overflow: hidden;
    border-radius: 8px;
  }
</style>
<div class="wrapper">
  <table>
    <tr><td>Cell</td></tr>
  </table>
</div>