Web Development Table তৈরি করা এবং Table Attributes গাইড ও নোট

HTML5 এ Table তৈরি করে ডাটা এবং তথ্যকে সারি (row) এবং কলামের (column) গঠনে উপস্থাপন করা যায়। এটি ডাটা প্রদর্শনের জন্য খুবই উপযোগী একটি পদ্ধতি, যেমন সময়সূচি, গ্রেড রিপোর্ট, বা প্রোডাক্ট তালিকা। টেবিল তৈরি করার জন্য HTML এর কয়েকটি ট্যাগ এবং অ্যাট্রিবিউট ব্যবহার করা হয়, যা টেবিলকে আরও কার্যকরী এবং স্টাইলিশ করে তোলে। নিচে HTML5 এ টেবিল তৈরির প্রক্রিয়া এবং টেবিলের গুরুত্বপূর্ণ অ্যাট্রিবিউট নিয়ে আলোচনা করা হলো:

HTML5 এ Table তৈরি করা

টেবিলের প্রধান ট্যাগসমূহ:

1. <table>: পুরো টেবিলের কন্টেইনার।
2. <tr> (Table Row): টেবিলের প্রতিটি সারি তৈরি করে।
3. <th> (Table Header): টেবিলের শিরোনাম সেল তৈরি করে, যা সাধারণত বোল্ড এবং কেন্দ্রীভূত থাকে।
4. <td> (Table Data): টেবিলের ডাটা সেল তৈরি করে, যেখানে ডাটা বা তথ্য প্রদর্শিত হয়।
5. <thead>: টেবিলের হেডার অংশে শিরোনাম সেলগুলো রাখে।
6. <tbody>: টেবিলের মূল ডাটা অংশ রাখে।
7. <tfoot>: টেবিলের ফুটার অংশ, যেখানে সারাংশ বা অন্যান্য তথ্য প্রদর্শিত হয়।

উদাহরণ: একটি সাধারণ টেবিল

<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>
    <tfoot>
        <tr>
            <td colspan="3">End of Data</td>
        </tr>
    </tfoot>
</table>

ব্যাখ্যা:

• <table>: পুরো টেবিলের কন্টেইনার।
• <thead>, <tbody>, এবং <tfoot>: টেবিলের হেডার, বডি, এবং ফুটার ভাগ করে, যা টেবিলের গঠনকে পরিষ্কার করে।
• <tr>: প্রতিটি সারি তৈরি করে।
• <th>: হেডার সেল তৈরি করে, যা টেবিলের শিরোনাম নির্দেশ করে।
• <td>: ডাটা সেল তৈরি করে, যেখানে ডাটা বা তথ্য থাকে।
• colspan="3": একটি সেল তিনটি কলাম জুড়ে প্রদর্শিত হবে।

Table Attributes

HTML টেবিল তৈরির জন্য কিছু গুরুত্বপূর্ণ অ্যাট্রিবিউট রয়েছে, যা টেবিলের স্ট্রাকচার, স্টাইলিং এবং কন্টেন্টকে কাস্টমাইজ করতে ব্যবহৃত হয়।

১. border

• বর্ণনা: টেবিলের সেলগুলোর চারপাশে বর্ডার তৈরি করতে ব্যবহৃত হয়। সাধারণত পিক্সেল ভ্যালু (যেমন 1, 2) দিয়ে বর্ডারের প্রস্থ নির্ধারণ করা হয়।
• উদাহরণ:

<table border="1">    <!-- টেবিলের সেলগুলোতে ১ পিক্সেল বর্ডার থাকবে --> </table>

২. cellpadding

• বর্ণনা: প্রতিটি সেলের ভেতরে কন্টেন্ট এবং সেলের বর্ডারের মধ্যে কতটুকু প্যাডিং থাকবে তা নির্ধারণ করে।
• উদাহরণ:

<table border="1" cellpadding="10">    <!-- প্রতিটি সেলের ভেতরে ১০ পিক্সেল প্যাডিং থাকবে --> </table>

৩. cellspacing

• বর্ণনা: টেবিলের সেলগুলোর মধ্যে কতটুকু স্পেস থাকবে তা নির্ধারণ করে। এটি টেবিলের সেলগুলোর মধ্যে গ্যাপ তৈরি করতে ব্যবহৃত হয়।
• উদাহরণ:

<table border="1" cellspacing="5">    <!-- প্রতিটি সেলের মধ্যে ৫ পিক্সেল স্পেস থাকবে --> </table>

৪. colspan

• বর্ণনা: একটি সেল কতটি কলাম জুড়ে প্রদর্শিত হবে তা নির্ধারণ করে। এটি বিশেষত শিরোনাম বা ফুটারে বড় সেল তৈরি করতে ব্যবহৃত হয়।
• উদাহরণ:

<tr> 
	<td colspan="2">This cell spans two columns</td> 
</tr>

৫. rowspan

• বর্ণনা: একটি সেল কতটি সারি জুড়ে প্রদর্শিত হবে তা নির্ধারণ করে। এটি টেবিলের একটি সেলের মধ্যে একাধিক সারি ম্যানেজ করতে সহায়ক।
• উদাহরণ:

<tr>
	<td rowspan="2">This cell spans two rows</td> 
</tr>

৬. align

• বর্ণনা: টেবিলের সেলের ভেতরে টেক্সট বা কন্টেন্টের অ্যালাইনমেন্ট নির্ধারণ করে। এটি left, center, বা right হতে পারে।
• উদাহরণ:

<td align="center">Centered text</td>

৭. width এবং height

• বর্ণনা: টেবিল বা সেলের প্রস্থ এবং উচ্চতা নির্ধারণ করতে ব্যবহৃত হয়। এটি পিক্সেল বা শতাংশ (%) দিয়ে সেট করা যায়।
• উদাহরণ:

<table width="100%" height="200">    <!-- টেবিলটি ১০০% প্রস্থ এবং ২০০ পিক্সেল উচ্চতার হবে --> </table>

CSS ব্যবহার করে টেবিল কাস্টমাইজেশন

HTML টেবিলকে CSS ব্যবহার করে আরও আকর্ষণীয় এবং গঠনমূলকভাবে কাস্টমাইজ করা যায়। নিচে একটি উদাহরণ দেয়া হলো:

<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: টেবিলের সেল বর্ডারগুলোকে একত্রিত করা হয়েছে।
• th এবং td: টেবিলের হেডার এবং ডাটা সেলগুলোর জন্য বর্ডার, প্যাডিং, এবং টেক্সট অ্যালাইনমেন্ট নির্ধারণ করা হয়েছে।
• tr:nth-child(even): প্রতিটি জোড়া সারির জন্য ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা হয়েছে, যা টেবিলকে আরও রিডেবল করে।