কম্পিউটার টিউটোরিয়াল

CSS-এ টেবিল ক্যাপশন (caption) এর অবস্থান নিয়ন্ত্রণ করা

CSS caption-side property ব্যবহার করে টেবিল ক্যাপশনের অবস্থান নিয়ন্ত্রণ করা যায়।

উদাহরণ

নিচের কোডটি রান করে caption-side property-র ব্যবহার শিখুন:

<html>
  <head>
    <style>
      caption.top {
        caption-side: top;
      }
      caption.bottom {
        caption-side: bottom;
      }
    </style>
  </head>
  <body>
    <table style="width:500px; border:3px solid gray;">
      <caption class="top">
        Countries (Top Caption) </caption>
      <tr><td>India</td></tr>
      <tr><td>UK</td></tr>
      <tr><td>US</td></tr>
      <tr><td>Australia</td></tr>
    </table>
    <br />
    <table style="width:500px; border:3px solid blue;">
      <caption class="bottom">
        Countries (Bottom caption) </caption>
      <tr><td>India</td></tr>
      <tr><td>UK</td></tr>
      <tr><td>US</td></tr>
      <tr><td>Australia</td></tr>
    </table>
    <br />
  </body>
</html>

মান: top (ডিফল্ট), bottom। CSS2-এ left, rightও ছিল, কিন্তু CSS2.1-এ সরিয়ে দেওয়া হয়েছে।

  1. CSS দিয়ে ইমেজের হাইট সেট করা

  2. CSS দিয়ে একটি বক্সের প্রস্থ সেট করা

  3. CSS ব্যবহার করে টেবিল ক্যাপশনের পজিশন নিয়ন্ত্রণ

  4. HTML-এ ক্যাপশন (Caption) সহ টেবিল তৈরি করা