CSS Tables

Tables सही tool हैं जब भी data genuinely rows और columns में fit होता है, जैसे कोई pricing comparison या spec sheet। अपने आप, browsers tables को काफ़ी plain, cramped तरीके से render करते हैं, लेकिन थोड़ी सी CSS उन्हें कहीं ज़्यादा readable चीज़ में बदल देती है। border-collapse cells के बीच double borders को साफ़ single lines में merge कर देता है, th और td padding cells को breathing room देती है, zebra striping (alternating row colors) wide tables को scan करना आसान बनाती है, और एक hover effect उस row को highlight कर सकता है जिसे visitor इस समय पढ़ रहा है। छोटे screens पर, tables को awkward horizontal scrolling से बचने के लिए अक्सर extra care चाहिए होती है।

In this page:

border-collapse
Table Width
th और td में Padding
Zebra Striping और Hover Effects
Responsive Tables

Syntax

css

table {
  border-collapse: collapse;
}
th, td {
  border: width style color;
  padding: length;
}

border-collapse

Default रूप से, adjacent table cells हर एक अपनी अलग border draw करते हैं, जिससे उनके बीच एक doubled-up line बनती है। border-collapse: collapse उन्हें एक साफ़ single line में merge कर देता है। empty-cells property सिर्फ तभी मायने रखती है जब border-collapse को separate set किया गया हो (collapse के तहत इसका effect suppressed होता है) -- empty-cells: hide set करना किसी भी बिना content वाली table cell से border और background हटा देता है, जो sparse data grids के लिए उपयोगी है। caption-side आपको किसी table के <caption> element को उसके default position (ऊपर) के बजाय table के नीचे ले जाने देता है।

Note:

border-collapse: collapse लगभग हमेशा वह होता है जो आप एक साफ़, modern-looking table के लिए चाहते हैं।
Accepted values:
border-collapse — collapse | separate (initial value)
border-spacing — separate होने पर cells के बीच length gap
empty-cells — show | hide (सिर्फ separate borders)
text-align — cells में left | center | right
vertical-align — cells में top | middle | bottom
table-layout — auto | fixed
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: border-spacing जैसी कुछ spacing-related properties का कोई असर नहीं होता एक बार जब border-collapse को collapse set कर दिया जाए।

उदाहरण: border-collapse

css

<style>
table {
  border-collapse: collapse;
}
td {
  border: 1px solid black;
}
</style>
<table>
  <tr><td>A</td><td>B</td></tr>
</table>

Table Width

किसी table की width set करना, आमतौर पर 100%, उसे अपने ही content के चारों ओर shrink होने के बजाय अपने container को भरने के लिए stretch करा देता है। table-layout: fixed column-sizing algorithm को बदल देता है ताकि browser पूरे table को तुरंत layout करने के लिए सिर्फ पहली row की widths (या explicit column widths) इस्तेमाल करे, धीमे default auto algorithm के बजाय जो पहले हर cell का content measure करने का इंतज़ार करता है।

Note: किसी table पर width: 100% यह सुनिश्चित करने का एक simple, reliable तरीका है कि वह अपने parent container के अंदर पूरी available space इस्तेमाल करे।

Warning: कई columns और एक fixed width वाला table फिर भी individual cells को cramped महसूस करा सकता है, कभी-कभी एक responsive strategy भी चाहिए होती है।

उदाहरण: Table Width

css

<style>
table {
  width: 100%;
  table-layout: fixed;
  border: 1px solid #ccc;
}
td {
  border: 1px solid #ccc;
  padding: 8px;
}
</style>
<table>
  <tr><td>Stretches to fill its container</td></tr>
</table>

th और td में Padding

Table cells (th और td) को किसी और element की तरह अपनी खुद की padding चाहिए, जो उनके content को cell की अपनी border से दूर breathing room देती है।

Note: table cell content के लिए 8px से 12px के बीच की padding value एक comfortable, common starting point है।

Warning: बिना किसी padding के, table text cell border के बिल्कुल सटा हुआ बैठता है, जो readability और visual polish दोनों को नुकसान पहुँचाता है।

उदाहरण: Padding in th and td

css

<style>
table {
  border-collapse: collapse;
}
th, td {
  padding: 10px;
  border: 1px solid #ccc;
}
</style>
<table>
  <tr><th>Header</th></tr>
  <tr><td>Cell</td></tr>
</table>

Zebra Striping और Hover Effects

Zebra striping :nth-child(even) या :nth-child(odd) selector इस्तेमाल करके table rows के background color को alternate करती है, जिससे wide tables को visually scan करना कहीं ज़्यादा आसान हो जाता है। tr:hover पर एक hover effect उस row को highlight करता है जिसे visitor इस समय पढ़ रहा है।

Note: Zebra stripe colors को subtle रखें, एक बहुत हल्का tint आमतौर पर busy महसूस कराए बिना नज़र guide करने के लिए काफ़ी है।

Warning: एक hover effect जो background के साथ-साथ text color भी बदलता है कभी-कभी contrast को नुकसान पहुँचा सकता है, hover पर भी readability double check करें।

उदाहरण: Zebra Striping and Hover Effects

css

<style>
tr:nth-child(even) {
  background: #f0f0f0;
}
tr:hover {
  background: #ddd;
}
</style>
<table>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
</table>

Responsive Tables

Wide tables छोटे screens पर awkward हो सकते हैं। एक common fix है table को overflow-x: auto वाले किसी container में wrap करना, जिससे visitors बाकी page के layout को तोड़े बिना table को horizontally scroll कर सकें।

Note: सिर्फ table को (पूरे page को नहीं) एक scrollable container में wrap करना बाकी सब कुछ page पर normally laid out रखता है।

Warning: बिना किसी responsive strategy के, एक wide table पूरे page को horizontally scroll करने पर मजबूर कर सकता है, जो mobile पर एक खराब experience है।

उदाहरण: Responsive Tables

css

<style>
.table-wrapper {
  overflow-x: auto;
}
table {
  border-collapse: collapse;
}
td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap;
}
</style>
<div class="table-wrapper">
  <table>
    <tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td><td>Column 6</td><td>Column 7</td><td>Column 8</td></tr>
    <tr><td>Value 1</td><td>Value 2</td><td>Value 3</td><td>Value 4</td><td>Value 5</td><td>Value 6</td><td>Value 7</td><td>Value 8</td></tr>
  </table>
</div>

Live Example

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson CSS Lists Next Lesson → CSS Display