লিস্টস এবং টেবিলস

XHTML-এ লিস্টস (তালিকা) এবং টেবিলস (তথ্য টেবিল) তৈরি করার জন্য HTML-এর মতোই ট্যাগ ব্যবহৃত হয়, তবে এখানে কিছু বিশেষ নিয়ম এবং গঠন অনুসরণ করতে হয় যেগুলি XML-এর কঠোর নিয়মগুলির সঙ্গে সামঞ্জস্যপূর্ণ। এই ট্যাগগুলির ব্যবহারে সঠিকতা এবং গঠন বজায় রাখা অত্যন্ত গুরুত্বপূর্ণ, যেমন সব ট্যাগ সঠিকভাবে বন্ধ করা, অ্যাট্রিবিউটগুলির মান কোটেশনে রাখা, এবং কেস সেনসিটিভিটি রক্ষা করা।

১. লিস্টস (Lists) তৈরি করা

XHTML-এ দুটি প্রধান ধরনের লিস্ট ব্যবহৃত হয়:

১.১ অর্ডারবিহীন তালিকা (Unordered List)

অর্ডারবিহীন তালিকা বা unordered list সাধারণত বুলেট পয়েন্টে আইটেমগুলো প্রদর্শন করতে ব্যবহৃত হয়। এর জন্য <ul> (unordered list) ট্যাগ এবং প্রতিটি আইটেমের জন্য <li> (list item) ট্যাগ ব্যবহার করা হয়।

উদাহরণ:

<ul>
    <li>প্রথম আইটেম</li>
    <li>দ্বিতীয় আইটেম</li>
    <li>তৃতীয় আইটেম</li>
</ul>

এখানে, <ul> ট্যাগ ব্যবহার করে একটি অর্ডারবিহীন তালিকা তৈরি করা হয়েছে এবং <li> ট্যাগের মাধ্যমে তালিকার প্রতিটি আইটেম উল্লেখ করা হয়েছে।

১.২ অর্ডার করা তালিকা (Ordered List)

অর্ডার করা তালিকা বা ordered list আইটেমগুলিকে সিকোয়েন্সে (সংখ্যা বা অক্ষরের মাধ্যমে) দেখানোর জন্য ব্যবহৃত হয়। এর জন্য <ol> (ordered list) ট্যাগ এবং <li> (list item) ট্যাগ ব্যবহার করা হয়।

উদাহরণ:

<ol>
    <li>প্রথম পদক্ষেপ</li>
    <li>দ্বিতীয় পদক্ষেপ</li>
    <li>তৃতীয় পদক্ষেপ</li>
</ol>

এখানে, <ol> ট্যাগটি তালিকাটিকে সঠিকভাবে সিকোয়েন্স (সংখ্যা) দিয়ে প্রদর্শন করবে।

১.৩ নেস্টেড তালিকা (Nested Lists)

একটি তালিকার মধ্যে অন্য একটি তালিকা রাখাকেই নেস্টেড তালিকা বলা হয়। XHTML-এ নেস্টেড তালিকা তৈরি করতে হলে, একটি <li> আইটেমের মধ্যে আরেকটি <ul> বা <ol> তালিকা তৈরি করা হয়।

উদাহরণ:

<ul>
    <li>প্রথম আইটেম
        <ul>
            <li>সাব আইটেম 1</li>
            <li>সাব আইটেম 2</li>
        </ul>
    </li>
    <li>দ্বিতীয় আইটেম</li>
</ul>

এখানে, প্রথম আইটেমের মধ্যে একটি সাব-তালিকা রয়েছে, যা <ul> ট্যাগ ব্যবহার করে তৈরি করা হয়েছে।

২. টেবিলস (Tables) তৈরি করা

XHTML-এ টেবিল তৈরি করতে কিছু নির্দিষ্ট ট্যাগ ব্যবহার করতে হয়, যেমন <table>, <tr>, <td>, এবং <th>। প্রতিটি ট্যাগের সঠিক ব্যবহার নিশ্চিত করতে হবে।

২.১ মৌলিক টেবিল (Basic Table)

একটি মৌলিক টেবিল তৈরি করতে <table> ট্যাগের মধ্যে <tr> (table row), <td> (table data), এবং <th> (table header) ট্যাগ ব্যবহার করতে হয়। টেবিলের প্রথম সারি সাধারণত শিরোনাম (header) হিসেবে ব্যবহৃত হয়, আর পরবর্তী সারিগুলোতে তথ্য প্রদর্শন করা হয়।

উদাহরণ:

<table border="1">
    <tr>
        <th>নাম</th>
        <th>বয়স</th>
        <th>পেশা</th>
    </tr>
    <tr>
        <td>রাহুল</td>
        <td>২৫</td>
        <td>ইঞ্জিনিয়ার</td>
    </tr>
    <tr>
        <td>স্মিতা</td>
        <td>৩০</td>
        <td>ডিজাইনার</td>
    </tr>
</table>

এখানে, <table> ট্যাগটি টেবিলের জন্য ব্যবহার করা হয়েছে, <tr> ট্যাগটি টেবিলের একটি সারি তৈরি করে, <th> ট্যাগটি টেবিলের শিরোনাম (header) হিসেবে কাজ করে এবং <td> ট্যাগটি টেবিলের তথ্যের জন্য ব্যবহৃত হয়েছে।

২.২ টেবিলের জন্য অ্যাট্রিবিউটস

• border: টেবিলের সীমানা নির্ধারণ করতে ব্যবহৃত হয়।
• cellspacing: সেলের মধ্যে ফাঁকা জায়গা নির্ধারণ করে।
• cellpadding: সেল এর ভিতরের প্যাডিং নিয়ন্ত্রণ করে।
• width: টেবিল বা সেলের প্রস্থ নির্ধারণ করে।

উদাহরণ:

<table border="1" cellspacing="5" cellpadding="10" width="50%">
    <tr>
        <th>নাম</th>
        <th>বয়স</th>
    </tr>
    <tr>
        <td>রাহুল</td>
        <td>২৫</td>
    </tr>
    <tr>
        <td>স্মিতা</td>
        <td>৩০</td>
    </tr>
</table>

এখানে, টেবিলের সীমানা, সেলের মধ্যে ফাঁকা জায়গা, প্যাডিং, এবং প্রস্থ নির্ধারণ করা হয়েছে।

২.৩ নেস্টেড টেবিল (Nested Tables)

একটি টেবিলের মধ্যে আরেকটি টেবিল তৈরি করাকে নেস্টেড টেবিল বলা হয়। XHTML-এ এটি সঠিকভাবে করতে হলে, একটি টেবিলের সেলে আরেকটি <table> ট্যাগ ব্যবহার করা হয়।

উদাহরণ:

<table border="1">
    <tr>
        <th>নাম</th>
        <th>বয়স</th>
    </tr>
    <tr>
        <td>রাহুল</td>
        <td>
            <table border="1">
                <tr>
                    <td>পেশা</td>
                    <td>ইঞ্জিনিয়ার</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

এখানে, টেবিলের মধ্যে আরেকটি টেবিল অন্তর্ভুক্ত করা হয়েছে। এই ধরনের নেস্টেড টেবিল ব্যবহার করতে হলে সব সঠিকভাবে নেস্টিং করতে হবে।

৩. XHTML টেবিলের জন্য কিছু বিশেষ নিয়মাবলী

৩.১ সব ট্যাগ বন্ধ করা

XHTML-এ, টেবিলের সমস্ত ট্যাগ সঠিকভাবে বন্ধ করতে হবে। যেমন, <tr>, <th>, <td> ট্যাগগুলোর সঠিকভাবে বন্ধ করা উচিত।

<tr>
    <td>রাহুল</td>
</tr>

৩.২ কেস সেনসিটিভিটি

XHTML একটি কেস সেনসিটিভ ভাষা, তাই সব ট্যাগ ছোট হাতের অক্ষরে লেখা উচিত। উদাহরণস্বরূপ, <td> এবং <th> সঠিক, কিন্তু <TD> ভুল হবে।

৩.৩ অ্যাট্রিবিউট ভ্যালু কোটেশনে রাখতে হবে

টেবিল বা তালিকায় ব্যবহৃত অ্যাট্রিবিউট মান কোটেশনে থাকতে হবে। যেমন:

<table border="1">
    <tr>
        <td>নাম</td>
    </tr>
</table>

XHTML-এ লিস্ট এবং টেবিল তৈরি করা HTML-এর মতো হলেও এখানে কিছু বিশেষ নিয়ম অনুসরণ করতে হয়। সব ট্যাগকে সঠিকভাবে বন্ধ করতে হবে, কেস সেনসিটিভিটি বজায় রাখতে হবে, এবং অ্যাট্রিবিউট মান কোটেশনে রাখতে হবে। লিস্টের জন্য <ul>, <ol>, এবং <li> ট্যাগ ব্যবহার করা হয়, আর টেবিলের জন্য <table>, <tr>, <th>, এবং <td> ট্যাগ ব্যবহার করা হয়। এসব নিয়ম মেনে চললে আপনি একটি বৈধ এবং সুসংগঠিত XHTML ডকুমেন্ট তৈরি করতে পারবেন।

