Web Development Table Row, Table Data, এবং Table Header ব্যবহার

HTML5 এ Table Row (<tr>), Table Data (<td>), এবং Table Header (<th>) ট্যাগ ব্যবহার করে টেবিল তৈরি করা হয়। এগুলো একত্রে ব্যবহার করে টেবিলের স্ট্রাকচার গঠন করা হয়, যেখানে সারি এবং কলামের মাধ্যমে ডাটা সজ্জিত হয়। নিচে প্রতিটি ট্যাগ এবং তাদের ব্যবহার সম্পর্কে বিস্তারিত আলোচনা করা হলো:

১. Table Row (<tr>)

• বর্ণনা: <tr> ট্যাগ ব্যবহার করে টেবিলের একটি সম্পূর্ণ সারি তৈরি করা হয়। প্রতিটি <tr> ট্যাগের মধ্যে এক বা একাধিক <th> (হেডার) বা <td> (ডাটা) সেল থাকে, যা সারির প্রতিটি কলামে ডাটা রাখে।
• ব্যবহার: প্রতিটি সারি তৈরির জন্য <tr> ব্যবহার করা হয়, যা একটি সেলে একাধিক কলামের ডাটা ধারণ করে।

উদাহরণ:

<tr>
    <td>John Doe</td>
    <td>30</td>
    <td>New York</td>
</tr>

এখানে, একটি সারি তৈরি করা হয়েছে যার মধ্যে তিনটি কলাম রয়েছে: নাম, বয়স, এবং শহর।

২. Table Data (<td>)

• বর্ণনা: <td> ট্যাগ ব্যবহার করে টেবিলের ডাটা সেল তৈরি করা হয়। প্রতিটি <td> একটি কলাম তৈরি করে, যা সারির নির্দিষ্ট কলামে ডাটা প্রদর্শন করে।
• ব্যবহার: <tr> এর মধ্যে <td> ট্যাগ ব্যবহার করে প্রতিটি কলামে ডাটা রাখা হয়।

উদাহরণ:

<tr>
    <td>Jane Smith</td>
    <td>25</td>
    <td>Los Angeles</td>
</tr>

এখানে, একটি সারি তৈরি করা হয়েছে যেখানে তিনটি ডাটা সেল আছে: Jane Smith এর নাম, বয়স ২৫, এবং শহর Los Angeles।

৩. Table Header (<th>)

• বর্ণনা: <th> ট্যাগ ব্যবহার করে টেবিলের শিরোনাম সেল তৈরি করা হয়। এটি সাধারণত টেবিলের প্রথম সারিতে ব্যবহার করা হয় এবং টেবিলের কলামগুলোর শিরোনাম হিসেবে কাজ করে। <th> ট্যাগের ডিফল্ট স্টাইল হলো বোল্ড টেক্সট এবং কেন্দ্রীয়ভাবে সংযুক্ত (centered)।
• ব্যবহার: টেবিলের প্রথম সারিতে কলামের শিরোনাম প্রদর্শনের জন্য <th> ব্যবহার করা হয়।

উদাহরণ:

<tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
</tr>

এখানে, একটি হেডার সারি তৈরি করা হয়েছে যেখানে তিনটি কলামের শিরোনাম রয়েছে: Name, Age, এবং City।

টেবিলের উদাহরণ: সম্পূর্ণ টেবিল তৈরি করা

<table border="1">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>30</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>25</td>
            <td>Los Angeles</td>
        </tr>
    </tbody>
</table>

ব্যাখ্যা:

1. <thead>: টেবিলের হেডার অংশ, যেখানে <tr> ট্যাগের মাধ্যমে একটি সারি তৈরি করা হয়েছে এবং <th> ব্যবহার করে টেবিলের শিরোনাম সেলগুলো (Name, Age, City) নির্ধারণ করা হয়েছে।
2. <tbody>: টেবিলের মূল ডাটা অংশ, যেখানে দুটি <tr> ট্যাগ ব্যবহার করে দুটি সারি তৈরি করা হয়েছে। প্রতিটি সারিতে <td> ট্যাগ ব্যবহার করে ডাটা (John Doe, 30, New York এবং Jane Smith, 25, Los Angeles) প্রদর্শিত হয়েছে।

CSS ব্যবহার করে <th>, <td>, এবং <tr> কাস্টমাইজ করা

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid black;
        padding: 10px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
    tr:nth-child(even) {
        background-color: #f9f9f9;
    }
</style>

<table>
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Availability</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Laptop</td>
            <td>$999</td>
            <td>In Stock</td>
        </tr>
        <tr>
            <td>Smartphone</td>
            <td>$499</td>
            <td>Out of Stock</td>
        </tr>
    </tbody>
</table>

ব্যাখ্যা:

• border-collapse: টেবিলের সেলগুলোর বর্ডার একত্রিত করা হয়েছে।
• padding: প্রতিটি সেলের মধ্যে প্যাডিং যোগ করা হয়েছে।
• text-align: টেক্সট বাম দিকে (left) সেট করা হয়েছে।
• nth-child(even): প্রতিটি জোড়া সারির জন্য ভিন্ন ব্যাকগ্রাউন্ড রঙ সেট করা হয়েছে, যা টেবিলকে আরও রিডেবল করে।

সারসংক্ষেপ

• <tr> ট্যাগ ব্যবহার করে টেবিলের প্রতিটি সারি তৈরি করা হয়।
• <th> ট্যাগ ব্যবহার করে টেবিলের কলামের শিরোনাম বা হেডার তৈরি করা হয়, যা সাধারণত প্রথম সারিতে থাকে।
• <td> ট্যাগ ব্যবহার করে টেবিলের ডাটা সেল তৈরি করা হয়, যেখানে প্রতিটি সারির ডাটা বা তথ্য প্রদর্শিত হয়।