CSS में टेबल बॉर्डर को छोटा करना

CSS Border-collapse संपत्ति का उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि

तत्वों ने साझा किया है या अलग सीमाएं हैं। इसमें दो मान हो सकते हैं:अलग और संक्षिप्त।

सिंटैक्स

CSS बॉर्डर-पतन संपत्ति का सिंटैक्स इस प्रकार है -

<!DOCTYPE html>
<html>
<head>
<style>
#cdemo {
   border-collapse: collapse;
}
#sdemo {
   border-collapse: separate;
}
table {
   display: inline-table;
   margin: 30px;
}
th,td {
   border: 3px ridge orange;
}
td {
   border-color: red;
}
caption {
   box-shadow: 0px -5px 4px 3px green;
}
</style>
</head>
<body>
<h2>Employee Records</h2>
<table id="sdemo">
<caption> Employee Details (Separate Border) </caption>
<tr>
<th>Employee</th>
<th>Department</th>
</tr>
<tr>
<td>Tim</td>
<td>Operations</td>
</tr>
<tr>
<td>Nathan</td>
<td>Finance</td>
</tr>
<tr>
<td>John </td>
<td>Marketing</td>
</tr>
</table>
<table id="cdemo">
<caption> Employee Details (Collapse Border) </caption>
<tr>
<th>Employee</th>
<th>Department</th>
</tr>
<tr>
<td>Tim</td>
<td>Operations</td>
</tr>
<tr>
<td>Nathan</td>
<td>Finance</td>
</tr>
<tr>
<td>John </td>
<td>Marketing</td>
</tr>
</table>
</body>
</html>

निम्नलिखित उदाहरण CSS बॉर्डर-पतन को दर्शाते हैं -

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
table {
   border-collapse: separate;
   empty-cells: hide;
   display: inline-table;
   margin: 30px;
}
table+table {
   border-collapse: collapse;
   empty-cells: hide;
}
td {
   border: 3px ridge lightblue;
}
caption {
   box-shadow: 0px -5px 4px 3px grey;
}
</style>
</head>
<body>
<h2>Demo Tables</h2>
<table>
<caption>Demo caption</caption>
<tr>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td></td>
</tr>
</table>
<table>
<caption>Demo caption</caption>
<tr>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td></td>
</tr>
</table>
</body>
</html>

आउटपुट

यह निम्न आउटपुट देता है -

CSS में टेबल बॉर्डर को छोटा करना

CSS का उपयोग करके पृष्ठभूमि छवि सेट करना

छद्म वर्ग और सीएसएस कक्षाएं

कैसे सीएसएस के साथ एक उत्तरदायी तालिका बनाने के लिए?
CSS के साथ एक रिस्पॉन्सिव टेबल बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body{ font-family: 'Segoe UI',

HTML में टेबल कॉलम कैसे मर्ज करें?
HTML में टेबल कॉलम मर्ज करने के लिए टैग में colspan विशेषता का उपयोग करें। इससे सेल को आपस में मर्ज करें। उदाहरण के लिए, यदि आपकी तालिका में 4 पंक्तियाँ और 4 स्तंभ हैं, तो colspan विशेषता के साथ, आप तालिका के 2 या 3 कक्षों को आसानी से मर्ज कर सकते हैं। उदाहरण आप HTML में टेबल कॉलम को मर्ज करने क

HTML में टेबल सेल कैसे मर्ज करें?
HTML में कक्षों को मर्ज करने के लिए, colspan और Rowpan विशेषता का उपयोग करें। रोस्पेन एट्रिब्यूट उन पंक्तियों की संख्या के लिए है, जिनमें एक सेल को फैलाना चाहिए, जबकि कॉल्सपैन एट्रीब्यूट उन कई कॉलमों के लिए होता है, जिन्हें एक सेल में फैलाना चाहिए। दोनों विशेषताएँ टैग के अंदर होंगी। संख्या एक सांख्