Blog

CSS Tables Kya Hote Hain – What is CSS Tables

CSS Tables Kya Hote Hain ?

CSS tables ek tarika hai webpages par structured data ko represent karne ka. Yeh ek HTML table ke layout ko style karne aur customize karne ke liye use hota hai. CSS ki madad se hum tables ke design ko improve kar sakte hain, jaise ki border, spacing, alignment, aur colors ko modify kar sakte hain.

1. border-collapse

Border-Collapse ek CSS property hai jo table ke borders ko manage karne ke liye use hoti hai. Iska main kaam table ke adjacent borders ko merge ya separate karna hota hai. Agar border-collapse: collapse; set kiya jaye, to table ke sare adjacent borders ek saath merge ho jate hain, jisse ek clean aur compact look milti hai. Wahi border-collapse: separate; use karne par borders alag-alag dikhte hain. Yeh property web designing me tables ko visually appealing banane ke liye kaafi useful hoti hai. Iska sahi istemal responsive aur structured layouts banane me madad karta hai.

Values:

  • collapse – Is value ka use karne se table ke adjacent borders ek sath mil jate hain aur ek single border create hota hai.
  • separate – Iska use karne par table ke har cell ke borders alag-alag dikhenge.
table {
  border-collapse: collapse;
}

Is code ka matlab hai ki table ke borders ek sath mil kar ek single border banayenge.

2. border-spacing

Border-Spacing ek CSS property hai jo HTML tables ke cells ke beech ka distance set karne ke liye use hoti hai. Yeh property sirf tab kaam karti hai jab “border-collapse” ki value “separate” hoti hai. Iska value pixels ya percentage me diya ja sakta hai. Agar ek hi value di jaye to woh rows aur columns dono ke liye apply hoti hai, aur agar do values di jayein to pehli horizontal spacing aur doosri vertical spacing ko define karti hai. Yeh tables ko visually better aur readable banane me madad karta hai, jo ki web design ke liye ek zaroori aspect hai.

Syntax:

table {
  border-spacing: 10px;
}

Iska matlab hai ki har cell ke darmiyan 10 pixels ka gap hoga.

3. caption-side

Caption-side ek CSS property hai jo table ke caption ki position define karti hai. Yeh property batati hai ki caption table ke upar hoga ya neeche. Iski do primary values hoti hain: “top” (jo caption ko table ke upar dikhata hai) aur “bottom” (jo caption ko table ke neeche dikhata hai). Yeh tables ke layout aur readability ko enhance karne ke liye kaafi useful hoti hai. Default value “top” hoti hai, lekin designers apni zaroorat ke mutaabik isse customize kar sakte hain. Yeh property sirf tables ke saath kaam karti hai aur semantic HTML aur CSS styling ke liye kaafi important hai.

Values:

  • top – Caption table ke upar show hoga (default).
  • bottom – Caption table ke neeche show hoga.
caption {
  caption-side: bottom;
}

Is code ka matlab hai ki caption table ke neeche dikhai dega.

4. empty-cells

“empty-cells” ek CSS property hai jo HTML tables me un cells ka display control karti hai jo khali hote hain. Yeh property do values accept karti hai: show aur hide. show default value hoti hai, jisme khali cells table me dikhte hain, jabki hide unhe chhupa deta hai, jisse table zyada clean dikhta hai. Yeh property sirf border-collapse: separate; mode me kaam karti hai, jabki border-collapse: collapse; me iska koi asar nahi hota. Iska use un tables me hota hai jisme khali cells ka visualization customize karna hota hai, taki table ki appearance aur readability better ho sake.

Values:

  • show – Empty cells ka border aur background visible rahega.
  • hide – Empty cells ka border aur background hide ho jayega.
table {
  empty-cells: hide;
}

Iska matlab hai ki agar koi cell khali hai to uska border nahi dikhega.

5. table-layout

table-layout ek CSS property hai jo table ke width calculation ka control karti hai. Yeh define karti hai ki table ki width kaise adjust hogi.

Values:

  • auto – Table ki width content ke size ke hisaab se adjust hogi.
  • fixed – Table ki width CSS me define ki gayi width ke hisaab se set ho jayegi, chahe content bada ho ya chhota.
table {
  table-layout: fixed;
  width: 500px;
}

Iska matlab hai ki table ki total width 500px fix rahegi, chahe content kitna bhi ho.

CSS tables ke properties ka sahi tarike se use karke hum tables ko visually appealing aur structured bana sakte hain. border-collapse, border-spacing, caption-side, empty-cells, aur table-layout jaise properties table ke layout aur styling ko control karne me madad karte hain.

Quiz: Test Your Knowledge on CSS Tables

Bonus: Practical Application!

Aaj hi apne webpage par CSS tables ka istemal karke dekhein!

CSS tables ko sahi tareeke se samajhne ke liye different properties jaise border-collapse, border-spacing, caption-side, empty-cells, aur table-layout ka upayog karein aur apne webpage ke table styling ko aur bhi effective banayein.

Leave a Reply