CSS ক্যাপশন-সাইড প্রপার্টি টেবিলের ক্যাপশন বক্সটিকে উল্লম্বভাবে অবস্থান করতে ব্যবহার করা হয়। এটি মান হিসাবে উপরে এবং নীচে নিতে পারে। ডিফল্টরূপে, টেবিলের ক্যাপশন শীর্ষে রাখা হয়।
সিনট্যাক্স
CSS তালিকা-শৈলী সম্পত্তির সিনট্যাক্স নিম্নরূপ-
Selector {
caption-side: /*value*/
} উদাহরণ
নিম্নলিখিত উদাহরণগুলি সিএসএস ক্যাপশন-সাইড প্রপার্টি ব্যাখ্যা করে।
<!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> আউটপুট
এটি নিম্নলিখিত আউটপুট দেয় -
