- Introduction to CSS border-collapse property in Hindi
- Property Values in CSS border-collapse property in Hindi
Introduction to CSS border-collapse property
इस CSS property का उपयोग table cells की border निर्धारित करने के लिए किया जाता है और निर्दिष्ट करता है कि table cells अलग या सामान्य सीमा साझा करती हैं या नहीं।
इस property के दो मुख्य मूल्य हैं जो separate और collapse हैं। जब इसे separate मूल्य पर सेट किया जाता है , तो cells के बीच की दूरी को border-spacing property का उपयोग करके परिभाषित किया जा सकता है । जब border-collapse मूल्य collapse पर सेट होता है , तो border-style property का inset मूल्य groove की तरह व्यवहार करता है , और outset मूल्य ridge की तरह व्यवहार करता है ।
Syntax
border-collapse: separate | collapse | initial | inherit; इस CSS property के मूल्यों को निम्नानुसार परिभाषित किया गया है।
Property Values
separate: यह डिफ़ॉल्ट मान है जो टेबल सेल की सीमा को अलग करता है। इस मान का उपयोग करते हुए, प्रत्येक सेल अपनी सीमा प्रदर्शित करेगा।
collapse: इस मूल्य का उपयोग सीमाओं को एक सीमा में collapse करने के लिए किया जाता है। इसका उपयोग करते हुए, दो adjacent टेबल सेल एक सीमा साझा करेंगे। जब यह मान लागू किया जाता है, तो border-spacing property प्रभावित नहीं होता है।
initial: यह property को उसके डिफ़ॉल्ट मूल्य पर सेट करता है।
inherit: यह property को अपने मूल तत्व से inherit करता है।
अब, कुछ उदाहरणों का उपयोग करके इस CSS property को समझते हैं। पहले उदाहरण में, हम border-collapse property के separate मूल्य का उपयोग कर रहे हैं। दूसरे उदाहरण में, हम border-collapse property के collapse मूल्य का उपयोग कर रहे हैं।
Example – Using separate value
इस मान के साथ, हम border-spacing property का उपयोग adjacent table cells के बीच की दूरी निर्धारित करने के लिए कर सकते हैं ।
<!DOCTYPE html>
<html>
<head>
<title> border-collapse property </title>
<style>
table{
border: 2px solid blue;
text-align: center;
font-size: 20px;
width: 80%;
height: 50%;
}
th{
border: 5px solid red;
background-color: yellow;
}
td{
border: 5px solid violet;
background-color: cyan;
}
#t1 {
border-collapse: separate;
}
</style>
</head>
<body>
<h1> The border-collapse Property </h1>
<h2> border-collapse: separate; </h2>
<table id = "t1">
<tr>
<th> First_Name </th>
<th> Last_Name </th>
<th> Subject </th>
<th> Marks </th>
</tr>
<tr>
<td> James </td>
<td> Gosling </td>
<td> Maths </td>
<td> 92 </td>
</tr>
<tr>
<td> Alan </td>
<td> Rickman </td>
<td> Maths </td>
<td> 89 </td>
</tr>
<tr>
<td> Sam </td>
<td> Mendes </td>
<td> Maths </td>
<td> 82 </td>
</tr>
</table>
</body>
</html> उत्पादन
Example – Using collapse property
border-spacing और border-radius properties को इस मान के साथ उपयोग नहीं किया जा सकता।
<!DOCTYPE html>
<html>
<head>
<title> border-collapse property </title>
<style>
table{
border: 2px solid blue;
text-align: center;
font-size: 20px;
width: 80%;
height: 50%;
}
th{
border: 5px solid red;
background-color: yellow;
}
td{
border: 5px solid violet;
background-color: cyan;
}
#t1{
border-collapse: collapse;
}
</style>
</head>
<body>
<h1> The border-collapse Property </h1>
<h2> border-collapse: collapse; </h2>
<table id = "t1">
<tr>
<th> First_Name </th>
<th> Last_Name </th>
<th> Subject </th>
<th> Marks </th>
</tr>
<tr>
<td> James </td>
<td> Gosling </td>
<td> Maths </td>
<td> 92 </td>
</tr>
<tr>
<td> Alan </td>
<td> Rickman </td>
<td> Maths </td>
<td> 89 </td>
</tr>
<tr>
<td> Sam </td>
<td> Mendes </td>
<td> Maths </td>
<td> 82 </td>
</tr>
</table>
</body>
</html> उत्पादन
The border-collapse Property
border-collapse: collapse;
| First_Name | Last_Name | Subject | Marks |
|---|---|---|---|
| James | Gosling | Maths | 92 |
| Alan | Rickman | Maths | 89 |
| Sam | Mendes | Maths | 82 |
