HTML টেবিল হেডারস (Table Headers)

পূর্বে পরবর্তী

HTML টেবিলে হেডার (Header) ব্যবহার করা যায় কলাম (column) বা সারি (row) এর জন্য। আবার চাইলে একাধিক কলাম/সারির জন্যও একটি হেডার দেওয়া যায়।

প্রথম নাম	শেষ নাম	বয়স

6:00
8:00
10:00
12:00

	Wed	Thu	Fri
8:00
10:00
12:00

DECEMBER

সাধারণ টেবিল হেডার

টেবিলের হেডার তৈরি করতে <th> ট্যাগ ব্যবহার করা হয়। প্রতিটি <th> একটি হেডার সেল (cell) নির্দেশ করে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
    <style>
    table, th, td {
    border:1px solid black;
  border-collapse: collapse;
    }
    </style>
</head>
<body>
<h2>Table Headers</h2>
<p>টেবিল হেডার সংজ্ঞায়িত করতে TH উপাদান ব্যবহার করুন।</p>

<table style="width:100%">
  <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>Sunrise Global Exports</td>
        <td>Anika Rahman</td>
        <td>Bangladesh</td>
    </tr>
    <tr>
        <td>Oceanic Fresh Foods</td>
        <td> Liam Peterson</td>
        <td>Australia</td>
    </tr>
</table>

</body>
</html>

নিজে চেষ্টা করুন »

উল্লম্ব টেবিল হেডার (Vertical Table Headers)

যদি আপনি চান যে প্রথম কলামটিই হেডার হিসেবে কাজ করুক, তাহলে প্রতিটি সারির প্রথম <td> কে <th> দিয়ে লিখতে হবে।

উদাহরণ:

<!DOCTYPE html>
<html>
<head>
    <style>
    table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    }
    </style>
</head>
<body>

<h2>Vertical Table Headers</h2>

<p>প্রতিটি টেবিল সারির প্রথম টেবিল ঘরটি একটি TH এলিমেন্টে সেট করলে প্রথম কলামটি টেবিল হেডার হয়ে যায়:</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <td>Roshidul</td>
    <td>Ashek</td>
  </tr>
  <tr>
    <th>Lastname</th> 
    <td>Shorker</td>
    <td>Nur Jaman</td>
  </tr>
  <tr>
    <th>Age</th>
    <td>25</td>
    <td>26</td>
  </tr>
</table>

</body>
</html>

নিজে চেষ্টা করুন »

টেবিল হেডার অ্যালাইনমেন্ট (Align Table Headers)

ডিফল্টভাবে <th> লেখা বোল্ড ও সেন্টার করা থাকে। যদি আপনি চান হেডার টেক্সট বাম দিকে সোজা হোক, তাহলে CSS "text-align:left" প্রোপার্টি ব্যবহার করুন

উদাহরণ:

<style>
    th {
     text-align: left;
    }
</style>

নিজে চেষ্টা করুন »

একাধিক কলামের জন্য হেডার (Header for Multiple Columns)

কখনও কখনও একটি হেডার দুই বা তার বেশি কলাম জুড়ে দিতে হয়। এর জন্য <th> এর সাথে colspan ব্যবহার করা হয়।

উদাহরণ:

<table>
<tr>
    <th colspan="2">Name</th>
    <th>Age</th>
</tr>
<tr>
    <td>Roshidul</td>
    <td>Shorker</td>
    <td>25</td>
</tr>
<tr>
    <td>Ashek</td>
    <td>Nur Jaman</td>
    <td>26</td>
</tr>
</table>

নিজে চেষ্টা করুন »

আপনি colspan এবং rowspan সম্পর্কে আরও জানতে পারবেন colspan & rowspan টেবিলের অধ্যায়ে।

টেবিল ক্যাপশন (Table Caption)

যদি আপনি চান টেবিলের উপর একটি শিরোনাম (Title) থাকুক, তাহলে <caption> ট্যাগ ব্যবহার করতে হবে।

উদাহরণ:

<table border="1" style="width:100%">
  <caption>মাসিক সঞ্চয়</caption>
  <tr>
    <th>মাস</th>
    <th>সঞ্চয়</th>
  </tr>
  <tr>
    <td>জানুয়ারি</td>
    <td>1000tk</td>
  </tr>
  <tr>
    <td>ফেব্রুয়ারি</td>
    <td>5000tk</td>
  </tr>
</table>

নিজে চেষ্টা করুন »

নোটঃ table ট্যাগের ঠিক পরে <caption> ট্যাগটি ঢোকানো উচিত।

পূর্বে পরবর্তী

HTML Tutorials

HTML ফর্মস

HTML গ্রাফিকস

HTML Media

HTML Examples

HTML রিফারেন্স

HTML টেবিল হেডারস (Table Headers)

সাধারণ টেবিল হেডার

উদাহরণ

উল্লম্ব টেবিল হেডার (Vertical Table Headers)

উদাহরণ:

টেবিল হেডার অ্যালাইনমেন্ট (Align Table Headers)

উদাহরণ:

একাধিক কলামের জন্য হেডার (Header for Multiple Columns)

উদাহরণ:

টেবিল ক্যাপশন (Table Caption)

উদাহরণ: