CSS caption-side प्रॉपर्टी का उपयोग टेबल कैप्शन बॉक्स को लंबवत रूप से पोजिशन करने के लिए किया जाता है। यह top और bottom मान ले सकता है। डिफ़ॉल्ट रूप से, टेबल कैप्शन शीर्ष पर रखा जाता है।
सिंटैक्स
CSS caption-side प्रॉपर्टी का सिंटैक्स निम्नानुसार है:
Selector { caption-side: /*value*/ }
उदाहरण
निम्नलिखित उदाहरण CSS caption-side प्रॉपर्टी को दर्शाते हैं।
<!DOCTYPE html> <html> <head> <style> table * { border: ridge skyblue; padding: 0.5rem; } table { margin: 20px; box-shadow: 0 0 6px 3px indianred; empty-cells: show; } caption { border-top-style: none; caption-side: bottom; border-color: darkkhaki; border-radius: 50%; } </style> </head> <body> <table id="demo"> <caption>Demo</caption> <tr> <th colspan="3">Table</th> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
दूसरा उदाहरण
<!DOCTYPE html> <html> <head> <style> table { margin: auto; border: double black 13px; border-radius: 6px; } td, th { border-left: 1px solid black; border-top: 1px solid black; } th { background-color: lightblue; border-top: none; } td:first-child, th:first-child { border-left: none; } caption { margin-top: 3px; background-color: purple; caption-side: bottom; color: white; border-radius: 20%; } </style> </head> <body> <h2>Demo Table</h2> <table> <caption>Demo</caption> <tr> <th colspan="4">Table</th> </tr> <tr> <td>One...</td> <td>Two...</td> <td>Three</td> <td>Four</td> </tr> <tr> <td>Five</td> <td>Six</td> <td>Seven</td> <td>Eight</td> </tr> </table> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