এক্সএইচটিএমএল (XHTML)-এ লিস্ট তৈরির জন্য <ol>, <ul>, এবং <li> ট্যাগগুলো ব্যবহৃত হয়। এই ট্যাগগুলো দিয়ে আপনি সাজানো বা সাজানো না থাকা তালিকা তৈরি করতে পারেন। তালিকা একেবারে সাধারণ HTML-এ যেমন থাকে, তেমনই XHTML-এও একইভাবে ব্যবহার করা হয়, তবে XHTML-এ এগুলোর সঠিকভাবে বন্ধন এবং কেস সেনসিটিভ ব্যবহার করতে হবে।

১. অর্ডারড লিস্ট ()

অর্ডারড লিস্ট (Ordered List) হলো একটি তালিকা যেখানে আইটেমগুলো একটি নির্দিষ্ট ক্রমে (সিকোয়েন্স) দেখানো হয়। এই লিস্টে সাধারণত প্রতিটি আইটেম একটি নম্বর বা সংখ্যা দ্বারা চিহ্নিত থাকে। এটি <ol> ট্যাগ দ্বারা শুরু হয় এবং <li> (List Item) ট্যাগের মধ্যে প্রতিটি আইটেম লেখা হয়।

১.1 অর্ডারড লিস্টের গঠন

<ol>
    <li>প্রথম আইটেম</li>
    <li>দ্বিতীয় আইটেম</li>
    <li>তৃতীয় আইটেম</li>
</ol>

এখানে:

• <ol> ট্যাগ তালিকাটির শুরু নির্দেশ করে।
• <li> ট্যাগ ব্যবহার করে প্রতিটি তালিকা আইটেম নির্ধারণ করা হয়।

১.2 অর্ডারড লিস্টের নম্বরিং পরিবর্তন

আপনি চাইলে <ol> ট্যাগে type অ্যাট্রিবিউট ব্যবহার করে নম্বরিংয়ের ধরন পরিবর্তন করতে পারেন। বিভিন্ন type মান ব্যবহার করা যায়, যেমন:

• type="1": সাধারণ সংখ্যা (1, 2, 3, ...)
• type="A": বড় হাতের অক্ষর (A, B, C, ...)
• type="a": ছোট হাতের অক্ষর (a, b, c, ...)
• type="I": বড় রোমান সংখ্যা (I, II, III, ...)
• type="i": ছোট রোমান সংখ্যা (i, ii, iii, ...)

উদাহরণ:

<ol type="A">
    <li>প্রথম আইটেম</li>
    <li>দ্বিতীয় আইটেম</li>
    <li>তৃতীয় আইটেম</li>
</ol>

এই কোডটি আইটেমগুলিকে বড় হাতের অক্ষরে (A, B, C) নম্বরিত করবে।

২. আনঅর্ডারড লিস্ট ()

আনঅর্ডারড লিস্ট (Unordered List) হলো একটি তালিকা যেখানে আইটেমগুলো নির্দিষ্ট ক্রমে সাজানো থাকে না এবং সাধারণত প্রতিটি আইটেম একটি বুলেট পয়েন্ট (•) দিয়ে চিহ্নিত থাকে। এটি <ul> ট্যাগ দ্বারা শুরু হয় এবং প্রতিটি আইটেম <li> ট্যাগের মধ্যে লেখা হয়।

২.1 আনঅর্ডারড লিস্টের গঠন

<ul>
    <li>প্রথম আইটেম</li>
    <li>দ্বিতীয় আইটেম</li>
    <li>তৃতীয় আইটেম</li>
</ul>

এখানে:

• <ul> ট্যাগ আনঅর্ডারড লিস্টের সূচনা নির্দেশ করে।
• <li> ট্যাগ ব্যবহার করে প্রতিটি আইটেম নির্ধারণ করা হয়।

৩. নেস্টেড লিস্ট (Nested Lists)

এক্সএইচটিএমএল (XHTML)-এ আপনি লিস্টের মধ্যে আরেকটি লিস্ট যুক্ত করতে পারেন, অর্থাৎ নেস্টেড লিস্ট তৈরি করতে পারেন। এটি বিভিন্ন সাব-আইটেম বা সেকশনের জন্য ব্যবহৃত হয়। একটি লিস্টের মধ্যে অন্য একটি লিস্ট <ul> বা <ol> ট্যাগে নেস্ট করা যায়।

৩.1 নেস্টেড অর্ডারড লিস্ট (Ordered Nested List)

<ol>
    <li>প্রথম আইটেম
        <ol>
            <li>সাব আইটেম ১</li>
            <li>সাব আইটেম ২</li>
        </ol>
    </li>
    <li>দ্বিতীয় আইটেম</li>
</ol>

এখানে প্রথম আইটেমের মধ্যে একটি নেস্টেড অর্ডারড লিস্ট রয়েছে, যা সাব আইটেম হিসেবে প্রদর্শিত হবে।

৩.2 নেস্টেড আনঅর্ডারড লিস্ট (Unordered Nested List)

<ul>
    <li>প্রথম আইটেম
        <ul>
            <li>সাব আইটেম ১</li>
            <li>সাব আইটেম ২</li>
        </ul>
    </li>
    <li>দ্বিতীয় আইটেম</li>
</ul>

এখানে প্রথম আইটেমের মধ্যে একটি নেস্টেড আনঅর্ডারড লিস্ট রয়েছে, যা বুলেট পয়েন্ট দিয়ে প্রদর্শিত হবে।

৪. লিস্টের স্টাইল এবং কাস্টমাইজেশন

এক্সএইচটিএমএল ডকুমেন্টে লিস্টের স্টাইল কাস্টমাইজ করতে CSS ব্যবহার করা যায়। CSS-এর মাধ্যমে আপনি লিস্টের বুলেট, নম্বরিং, মার্জিন, প্যাডিং ইত্যাদি নিয়ন্ত্রণ করতে পারেন।

উদাহরণ: CSS দিয়ে লিস্ট স্টাইল কাস্টমাইজ

<style type="text/css">
    ul {
        list-style-type: square;
        margin-left: 20px;
    }
    ol {
        list-style-type: upper-alpha;
    }
</style>

এই কোডের মাধ্যমে:

• আনঅর্ডারড লিস্টের আইটেমগুলো স্কোয়ার বুলেট দিয়ে প্রদর্শিত হবে।
• অর্ডারড লিস্টে আইটেমগুলো বড় হাতের অক্ষর (A, B, C, ...) দিয়ে নম্বরিত হবে।

এক্সএইচটিএমএল (XHTML)-এ <ol>, <ul>, এবং <li> ট্যাগগুলো লিস্ট তৈরি করতে ব্যবহৃত হয়। আপনি অর্ডারড (সংখ্যাযুক্ত) বা আনঅর্ডারড (বুলেট পয়েন্ট) লিস্ট তৈরি করতে পারেন এবং সেগুলোকে নেস্টেড (ভিতরে অন্য লিস্ট থাকা) করা যায়। লিস্টের স্টাইল এবং কাস্টমাইজেশন CSS-এর মাধ্যমে সম্পন্ন করা যায়। XHTML ডকুমেন্টে সঠিকভাবে ট্যাগ বন্ধন এবং কেস সেনসিটিভ ব্যবহার নিশ্চিত করতে হবে, যা এক্সএইচটিএমএল এর নিয়ম অনুযায়ী ব্রাউজার এবং সার্ভারকে সঠিকভাবে ডকুমেন্টটি রেন্ডার করতে সাহায্য করে।

এক্সএইচটিএমএল (XHTML) ডকুমেন্টে ডেফিনিশন লিস্ট (Definition List) একটি বিশেষ ধরনের তালিকা তৈরি করার জন্য ব্যবহৃত হয়, যেখানে একটি টার্ম (Term) এবং তার ব্যাখ্যা (Definition) প্রদর্শিত হয়। এই লিস্টের মধ্যে তিনটি মূল ট্যাগ ব্যবহৃত হয়: <dl>, <dt>, এবং <dd>।

১. ডেফিনিশন লিস্টের মৌলিক গঠন

ডেফিনিশন লিস্ট তৈরি করতে নিম্নলিখিত তিনটি ট্যাগ ব্যবহার করা হয়:

• <dl>: ডেফিনিশন লিস্টের রূপরেখা বা контейনার (container) ট্যাগ। এটি ডেফিনিশন লিস্টের শুরুর এবং শেষের সীমা নির্ধারণ করে।
• <dt>: ডেফিনিশন টার্ম (Term)। এটি একটি নির্দিষ্ট টার্ম বা শব্দের প্রতিনিধিত্ব করে, যার ব্যাখ্যা দেওয়া হবে।
• <dd>: ডেফিনিশন (Definition)। এটি <dt> ট্যাগে উল্লেখিত টার্মের ব্যাখ্যা বা সংজ্ঞা প্রদান করে।

২. ডেফিনিশন লিস্টের ব্যবহার

একটি সাধারণ ডেফিনিশন লিস্টের গঠন নিচে দেখানো হলো:

<dl>
    <dt>HTML</dt>
    <dd>HTML stands for HyperText Markup Language. It is used to structure web pages.</dd>

    <dt>XHTML</dt>
    <dd>XHTML is a stricter version of HTML, which follows XML rules.</dd>

    <dt>CSS</dt>
    <dd>CSS stands for Cascading Style Sheets. It is used to style web pages.</dd>
</dl>

৩. ডেফিনিশন লিস্টের উপাদানসমূহ

৩.1 <dl> (ডেফিনিশন লিস্ট)

<dl> ট্যাগটি ডেফিনিশন লিস্টের জন্য কন্টেইনার হিসেবে কাজ করে। এটি সমস্ত ডেফিনিশন টার্ম এবং তাদের ব্যাখ্যা ধারণ করে।

<dl>
    <!-- Labeled terms and their definitions go here -->
</dl>

৩.2 <dt> (ডেফিনিশন টার্ম)

<dt> ট্যাগটি একটি টার্ম বা শব্দকে চিহ্নিত করে, যা ব্যাখ্যা করা হবে। এটি সাধারণত ডেফিনিশন লিস্টের মধ্যে প্রথমে আসে।

<dt>HTML</dt>
<dt>XHTML</dt>

৩.3 <dd> (ডেফিনিশন)

<dd> ট্যাগটি একটি টার্মের ব্যাখ্যা বা সংজ্ঞা প্রদান করে, যা <dt> ট্যাগের সাথে সম্পর্কিত থাকে। একাধিক <dd> ট্যাগ একটি ডেফিনিশন টার্মের জন্য ব্যবহার করা যেতে পারে।

<dd>HTML stands for HyperText Markup Language.</dd>
<dd>XHTML is a stricter version of HTML.</dd>

৪. উদাহরণ: ডেফিনিশন লিস্ট

এখানে একটি সম্পূর্ণ ডেফিনিশন লিস্টের উদাহরণ দেওয়া হলো:

<dl>
    <dt>HTML</dt>
    <dd>HTML stands for HyperText Markup Language. It is used to structure web pages.</dd>

    <dt>XHTML</dt>
    <dd>XHTML is a stricter version of HTML, which follows XML rules.</dd>

    <dt>CSS</dt>
    <dd>CSS stands for Cascading Style Sheets. It is used to style web pages.</dd>
</dl>

এই উদাহরণে, প্রতিটি টার্ম (যেমন, "HTML", "XHTML", "CSS") <dt> ট্যাগে এবং তাদের ব্যাখ্যা বা সংজ্ঞা <dd> ট্যাগে দেওয়া হয়েছে। <dl> ট্যাগটি পুরো লিস্টের কনটেইনার হিসেবে কাজ করছে।

৫. এক্সএইচটিএমএল স্টাইলের নিয়ম

যেহেতু XHTML একটি XML-ভিত্তিক ভাষা, তাই এটি কিছু স্টাইলের নিয়ম অনুসরণ করে:

• কেস সেনসিটিভিটি: XHTML এ ট্যাগ এবং অ্যাট্রিবিউট নামগুলো অবশ্যই ছোট হাতের অক্ষরে লিখতে হবে।
• ট্যাগ বন্ধন: <dd>, <dt> এবং <dl> ট্যাগগুলো সঠিকভাবে বন্ধ করতে হবে। উদাহরণস্বরূপ, <dd /> এবং <dt /> বন্ধনসহ ব্যবহার করা উচিত।

ডেফিনিশন লিস্ট (<dl>, <dt>, <dd>) XHTML-এ তথ্য সংগঠিত করার একটি কার্যকরী পদ্ধতি। এটি টার্ম এবং তার ব্যাখ্যা প্রদর্শনের জন্য ব্যবহৃত হয় এবং এটি ওয়েব পেজের কনটেন্টে স্পষ্টতা এবং সংগঠন এনে দেয়। XHTML ডকুমেন্টে ডেফিনিশন লিস্ট ব্যবহার করার সময় XML এর স্ট্রিক্ট নিয়ম অনুসরণ করে ট্যাগগুলোকে সঠিকভাবে বন্ধনসহ ব্যবহার করা আবশ্যক।

XHTML ডকুমেন্টে টেবিল তৈরি করা HTML-এর মতোই, তবে এখানে কিছু অতিরিক্ত নিয়ম এবং সিনট্যাক্সের নিয়ম মেনে চলা প্রয়োজন। XHTML হল XML এর ভিত্তিতে তৈরি, যার কারণে সব ট্যাগ এবং অ্যাট্রিবিউটগুলো সঠিকভাবে বন্ধ এবং কেস-সেন্সিটিভ হওয়া আবশ্যক।

১. <table> ট্যাগ

১.1 পরিচিতি

<table> ট্যাগটি একটি টেবিল তৈরির জন্য ব্যবহৃত হয়। এই ট্যাগের মধ্যে টেবিলের সারি (<tr>) এবং সেলের কনটেন্ট (<td> বা <th>) থাকবে।

১.2 ব্যবহার

<table> ট্যাগটি টেবিলের মূল কন্টেইনার, যেখানে সব রো এবং কলাম থাকে। এটি সাধারণত border, width, cellpadding, cellspacing ইত্যাদি অ্যাট্রিবিউট দিয়ে কাস্টমাইজ করা হয়, তবে XHTML এ অ্যাট্রিবিউটগুলো XHTML স্ট্যান্ডার্ড অনুসারে ব্যবহার করা উচিত।

১.3 উদাহরণ

<table border="1">
    <!-- টেবিলের সারি (row) -->
    <tr>
        <th>নাম</th>
        <th>বয়স</th>
        <th>শহর</th>
    </tr>
    <!-- প্রথম ডেটা সারি -->
    <tr>
        <td>রাহুল</td>
        <td>২৫</td>
        <td>ঢাকা</td>
    </tr>
    <!-- দ্বিতীয় ডেটা সারি -->
    <tr>
        <td>মিনা</td>
        <td>২২</td>
        <td>চট্টগ্রাম</td>
    </tr>
</table>

২. <tr> ট্যাগ

২.1 পরিচিতি

<tr> ট্যাগটি টেবিলের একটি সারি তৈরি করতে ব্যবহৃত হয়। এটি <table> ট্যাগের ভিতরে ব্যবহার করা হয় এবং এর মধ্যে একাধিক <td> বা <th> ট্যাগ থাকতে পারে।

২.2 ব্যবহার

• <tr> ট্যাগের মধ্যে থাকা <td> বা <th> ট্যাগগুলো টেবিলের সেল তৈরি করে।
• একটি টেবিলের ভিতরে একাধিক <tr> ট্যাগ ব্যবহার করে বিভিন্ন সারি তৈরি করা হয়।

২.3 উদাহরণ

<tr>
    <td>অলিক</td>
    <td>৩০</td>
    <td>রাজশাহী</td>
</tr>

৩. <td> ট্যাগ

৩.1 পরিচিতি

<td> (table data) ট্যাগটি একটি টেবিল সেলের কন্টেন্ট হিসেবে ব্যবহৃত হয়। এটি একটি টেবিল সারির মধ্যে ডেটা প্রদর্শন করতে সাহায্য করে।

৩.2 ব্যবহার

<td> ট্যাগের মধ্যে সাধারণত টেক্সট, সংখ্যা, চিত্র, বা অন্যান্য HTML এলিমেন্ট থাকতে পারে। এটি টেবিলের একটি সাধারণ সেল তৈরি করে।

৩.3 উদাহরণ

<td>লিপি</td>
<td>২৮</td>
<td>সিলেট</td>

৪. <th> ট্যাগ

৪.1 পরিচিতি

<th> (table header) ট্যাগটি টেবিলের হেডিং সেল তৈরি করতে ব্যবহৃত হয়। এটি টেবিলের শিরোনাম বা প্রধান শিরোনাম সেলগুলোর জন্য ব্যবহৃত হয়, এবং স্বাভাবিকভাবেই গা dark ় বা পাতলা ফন্টে প্রদর্শিত হয়।

৪.2 ব্যবহার

<th> ট্যাগটি সাধারণত <tr> ট্যাগের মধ্যে থাকে এবং এটি সারির শিরোনাম, যেমন কলামের নাম বা বিভাগের নাম হিসেবে ব্যবহার করা হয়। এটি সেলটি গা dark ় করে এবং মাঝে মাঝে কেন্দ্রিকভাবে প্রদর্শন করে।

৪.3 উদাহরণ

<th>নাম</th>
<th>বয়স</th>
<th>শহর</th>

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

নিচে একটি সম্পূর্ণ এক্সএইচটিএমএল টেবিলের উদাহরণ দেওয়া হলো, যাতে <table>, <tr>, <td>, এবং <th> ট্যাগগুলি সঠিকভাবে ব্যবহৃত হয়েছে:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <title>Student Table</title>
</head>
<body>
    <h1>Student Information</h1>
    <table border="1">
        <tr>
            <th>নাম</th>
            <th>বয়স</th>
            <th>শহর</th>
        </tr>
        <tr>
            <td>রাহুল</td>
            <td>২৫</td>
            <td>ঢাকা</td>
        </tr>
        <tr>
            <td>মিনা</td>
            <td>২২</td>
            <td>চট্টগ্রাম</td>
        </tr>
        <tr>
            <td>অলিক</td>
            <td>৩০</td>
            <td>রাজশাহী</td>
        </tr>
    </table>
</body>
</html>

৬. XHTML টেবিলের কিছু অতিরিক্ত টিপস

৬.1 টেবিলের স্টাইলিং

XHTML-এ টেবিলের স্টাইল করার জন্য <style> ট্যাগ বা বাইরের CSS ফাইল ব্যবহার করতে পারেন। উদাহরণস্বরূপ, টেবিলের সীমানা, কলামের প্রস্থ, ব্যাকগ্রাউন্ড কালার ইত্যাদি পরিবর্তন করা যায়।

<style type="text/css">
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
    tr:nth-child(even) {
        background-color: #f9f9f9;
    }
</style>

৬.2 অ্যাক্সেসিবিলিটি

• টেবিলের কন্টেন্ট এক্সেসিবল করার জন্য, <th> ট্যাগের scope অ্যাট্রিবিউট ব্যবহার করা উচিত। এই অ্যাট্রিবিউটটি ব্রাউজারকে জানায় কোন সেলটি রো, কলাম, বা গ্রিডের হেডিং।

<th scope="col">নাম</th>
<th scope="col">বয়স</th>
<th scope="col">শহর</th>

এক্সএইচটিএমএল ডকুমেন্টে টেবিল তৈরি করার জন্য <table>, <tr>, <td>, এবং <th> ট্যাগগুলি সঠিকভাবে ব্যবহার করতে হয়। একটি টেবিলের সেল গঠন এবং শিরোনাম সঠিকভাবে প্রদর্শন করার জন্য এই ট্যাগগুলি অপরিহার্য। এছাড়াও, XHTML-এর কেস-সেন্সিটিভ নিয়ম অনুসরণ করে সব ট্যাগকে সঠিকভাবে বন্ধ করা জরুরি।

এক্সএইচটিএমএল (XHTML) ডকুমেন্টে টেবিল ব্যবহার করা ওয়েব পেজে তথ্য উপস্থাপন করতে সহায়ক। টেবিলের মাধ্যমে ডেটা সহজভাবে শো করা যায়, তবে এর সাথে স্টাইলিং এবং স্প্যানিংয়ের ব্যবহারে টেবিলটি আরও পড়তে সুবিধাজনক এবং আকর্ষণীয় হয়ে ওঠে।

এখানে আমরা এক্সএইচটিএমএল টেবিল স্টাইলিং এবং স্প্যানিংয়ের গুরুত্বপূর্ণ কিছু দিক ব্যাখ্যা করবো।

১. এক্সএইচটিএমএল টেবিলের মৌলিক গঠন

একটি এক্সএইচটিএমএল টেবিলের মৌলিক গঠন সাধারণত তিনটি প্রধান ট্যাগ নিয়ে গঠিত: <table>, <tr>, <td> এবং প্রযোজ্য হলে <th>। এছাড়া, টেবিলের কলাম ও সারি স্প্যান করতে colspan এবং rowspan অ্যাট্রিবিউট ব্যবহার করা হয়। নিচে একটি সাধারণ এক্সএইচটিএমএল টেবিলের উদাহরণ দেখানো হয়েছে।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <title>Sample Table</title>
</head>
<body>

<h1>Student Information</h1>

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Grade</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>15</td>
        <td>A</td>
    </tr>
    <tr>
        <td>Jane Smith</td>
        <td>14</td>
        <td>B</td>
    </tr>
    <tr>
        <td>Sam Brown</td>
        <td>16</td>
        <td>A+</td>
    </tr>
</table>

</body>
</html>

ব্যাখ্যা:

• <table>: এটি টেবিলের মূল ট্যাগ, যা টেবিলের পুরো কাঠামো ধারণ করে।
• <tr>: টেবিলের প্রতিটি সারি (row) নির্দেশ করে।
• <th>: টেবিলের হেডার (শিরোনাম) সেল। এটি সাধারণত বোল্ড এবং সেন্টার করা থাকে।
• <td>: টেবিলের ডাটা সেল, যেখানে টেবিলের সাধারণ তথ্য থাকে।

২. টেবিল স্টাইলিং

এক্সএইচটিএমএল টেবিল স্টাইলিংয়ের জন্য আপনি CSS (Cascading Style Sheets) ব্যবহার করতে পারেন। CSS ব্যবহার করে টেবিলের স্টাইল যেমন সীমা (border), প্যাডিং, ব্যাকগ্রাউন্ড, রঙ, টেক্সট অ্যালাইনমেন্ট ইত্যাদি কাস্টমাইজ করা যায়। নিচে কিছু সাধারণ CSS স্টাইলিংয়ের উদাহরণ দেওয়া হলো।

