CSS Tables Kya Hote Hain?

Introduction to Styling Tables

HTML tables tabular data ko display karne ke liye hote hain, lekin unki default styling bohot basic hoti hai. CSS humein in tables ko customize karne ki power deta hai, jisse hum unhe apne website ke design ke saath match kar sakte hain. Is guide me hum tables ko style karne ke liye use hone wali mukhya CSS properties ke baare me jaanenge.

1. border-collapse

By default, table cells ke apne alag-alag borders hote hain, jo double lines jaisa look dete hain. border-collapse property in borders ko merge karke ek single, clean border banane me madad karti hai.

table {
  border-collapse: collapse; /* Borders mil jaayenge */
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
}

2. border-spacing

Yeh property tabhi kaam karti hai jab border-collapse: separate; (default) ho. Isse aap table cells ke beech ka horizontal aur vertical space control kar sakte hain.

table {
  border-collapse: separate;
  border-spacing: 10px 5px; /* 10px horizontal, 5px vertical */
}

3. caption-side

<caption> tag table ka title provide karta hai. caption-side property se aap is caption ki position table ke upar (top) ya neeche (bottom) set kar sakte hain.

caption {
  caption-side: bottom;
  margin-top: 10px;
  font-style: italic;
}

4. empty-cells

Yeh property decide karti hai ki khali (empty) cells ke borders aur background dikhne chahiye ya nahi. Yeh bhi `border-collapse: separate;` ke saath kaam karti hai.

table {
  empty-cells: hide; /* Khali cells ka border/bg hide ho jayega */
}

5. table-layout

Yeh property table ke columns ki width ko calculate karne ka algorithm set karti hai.

• auto (default): Column width content ke hisab se adjust hoti hai.
• fixed: Column width table ki overall width ya column ki defined width par depend karti hai. Yeh large tables ke liye behtar performance deta hai.

table {
  width: 100%;
  table-layout: fixed; /* Columns equal width ke honge */
}

Key Takeaways

• Modern table styling ke liye hamesha CSS ka use karein, na ki outdated HTML attributes (like cellpadding, cellspacing).
• border-collapse: collapse; ek clean aur professional look deta hai.
• padding property ka use th aur td par karke cells ke andar space add karein.
• table-layout: fixed; se large tables ki rendering speed improve hoti hai.
• :nth-child(even) selector ka use karke aap "zebra-striped" tables bana sakte hain jo readable hoti hain.