एचटीएमएल टेबल बॉर्डर
HTML तालिकाओं में विभिन्न शैलियों और आकारों की सीमाएँ हो सकती हैं।
बॉर्डर कैसे जोड़ें
जब आप किसी तालिका में बॉर्डर जोड़ते हैं, तो आप प्रत्येक तालिका कक्ष के चारों ओर बॉर्डर भी जोड़ते हैं:
बॉर्डर जोड़ने के लिए , , और
तत्वों border
पर CSS प्रॉपर्टी
का उपयोग करें:table
th
td
उदाहरण
table, th, td
{
border: 1px solid black;
}
संक्षिप्त टेबल बॉर्डर
ऊपर के उदाहरण की तरह डबल बॉर्डर होने से बचने के लिए, CSS border-collapse
प्रॉपर्टी को collapse
.
इससे सीमाएँ एक ही सीमा में ढह जाएँगी:
उदाहरण
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
स्टाइल टेबल बॉर्डर
यदि आप प्रत्येक सेल का पृष्ठभूमि रंग सेट करते हैं, और बॉर्डर को एक सफेद रंग (दस्तावेज़ पृष्ठभूमि के समान) देते हैं, तो आपको एक अदृश्य बॉर्डर का आभास होता है:
उदाहरण
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
गोलमेज बॉर्डर
संपत्ति के साथ border-radius
, सीमाओं को गोल कोने मिलते हैं:
उदाहरण
table, th, td {
border: 1px solid
black;
border-radius: 10px;
}
table
सीएसएस चयनकर्ता से बाहर निकलकर तालिका के चारों ओर सीमा छोड़ें :
उदाहरण
th, td {
border: 1px solid
black;
border-radius: 10px;
}
डॉटेड टेबल बॉर्डर
संपत्ति के साथ border-style
, आप सीमा की उपस्थिति निर्धारित कर सकते हैं।
निम्नलिखित मूल्यों की अनुमति है:
dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden
उदाहरण
th, td {
border-style: dotted;
}
किनारे का रंग
संपत्ति के साथ border-color
, आप सीमा का रंग निर्धारित कर सकते हैं।
उदाहरण
th, td {
border-color: #96D4D4;
}