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

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

CSS border प्रॉपर्टी का उपयोग किसी एलिमेंट के लिए बॉर्डर को परिभाषित करने के लिए किया जाता है। CSS border प्रॉपर्टी का सिंटैक्स निम्नानुसार है:

सिंटैक्स

Selector {    border: /*value*/ }

उदाहरण

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

<!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 से तुलना टेबल (कॉम्पेरिजन टेबल) कैसे बनाएं? CSS से तुलना टेबल (कॉम्पेरिजन टेबल) कैसे बनाएं?

    कॉम्पेरिजन टेबल में फीचर कॉलम बाएं, प्लान कॉलम दाएं होते हैं। nth-child(even) से वैकल्पिक पंक्ति रंग, पहले कॉलम लेफ्ट-अलाइन, बाकी सेंटर। रिस्पॉन्सिव नहीं है लेकिन साफ डिज़ाइन। उदाहरण <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=

  1. CSS से रिस्पॉन्सिव टेबल कैसे बनाएं? CSS से रिस्पॉन्सिव टेबल कैसे बनाएं?

    रिस्पॉन्सिव टेबल के लिए टेबल को overflow-x: auto वाले डिव में लपेटें। छोटे स्क्रीन पर क्षैतिज स्क्रॉलबार दिखाई देगा, टेबल संरचना बनी रहती है। ज़ेबरा स्ट्रिपिंग शामिल है। उदाहरण <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1>

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

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