HTML5 এর লিস্ট এবং টেবিল তৈরি

HTML5 এ লিস্ট এবং টেবিল তৈরি করতে নিচে বিস্তারিত নির্দেশনা এবং উদাহরণ দেয়া হলো। এগুলো ওয়েব পেজে তথ্য প্রদর্শনের একটি গঠনমূলক এবং সংগঠিত উপায় প্রদান করে।

১. HTML5 এ লিস্ট তৈরি

HTML5 এ তিন ধরণের লিস্ট তৈরি করা যায়: Unordered List, Ordered List, এবং Definition List। প্রতিটি লিস্ট কন্টেন্টকে আলাদা আলাদা আকারে প্রদর্শন করতে ব্যবহৃত হয়।

১.১ Unordered List (<ul>)

বর্ণনা: একটি অবিন্যস্ত তালিকা যেখানে প্রতিটি আইটেমের সামনে বুলেট পয়েন্ট থাকে।

কোড উদাহরণ:

<ul>
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
</ul>

ফলাফল: উপরের কোডে একটি Unordered List তৈরি করা হয়েছে, যেখানে প্রতিটি আইটেম (HTML, CSS, JavaScript) <li> ট্যাগের মাধ্যমে প্রদর্শিত হয়েছে। ব্রাউজারে এটি বুলেট পয়েন্ট সহ প্রদর্শিত হবে।

১.২ Ordered List (<ol>)

বর্ণনা: একটি বিন্যস্ত তালিকা যেখানে প্রতিটি আইটেমের সামনে সংখ্যা বা লেটার থাকে।

কোড উদাহরণ:

<ol>
   <li>Open HTML Editor</li>
   <li>Write HTML Code</li>
   <li>Preview the Output</li>
</ol>

ফলাফল: উপরের কোডে একটি Ordered List তৈরি করা হয়েছে, যেখানে প্রতিটি আইটেম ১, ২, ৩ নম্বর দিয়ে প্রদর্শিত হবে। ব্রাউজার এটি ক্রমবিন্যাসিত তালিকা আকারে দেখাবে।

১.৩ Definition List (<dl>)

বর্ণনা: একটি তালিকা যেখানে প্রতিটি আইটেমের একটি নাম (<dt>) এবং তার একটি ব্যাখ্যা বা বর্ণনা (<dd>) থাকে।

কোড উদাহরণ:

<dl>
   <dt>HTML</dt>
   <dd>HyperText Markup Language</dd>
   <dt>CSS</dt>
   <dd>Cascading Style Sheets</dd>
</dl>

ফলাফল: উপরের কোডে একটি Definition List তৈরি করা হয়েছে। প্রতিটি টার্ম (HTML, CSS) এবং তাদের ব্যাখ্যা (HyperText Markup Language, Cascading Style Sheets) একটি জোড়া হিসেবে প্রদর্শিত হবে।

২. HTML5 এ টেবিল তৈরি

HTML5 এ টেবিল ব্যবহার করে ডাটা এবং তথ্য সারি (row) ও কলাম (column) আকারে গঠন করে উপস্থাপন করা যায়। টেবিল তৈরি করার জন্য কিছু প্রধান ট্যাগ প্রয়োজন হয়: <table>, <tr>, <th>, এবং <td>।

২.১ টেবিলের সাধারণ গঠন

<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>

টেবিলের ট্যাগের ব্যাখ্যা

• <table>: পুরো টেবিলের কন্টেইনার, যা টেবিলের সমস্ত অংশ ধারণ করে।
• <thead>: টেবিলের হেডার অংশ, যেখানে কলামের শিরোনামগুলো রাখা হয়।
• <tr>: প্রতিটি সারি তৈরি করে। এটি টেবিল হেডার এবং ডাটা উভয়ের জন্য ব্যবহার করা হয়।
• <th>: হেডার সেল তৈরি করে, যা সাধারণত বোল্ড এবং কেন্দ্রীভূত থাকে।
• <td>: টেবিলের ডাটা সেল তৈরি করে, যেখানে ডাটা বা তথ্য প্রদর্শিত হয়।
• <tbody>: টেবিলের বডি অংশ, যেখানে ডাটা বা তথ্য রাখা হয়।

টেবিলের CSS স্টাইলিং

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

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
</style>

<table>
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Stock</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Laptop</td>
            <td>$999</td>
            <td>Available</td>
        </tr>
        <tr>
            <td>Smartphone</td>
            <td>$699</td>
            <td>Out of Stock</td>
        </tr>
    </tbody>
</table>

ব্যাখ্যা

• table CSS: টেবিলের প্রস্থ ১০০% করা হয়েছে এবং border-collapse ব্যবহার করে বর্ডারগুলোকে একত্রিত করা হয়েছে।
• th এবং td CSS: টেবিলের হেডার এবং ডাটা সেলগুলোর জন্য বর্ডার, প্যাডিং এবং টেক্সট অ্যালাইনমেন্ট নির্ধারণ করা হয়েছে।
• th CSS: হেডার সেলগুলোর জন্য একটি ব্যাকগ্রাউন্ড রঙ নির্ধারণ করা হয়েছে।

ফলাফল

উপরের টেবিলে পণ্য (Product), দাম (Price), এবং স্টক (Stock) সম্পর্কিত তথ্য সুন্দরভাবে সারি ও কলামে উপস্থাপিত হয়েছে। CSS এর মাধ্যমে টেবিলটি আরও আকর্ষণীয় এবং পাঠযোগ্য হয়েছে।

HTML5 এ Unordered List (<ul>) এবং Ordered List (<ol>) হলো দুটি লিস্ট ফরম্যাট, যা ওয়েব পেজে তথ্য বা কন্টেন্ট প্রদর্শনের জন্য ব্যবহৃত হয়। এগুলো আইটেমগুলোর একটি তালিকা গঠন করে, যেখানে আইটেমগুলোর মধ্যে পার্থক্য রয়েছে কিভাবে সেগুলো প্রদর্শিত হয়। নিচে <ul> এবং <ol> সম্পর্কে বিস্তারিত আলোচনা করা হলো:

১. Unordered List (<ul>)

বর্ণনা

• <ul> ট্যাগ ব্যবহার করে একটি অবিন্যস্ত তালিকা তৈরি করা হয়, যেখানে প্রতিটি আইটেমের সামনে একটি বুলেট পয়েন্ট (•) থাকে। এটি ক্রমহীন তালিকা প্রদর্শন করতে ব্যবহৃত হয়।
• আইটেম ট্যাগ: <ul> এর প্রতিটি আইটেম <li> (List Item) ট্যাগ ব্যবহার করে প্রদর্শিত হয়।
• ব্যবহার: এমন তথ্য বা কন্টেন্ট প্রদর্শন করতে ব্যবহৃত হয়, যেখানে আইটেমগুলোর ক্রম (অর্ডার) গুরুত্বপূর্ণ নয়। উদাহরণস্বরূপ, প্রোডাক্টের তালিকা, ফিচার লিস্ট, বা উপকরণের তালিকা।

উদাহরণ

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

ফলাফল: উপরের উদাহরণে, একটি Unordered List তৈরি করা হয়েছে, যেখানে HTML, CSS, এবং JavaScript আইটেমগুলো বুলেট পয়েন্ট সহ প্রদর্শিত হবে।

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

<style>
    ul {
        list-style-type: square; /* Default bullet পরিবর্তন করে স্কোয়ার করা হয়েছে */
    }
</style>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

ব্যাখ্যা:

• list-style-type: CSS প্রপার্টি ব্যবহার করে বুলেটের ধরন পরিবর্তন করা হয়েছে। এখানে, ডিফল্ট বুলেট (•) পরিবর্তন করে স্কোয়ার (■) করা হয়েছে।

২. Ordered List (<ol>)

বর্ণনা

• <ol> ট্যাগ ব্যবহার করে একটি বিন্যস্ত তালিকা তৈরি করা হয়, যেখানে প্রতিটি আইটেমের সামনে সংখ্যা (১, ২, ৩) অথবা অক্ষর (A, B, C) থাকে। এটি ক্রমবিন্যাসিত তালিকা প্রদর্শন করতে ব্যবহৃত হয়।
• আইটেম ট্যাগ: <ol> এর প্রতিটি আইটেম <li> (List Item) ট্যাগ ব্যবহার করে প্রদর্শিত হয়।
• ব্যবহার: এমন তথ্য বা কন্টেন্ট প্রদর্শন করতে ব্যবহৃত হয়, যেখানে আইটেমগুলোর ক্রম (অর্ডার) গুরুত্বপূর্ণ। উদাহরণস্বরূপ, স্টেপ-বাই-স্টেপ নির্দেশিকা, রান্নার রেসিপি, বা কাজের তালিকা।

উদাহরণ

<ol>
    <li>Install an HTML Editor</li>
    <li>Write HTML Code</li>
    <li>Preview the HTML Page</li>
</ol>

ফলাফল: উপরের উদাহরণে, একটি Ordered List তৈরি করা হয়েছে, যেখানে আইটেমগুলো (Install an HTML Editor, Write HTML Code, Preview the HTML Page) ১, ২, ৩ নম্বর সহ প্রদর্শিত হবে।

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

<style>
    ol {
        list-style-type: upper-roman; /* সংখ্যার পরিবর্তে রোমান নম্বর ব্যবহার করা হয়েছে */
    }
</style>

<ol>
    <li>Introduction</li>
    <li>Body</li>
    <li>Conclusion</li>
</ol>

ব্যাখ্যা:

• list-style-type: CSS প্রপার্টি ব্যবহার করে লিস্টের নম্বর স্টাইল পরিবর্তন করা হয়েছে। এখানে, ডিফল্ট নম্বর (১, ২, ৩) পরিবর্তন করে রোমান নম্বর (I, II, III) করা হয়েছে।

Unordered List এবং Ordered List এর পার্থক্য

HTML5 এ Nested Lists হলো এমন তালিকা যেখানে একটি লিস্টের ভেতরে অন্য একটি লিস্ট থাকে। Nested Lists তৈরি করতে আমরা Unordered List (<ul>) এবং Ordered List (<ol>) একসাথে বা পৃথকভাবে ব্যবহার করতে পারি। এটি ডাটা বা আইটেমকে আরও বিস্তারিত এবং গঠনমূলকভাবে উপস্থাপন করতে সহায়ক।

Nested Lists এর উদাহরণ

উদাহরণ ১: Nested Unordered List

<ul>
    <li>Frontend Development
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Backend Development
        <ul>
            <li>Node.js</li>
            <li>Python</li>
            <li>PHP</li>
        </ul>
    </li>
</ul>

ব্যাখ্যা:

• উপরের উদাহরণে একটি প্রধান Unordered List (<ul>) তৈরি করা হয়েছে, যার দুটি প্রধান আইটেম: Frontend Development এবং Backend Development।
• প্রতিটি প্রধান আইটেমের মধ্যে আরেকটি Unordered List রয়েছে, যেখানে Frontend Development এর মধ্যে HTML, CSS, এবং JavaScript উল্লেখ করা হয়েছে এবং Backend Development এর মধ্যে Node.js, Python, এবং PHP উল্লেখ করা হয়েছে।

উদাহরণ ২: Nested Ordered List

<ol>
    <li>Preparation
        <ol>
            <li>Gather Ingredients</li>
            <li>Preheat Oven</li>
        </ol>
    </li>
    <li>Cooking
        <ol>
            <li>Mix Ingredients</li>
            <li>Bake for 20 minutes</li>
        </ol>
    </li>
    <li>Serving
        <ol>
            <li>Let it cool</li>
            <li>Cut into slices</li>
        </ol>
    </li>
</ol>

ব্যাখ্যা:

• এখানে একটি Ordered List (<ol>) তৈরি করা হয়েছে, যেখানে তিনটি প্রধান ধাপ রয়েছে: Preparation, Cooking, এবং Serving।
• প্রতিটি প্রধান ধাপের অধীনে একটি Nested Ordered List রয়েছে, যা সেই ধাপের বিস্তারিত নির্দেশনা দেয়।

উদাহরণ ৩: Mixed Nested List (Unordered এবং Ordered একত্রে)

<ul>
    <li>Programming Languages
        <ol>
            <li>Python</li>
            <li>JavaScript</li>
        </ol>
    </li>
    <li>Frameworks
        <ul>
            <li>Frontend
                <ul>
                    <li>React</li>
                    <li>Angular</li>
                </ul>
            </li>
            <li>Backend
                <ul>
                    <li>Express</li>
                    <li>Django</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

ব্যাখ্যা:

• উপরের উদাহরণে, Unordered এবং Ordered List মিশ্রিত করে একটি Nested List তৈরি করা হয়েছে।
• Programming Languages এর অধীনে একটি Ordered List ব্যবহার করা হয়েছে, এবং Frameworks এর অধীনে আরও দুটি Nested Unordered List ব্যবহার করা হয়েছে, যেখানে Frontend এবং Backend এর ফ্রেমওয়ার্কগুলো উল্লেখ করা হয়েছে।

Nested Lists এর সঠিক ব্যবহার

• গঠনমূলক তথ্য প্রদর্শন: Nested Lists ব্যবহার করে তথ্য বা আইটেমগুলোকে গঠনমূলকভাবে বিভক্ত করা যায়, যাতে প্রতিটি স্তর একটি নির্দিষ্ট তথ্যের গ্রুপকে উপস্থাপন করে।
• বিভিন্ন লিস্ট টাইপ মিশ্রণ: Unordered এবং Ordered List একত্রে ব্যবহার করে Nested Lists তৈরি করা যায়, যা তথ্যের ভিন্ন স্তর বা ক্রম নির্দেশ করতে সহায়ক।
• CSS দিয়ে কাস্টমাইজেশন: CSS ব্যবহার করে Nested Lists এর স্টাইল, বুলেট টাইপ, মার্জিন, প্যাডিং ইত্যাদি কাস্টমাইজ করা যায়, যাতে Nested Lists দেখতে আরও আকর্ষণীয় হয়।

CSS দিয়ে Nested List কাস্টমাইজেশন

<style>
    ul, ol {
        margin: 10px;
        padding-left: 20px;
    }
    ul ul {
        list-style-type: circle; /* দ্বিতীয় লেভেলের জন্য গোলাকার বুলেট */
    }
    ol ol {
        list-style-type: lower-alpha; /* দ্বিতীয় লেভেলের জন্য ছোট অক্ষর */
    }
</style>

<ul>
    <li>Frontend Development
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Backend Development
        <ol>
            <li>Node.js</li>
            <li>Python</li>
            <li>PHP</li>
        </ol>
    </li>
</ul>

ব্যাখ্যা:

• CSS এর মাধ্যমে <ul> এবং <ol> এর মার্জিন এবং প্যাডিং কাস্টমাইজ করা হয়েছে।
• Nested Unordered List (<ul>) এর জন্য বুলেট টাইপ পরিবর্তন করে circle করা হয়েছে, এবং Nested Ordered List (<ol>) এর জন্য lower-alpha স্টাইল (a, b, c) ব্যবহার করা হয়েছে।

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): প্রতিটি জোড়া সারির জন্য ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা হয়েছে, যা টেবিলকে আরও রিডেবল করে।

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> ট্যাগ ব্যবহার করে টেবিলের ডাটা সেল তৈরি করা হয়, যেখানে প্রতিটি সারির ডাটা বা তথ্য প্রদর্শিত হয়।