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

HTML-এ টেবিল ফুটার (tfoot) তৈরি করা

HTML <tfoot> ট্যাগটি টেবিলে ফুটার যোগ করতে ব্যবহৃত হয়। tfoot ট্যাগ tbody ট্যাগ এবং thead ট্যাগের সাথে মিলে টেবিলের প্রতিটি অংশ (হেডার, ফুটার, বডি) নির্ধারণ করতে ব্যবহৃত হয়।

নিচে অ্যাট্রিবিউটগুলো দেওয়া হলো (প্রায় সকলই অবচিত):

অ্যাট্রিবিউটমানবর্ণনা
alignright, left, center, justify, charDeprecated — ভিজ্যুয়াল এলাইনমেন্ট
charcharacterDeprecated — কোন ক্যারেক্টারের ওপর টেক্সট এলাইন করবে তা নির্দিষ্ট করে। align="char" হলে ব্যবহার করুন
charoffpixels or %Deprecated — char অ্যাট্রিবিউটে নির্দিষ্ট প্রথম ক্যারেক্টারের সাপেক্ষে এলাইনমেন্ট অফসেট (পিক্সেল বা পার্সেন্টেজ) নির্দিষ্ট করে
valigntop, middle, bottom, baselineDeprecated — ভার্টিক্যাল এলাইনমেন্ট

উদাহরণ

নিচের কোডটি চালিয়ে HTML-এ টেবিল ফুটার তৈরি করা যাবে:

<!DOCTYPE html>
<html>
  <head>
    <style>
      table, td {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <table style="width:100%">
      <thead>
        <tr>
          <td colspan="4">This is the head of the table</td>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td colspan="4">This is the footer of the table</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Cell 1</td>
          <td>Cell 2</td>
          <td>Cell 3</td>
          <td>Cell 4</td>
        </tr>
        <tr>
          ...more rows here containing four cells...
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td>Cell 1</td>
          <td>Cell 2</td>
          <td>Cell 3</td>
          <td>Cell 4</td>
        </tr>
        <tr>
          ...more rows here containing four cells...
        </tr>
      </tbody>
    </table>
  </body>
</html>
  1. HTML-এ টেবিল বর্ডার তৈরি করা

  2. HTML-এ টেবিলের হরিজেন্টাল হেডার (Horizontal Header) সেট করা

  3. HTML-এ টেবিল কলাম মার্জ (Merge) করা

  4. HTML-এ টেবিল সেল মার্জ (Merge) করা