২.1 টেবিলের সীমানা এবং প্যাডিং

<style type="text/css">
    table {
        border-collapse: collapse; /* টেবিলের সীমানা একত্রিত করবে */
        width: 100%; /* টেবিলের প্রস্থ ১০০% নির্ধারণ করবে */
    }
    th, td {
        border: 1px solid black; /* সীমানার কালার এবং আকার নির্ধারণ */
        padding: 8px; /* সেলের মধ্যে প্যাডিং */
        text-align: left; /* টেক্সট বামদিকে সাজানো */
    }
    th {
        background-color: #f2f2f2; /* হেডার সেলে ব্যাকগ্রাউন্ড কালার */
    }
</style>

২.2 টেবিলের স্টাইলিং প্রয়োগ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <title>Styled Table</title>
    <style type="text/css">
        table {
            border-collapse: collapse;
            width: 80%;
        }
        th, td {
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        td {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

<h1>Styled Student Information</h1>

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Grade</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>15</td>
        <td>A</td>
    </tr>
    <tr>
        <td>Jane Smith</td>
        <td>14</td>
        <td>B</td>
    </tr>
    <tr>
        <td>Sam Brown</td>
        <td>16</td>
        <td>A+</td>
    </tr>
</table>

</body>
</html>

ব্যাখ্যা:

• border-collapse: collapse;: এটি টেবিলের সীমানা একত্রিত করে।
• width: 80%;: টেবিলের প্রস্থ ৮০% নির্ধারণ করে।
• background-color: সেলগুলোর ব্যাকগ্রাউন্ড কালার নির্ধারণ করে।
• padding: 10px;: সেলের মধ্যে ১০ পিক্সেল প্যাডিং যোগ করে।

৩. স্প্যানিং (Spanning) ব্যবহার

টেবিলের সেলগুলোকে একাধিক কলাম বা সারি জুড়ে ছড়িয়ে দেওয়া বা "স্প্যান" করতে colspan এবং rowspan অ্যাট্রিবিউট ব্যবহার করা হয়।

৩.1 Colspan (কলাম স্প্যান)

colspan অ্যাট্রিবিউটটি একটি সেলকে একাধিক কলাম জুড়ে প্রসারিত করতে ব্যবহার করা হয়।

<tr>
    <td colspan="2">John Doe</td>
    <td>A</td>
</tr>

ব্যাখ্যা:

• এখানে colspan="2" ব্যবহার করে "John Doe" সেলটি দুইটি কলাম জুড়ে প্রসারিত করা হয়েছে।

৩.2 Rowspan (সারি স্প্যান)

rowspan অ্যাট্রিবিউটটি একটি সেলকে একাধিক সারি জুড়ে প্রসারিত করতে ব্যবহার করা হয়।

<tr>
    <td rowspan="2">John Doe</td>
    <td>15</td>
    <td>A</td>
</tr>
<tr>
    <td>16</td>
    <td>B</td>
</tr>

ব্যাখ্যা:

• এখানে rowspan="2" ব্যবহার করে "John Doe" সেলটি দুটি সারি জুড়ে প্রসারিত করা হয়েছে।

৩.3 স্প্যানিং সহ একটি টেবিল উদাহরণ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <title>Table with Spanning</title>
    <style type="text/css">
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>

<h1>Student Information with Spanning</h1>

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Grade</th>
    </tr>
    <tr>
        <td rowspan="2">John Doe</td>
        <td>15</td>
        <td>A</td>
    </tr>
    <tr>
        <td>16</td>
        <td>B</td>
    </tr>
    <tr>
        <td colspan="2">Jane Smith</td>
        <td>A+</td>
    </tr>
</table>

</body>
</html>

ব্যাখ্যা:

• rowspan="2": "John Doe" সেলটি দুটি সারি জুড়ে প্রসারিত হয়েছে।
• colspan="2": "Jane Smith" সেলটি দুইটি কলাম জুড়ে প্রসারিত হয়েছে।

এক্সএইচটিএমএল টেবিলের মাধ্যমে আপনি ডেটা সহজে এবং স্পষ্টভাবে উপস্থাপন করতে পারেন। colspan এবং rowspan অ্যাট্রিবিউট ব্যবহার করে আপনি টেবিলের সেলগুলিকে একাধিক কলাম বা সারি জুড়ে প্রসারিত করতে পারেন। এছাড়া, CSS ব্যবহার করে টেবিলের স্টাইলিং করে সেটিকে আরও আকর্ষণীয় এবং ব্যবহারযোগ্য করতে পারেন।