Jassif Team Institution

এইচটিএমএল টেবিল হেডার

এইচটিএমএল টেবিলের প্রতিটি কলাম বা সারির শিরোনাম থাকতে পারে, অথবা একাধিক কলাম/সারির জন্য।

এইচটিএমএল টেবিল হেডার

টেবিল শিরোনাম ম উপাদান দ্বারা সংজ্ঞায়িত করা হয়. প্রতিটি তম উপাদান একটি টেবিল ঘর প্রতিনিধিত্ব করে।

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

উল্লম্ব টেবিল শিরোনাম

প্রথম কলামটিকে টেবিল হেডার হিসেবে ব্যবহার করতে, প্রতিটি সারির প্রথম ঘরটিকে <th> উপাদান হিসেবে সংজ্ঞায়িত করুন:

<table>
  <tr>
    <th>Firstname</th>
    <td>Jill</td>
    <td>Eve</td>
  </tr>
  <tr>
    <th>Lastname</th>
    <td>Smith</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <th>Age</th>
    <td>94</td>
    <td>50</td>
  </tr>
</table>

সারণি হেডার সারিবদ্ধ করা

ডিফল্টরূপে, টেবিল শিরোনাম গাঢ় এবং কেন্দ্রীভূত হয়:

টেবিলের শিরোনাম বাম-সারিবদ্ধ করতে, CSS পাঠ্য-সারিবদ্ধ বৈশিষ্ট্য ব্যবহার করুন:

th {
  text-align: left;
}

একাধিক কলামের জন্য একটি শিরোনাম

আপনার একটি শিরোনাম থাকতে পারে যা দুই বা ততোধিক কলাম বিস্তৃত।

এটি করার জন্য, <th> উপাদানে colspan বৈশিষ্ট্যটি ব্যবহার করুন:

<table>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

টেবিল হেডার

আপনি একটি শিরোনাম যোগ করতে পারেন যা পুরো টেবিলের জন্য একটি শিরোনাম হিসাবে কাজ করে।

একটি টেবিলে একটি ক্যাপশন যোগ করতে, <caption> ট্যাগ ব্যবহার করুন:

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

অনুশীলন করুন