CSS caption-side প্রপার্টি টেবিল ক্যাপশন বক্সকে উল্লম্বভাবে পজিশন করতে ব্যবহৃত হয়। এটি top এবং bottom মান গ্রহণ করতে পারে। ডিফল্টরূপে টেবিল ক্যাপশন উপরে থাকে।
সিনট্যাক্স
CSS caption-side প্রপার্টির সিনট্যাক্স নিম্নরূপ:
Selector { caption-side: /*মান*/ }
উদাহরণ
নিচের উদাহরণগুলো 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>
আউটপুট
এটি নিচের আউটপুট দেয়:
