Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> CSS

CSS में टेबल्स में बॉर्डर जोड़ना


सीएसएस बॉर्डर प्रॉपर्टी का इस्तेमाल किसी तत्व के लिए बॉर्डर को परिभाषित करने के लिए किया जाता है। CSS बॉर्डर प्रॉपर्टी का सिंटैक्स इस प्रकार है-

सिंटैक्स

Selector {
   border: /*value*/
}

उदाहरण

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

<!DOCTYPE html>
<html>
<head>
<style>
table {
   margin: 1em;
   border: 3px double green;
   border-right-style: dashed;
   border-left-width: 17px;
   border-bottom-color: orange;
}
td {
   font-size: 24px;
   border-right-style: dotted;
   border-width: 3px;
   border-right-color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>demo</td>
<td>text</td>
</tr>
<tr>
<td>goes</td>
<td>here</td>
</tr>
</table>
</body>
</html>

आउटपुट

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

CSS में टेबल्स में बॉर्डर जोड़ना

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
table {
   margin: auto;
   caption-side: bottom;
   border: 2px dashed black;
}
td {
   border: 2px solid midnightblue;
   text-align: center;
}
td[colspan] {
   box-shadow: inset 0 0 10px lightblue;
   text-align: center;
}
caption {
   font-size: 16px;
   font-weight: bold;
}
</style>
</head>
<body>
<h2<Ranking</h2>
<table>
<caption>Men's ODI Player Ranking</caption>
<tr>
<th>Player</th>
<th>Rank</th>
</tr>
<tr>
<td>Virat Kohli</td>
<td>1</td>
</tr>
<tr>
<td>Rohit Sharma</td>
<td>2</td>
</tr>
<tr>
<td>Babar Azam</td>
<td>3</td>
</tr>
<tr>
<td>Ross Taylor</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Sept2019</td>
</tr>
</table>
</body>
</html>

आउटपुट

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

CSS में टेबल्स में बॉर्डर जोड़ना


  1. सीएसएस के साथ तुलना तालिका कैसे बनाएं?

    CSS के साथ एक रिस्पॉन्सिव टेबल बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    table {       border-collapse: collapse; &nb

  1. कैसे सीएसएस के साथ एक उत्तरदायी तालिका बनाने के लिए?

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

  1. CSS में स्क्रॉल पर फिक्स्ड हैडर के साथ HTML टेबल्स

    पोस्टियन:स्टिकी और टॉप:0 सेट करके, हम HTML टेबल में स्क्रॉल पर एक फिक्स्ड हेडर बना सकते हैं। उदाहरण निम्नलिखित उदाहरण हमें इस बात का अंदाजा देते हैं कि इसे कैसे लागू किया जाए - <!DOCTYPE html> <html> <head> <style> div {    color: white;    display: flex;