Html Table in Bengali | এইচটিএমএল টেবিল টিউটোরিয়াল

টেবিল শিরোনামঃ- 

HTML-এ, আপনি টেবিলের শিরোনাম সংজ্ঞায়িত করতে <th> উপাদান ব্যবহার করতে পারেন। টেবিল শিরোনামগুলি একটি HTML টেবিলের কলাম বা সারিগুলির জন্য লেবেল বা শিরোনাম প্রদান করতে ব্যবহৃত হয়, যা ব্যবহারকারীদের জন্য টেবিলের বিষয়বস্তু বোঝা সহজ করে তোলে।

একটি HTML টেবিলে টেবিল শিরোনাম ব্যবহার করার জন্য বাক্য গঠন নিম্নরূপঃ- 

<table> <tr> <!-- Table row --> <th>Heading 1</th> <!-- Table heading for column 1 --> <th>Heading 2</th> <!-- Table heading for column 2 --> <th>Heading 3</th> <!-- Table heading for column 3 --> </tr> <tr> <!-- Table row --> <td>Row 1, Cell 1</td> <!-- Table cell for row 1, column 1 --> <td>Row 1, Cell 2</td> <!-- Table cell for row 1, column 2 --> <td>Row 1, Cell 3</td> <!-- Table cell for row 1, column 3 --> </tr> <tr> <!-- Table row --> <td>Row 2, Cell 1</td> <!-- Table cell for row 2, column 1 --> <td>Row 2, Cell 2</td> <!-- Table cell for row 2, column 2 --> <td>Row 2, Cell 3</td> <!-- Table cell for row 2, column 3 --> </tr> <!-- Additional table rows go here --> </table>


এই উদাহরণে, <th> উপাদানগুলি প্রতিটি কলামের জন্য টেবিল শিরোনাম সংজ্ঞায়িত করতে ব্যবহৃত হয়। <tr> উপাদান একটি টেবিল সারি প্রতিনিধিত্ব করে, এবং <td> উপাদান সারির প্রতিটি কক্ষের জন্য টেবিল ঘর প্রতিনিধিত্ব করে।

ডিফল্টরূপে, টেবিল শিরোনামগুলি গাঢ় আকারে প্রদর্শিত হয় এবং টেবিল ঘরের মধ্যে কেন্দ্রীভূত হয়। আপনি CSS ব্যবহার করে সারণীর শিরোনামগুলির চেহারাকে আরও কাস্টমাইজ করতে পারেন, যেমন সারিবদ্ধকরণ, ফন্টের আকার এবং স্টাইলিং।

টেবিলের শিরোনামগুলি অ্যাক্সেসযোগ্যতার জন্য গুরুত্বপূর্ণ এবং স্ক্রীন রিডার এবং অন্যান্য সহায়ক প্রযুক্তিগুলিকে একটি টেবিলের বিষয়বস্তুকে সঠিকভাবে ব্যাখ্যা করতে সহায়তা করে ৷ 

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

Cell প্যাডিং এবং Cell স্পেসিং বৈশিষ্ট্যঃ- 

সেলপ্যাডিং এবং সেলস্পেসিং অ্যাট্রিবিউটগুলি একটি HTML টেবিলে সেলগুলির ব্যবধান এবং প্যাডিং নিয়ন্ত্রণ করতে HTML এ ব্যবহৃত হয়। এগুলি সাধারণত <table> উপাদানের বৈশিষ্ট্য হিসাবে ব্যবহৃত হয় একটি টেবিলের কোষের মধ্যে স্থান এবং কোষের মধ্যে স্থানের পরিমাণ নির্ধারণ করতে।

এখানে আপনি কিভাবে একটি HTML টেবিলে সেলপ্যাডিং এবং সেলস্পেসিং বৈশিষ্ট্যগুলি ব্যবহার করতে পারেনঃ- 

<table cellpadding="10" cellspacing="5"> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table>


এই উদাহরণে, সেলপ্যাডিং অ্যাট্রিবিউটটি 10 ​​এ সেট করা হয়েছে এবং সেলস্পেসিং অ্যাট্রিবিউটটি 5 এ সেট করা হয়েছে। 

সেলপ্যাডিং অ্যাট্রিবিউট প্রতিটি কক্ষের ভিতরে স্থানের পরিমাণ নিয়ন্ত্রণ করে, ঘরের মধ্যে সামগ্রীর চারপাশে প্যাডিং যোগ করে। সেলস্পেসিং অ্যাট্রিবিউটটি টেবিলের সংলগ্ন কক্ষগুলির মধ্যে ফাঁক যোগ করে কোষের মধ্যে স্থানের পরিমাণ নিয়ন্ত্রণ করে।


আপনি আপনার টেবিলে পছন্দসই স্পেসিং এবং প্যাডিং অর্জন করতে সেলপ্যাডিং এবং সেলস্পেসিংয়ের মানগুলি সামঞ্জস্য করতে পারেন। সেলপ্যাডিং এবং সেলস্পেসিং 0-এ সেট করা হলে ঘরের মধ্যে যে কোনো ফাঁক বা প্যাডিং মুছে যাবে।


এটা মনে রাখা গুরুত্বপূর্ণ যে <table> এলিমেন্টে অ্যাট্রিবিউট হিসেবে সেলপ্যাডিং এবং সেলস্পেসিং ব্যবহার করা HTML5-এ পুরানো বলে বিবেচিত হয়। 

পরিবর্তে, টেবিলে ব্যবধান এবং প্যাডিং নিয়ন্ত্রণ করতে CSS ব্যবহার করার পরামর্শ দেওয়া হয়। 

CSS টেবিলের চেহারার উপর আরও নমনীয়তা এবং নিয়ন্ত্রণ প্রদান করে এবং এটি উপস্থাপনাকে কাঠামো থেকে আলাদা করে, যা আধুনিক ওয়েব ডেভেলপমেন্টের সর্বোত্তম অনুশীলনের সাথে সঙ্গতিপূর্ণ।

Colspan এবং Rowspan বৈশিষ্ট্যঃ- 

HTML-এ, colspan এবং rowspan বৈশিষ্ট্যগুলি একটি HTML টেবিলে কতগুলি কলাম বা সারি একটি টেবিল সেল স্প্যান করা উচিত তা নির্দিষ্ট করতে ব্যবহার করা হয়। এই বৈশিষ্ট্যগুলি একটি টেবিলে অনুভূমিকভাবে (কলাম জুড়ে) বা উল্লম্বভাবে (সারি জুড়ে) কক্ষগুলিকে একত্রিত করতে ব্যবহৃত হয়।

এখানে আপনি কিভাবে একটি HTML টেবিলে colspan এবং rowspan বৈশিষ্ট্যগুলি ব্যবহার করতে পারেনঃ- 

<table> <tr> <td rowspan="2">Cell 1</td> <!-- This cell spans across 2 rows --> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td colspan="2">Cell 4</td> <!-- This cell spans across 2 columns --> <td>Cell 5</td> </tr> </table>

এই উদাহরণে, রোস্প্যান অ্যাট্রিবিউটটি প্রথম সারির প্রথম ঘরের জন্য 2 এ সেট করা হয়েছে, যার মানে এটি দুটি সারি জুড়ে বিস্তৃত হবে। 

দ্বিতীয় সারির তৃতীয় ঘরের জন্য কলস্প্যান অ্যাট্রিবিউটটি 2 এ সেট করা হয়েছে, যার মানে এটি দুটি কলাম জুড়ে বিস্তৃত হবে। মার্জ করা কক্ষগুলি জুড়ে থাকা কক্ষগুলির স্থান দখল করবে এবং একত্রিত কক্ষের বিষয়বস্তু একত্রিত এলাকার মধ্যে কেন্দ্রীভূত হবে৷


মনে রাখবেন যে রোস্প্যান এবং কলস্প্যান বৈশিষ্ট্যগুলি যথাযথভাবে ব্যবহার করা উচিত, কারণ তারা একটি টেবিলের অ্যাক্সেসযোগ্যতা এবং রক্ষণাবেক্ষণকে প্রভাবিত করতে পারে।

একত্রিত কক্ষগুলি স্ক্রীন রিডার এবং অন্যান্য সহায়ক প্রযুক্তির জন্য টেবিলটিকে সঠিকভাবে ব্যাখ্যা করা আরও কঠিন করে তুলতে পারে এবং তারা টেবিলের সম্পাদনা এবং রক্ষণাবেক্ষণকে জটিল করে তুলতে পারে। 

অতএব, শুধুমাত্র প্রয়োজনের সময় রোস্প্যান এবং কলস্প্যান ব্যবহার করা গুরুত্বপূর্ণ এবং নিশ্চিত করুন যে টেবিলটি সমস্ত ব্যবহারকারীর জন্য অ্যাক্সেসযোগ্য এবং বোধগম্য।

Table Backgrounds:

এইচটিএমএল-এ, আপনি CSS ব্যবহার করে টেবিলের জন্য ব্যাকগ্রাউন্ড ইমেজ বা রঙ সেট করতে পারেন। আপনার পছন্দসই প্রভাব এবং আপনার HTML টেবিলের কাঠামোর উপর নির্ভর করে এটি অর্জন করার বিভিন্ন উপায় রয়েছে। এখানে কয়েকটি সাধারণ পদ্ধতি রয়েছেঃ- 

1. CSS ব্যাকগ্রাউন্ড-ইমেজ প্রপার্টি ব্যবহার করাঃ- 

<table style="background-image: url('background-image.jpg');"> <!-- Table content goes here --> </table>

এই উদাহরণে, সারণির জন্য একটি পটভূমি চিত্র সেট করতে ব্যাকগ্রাউন্ড-ইমেজ প্রপার্টি ব্যবহার করা হয়। আপনি url() ফাংশনে ইমেজ ফাইলের URL উল্লেখ করতে পারেন এবং ইমেজটি টেবিলের ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করা হবে।

2. CSS ব্যাকগ্রাউন্ড-কালার প্রপার্টি ব্যবহার করাঃ- 

<table style="background-color: #eef;"> <!-- Table content goes here --> </table>

এই উদাহরণে, টেবিলের জন্য একটি পটভূমির রঙ সেট করতে ব্যাকগ্রাউন্ড-কালার বৈশিষ্ট্য ব্যবহার করা হয়। আপনি একটি হেক্সাডেসিমেল কোড, RGB মান বা যেকোনো বৈধ CSS রঙের মান ব্যবহার করে পছন্দসই রঙ নির্দিষ্ট করতে পারেন।

3. CSS ক্লাস বা আইডি ব্যবহার করাঃ- 

<style> .my-table { background-image: url('background-image.jpg'); /* or */ background-color: #eef; } </style> <table class="my-table"> <!-- Table content goes here --> </table>

এই উদাহরণে, একটি CSS ক্লাস (.my-table) একটি <style> ব্লক বা একটি বহিরাগত CSS ফাইলে সংজ্ঞায়িত করা হয়েছে, এবং ক্লাসটি ক্লাস অ্যাট্রিবিউট ব্যবহার করে টেবিলে প্রয়োগ করা হয়েছে। 

আপনি যদি একটি অনন্য শনাক্তকারীর সাথে একটি নির্দিষ্ট টেবিলে ব্যাকগ্রাউন্ড প্রয়োগ করতে চান তবে আপনি একটি ক্লাসের পরিবর্তে একটি আইডি (#মাই-টেবিল) ব্যবহার করতে পারেন।

মনে রাখবেন যে ইনলাইন শৈলী (যেমন, style="...") ব্যবহার সাধারণত নিরুৎসাহিত করা হয়, এবং ভাল রক্ষণাবেক্ষণযোগ্যতা এবং পৃথকীকরণের জন্য আপনার HTML নথির <head> বিভাগে বাহ্যিক CSS ফাইল বা <style> ব্লকগুলি ব্যবহার করার পরামর্শ দেওয়া হয়। উদ্বেগের।

Table Height and Width:

HTML-এ, আপনি উচ্চতা এবং প্রস্থ বৈশিষ্ট্য বা CSS বৈশিষ্ট্য ব্যবহার করে বিভিন্ন উপাদানের উচ্চতা এবং প্রস্থ নির্দিষ্ট করতে পারেন, যেমন চিত্র, টেবিল এবং ডিভ।


1. HTML উচ্চতা এবং প্রস্থ বৈশিষ্ট্য ব্যবহার করেঃ- 

<img src="image.jpg" alt="An example image" height="200" width="300">

এই উদাহরণে, উচ্চতা এবং প্রস্থ বৈশিষ্ট্যগুলি পিক্সেলে একটি চিত্র উপাদানের উচ্চতা এবং প্রস্থ নির্দিষ্ট করতে ব্যবহৃত হয়। উচ্চতা বৈশিষ্ট্য চিত্রের উচ্চতা সেট করে এবং প্রস্থ বৈশিষ্ট্যটি চিত্রের প্রস্থ নির্ধারণ করে। 

মনে রাখবেন যে চিত্রগুলিতে উচ্চতা এবং প্রস্থের বৈশিষ্ট্যগুলি ব্যবহার করা চিত্রের আকৃতির অনুপাতকে প্রভাবিত করতে পারে যদি নির্দিষ্ট মানগুলি মূল আকৃতির অনুপাত বজায় না রাখে।

2. CSS উচ্চতা এবং প্রস্থ বৈশিষ্ট্য ব্যবহার করেঃ- 

<div style="height: 200px; width: 300px; background-color: #eef;"> <!-- Content goes here --> </div>

এই উদাহরণে, CSS উচ্চতা এবং প্রস্থ বৈশিষ্ট্যগুলি একটি <div> উপাদানের উচ্চতা এবং প্রস্থ নির্দিষ্ট করতে ব্যবহৃত হয়। আপনি ছবি, টেবিল, ডিভ এবং অন্যান্য উপাদান সহ বিভিন্ন HTML উপাদানের উচ্চতা এবং প্রস্থ সেট করতে CSS ব্যবহার করতে পারেন। 

CSS উপাদানগুলির বিন্যাস এবং উপস্থিতির উপর আরও নমনীয়তা এবং নিয়ন্ত্রণ প্রদান করে এবং যখনই সম্ভব ইনলাইন শৈলীর পরিবর্তে স্টাইলিংয়ের জন্য CSS ব্যবহার করার পরামর্শ দেওয়া হয়।


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

পরম ইউনিটের ফলে নির্দিষ্ট মাপ হতে পারে যা বিভিন্ন ডিভাইস বা স্ক্রীন রেজোলিউশনে ভালোভাবে মাপতে পারে না।

Table Caption:

HTML এ, <caption> উপাদানটি একটি টেবিলে একটি ক্যাপশন যোগ করতে ব্যবহৃত হয়। <caption> উপাদানটি খোলার <table> ট্যাগের পরে এবং <thead>, <tbody>, <tfoot>, বা <tr> উপাদানগুলির আগে স্থাপন করা উচিত যা টেবিলের গঠন সংজ্ঞায়িত করে।

HTML টেবিলে <caption> উপাদানটি কীভাবে ব্যবহার করবেন তার একটি উদাহরণ এখানে দেওয়া হলঃ- 

<table> <caption>Table Caption</caption> <thead> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </tbody> </table>

এই উদাহরণে, টেবিলে ক্যাপশন "টেবিল ক্যাপশন" যোগ করতে <ক্যাপশন> উপাদান ব্যবহার করা হয়। টেবিলে প্রয়োগ করা CSS স্টাইলিং এর উপর নির্ভর করে ক্যাপশনটি টেবিলের উপরে বা নীচে স্থাপন করা যেতে পারে। ডিফল্টরূপে, ক্যাপশনটি টেবিলের উপরে কেন্দ্রে থাকে।

আপনি <caption> উপাদানটিকে স্টাইল করতে CSS ব্যবহার করতে পারেন, যেমন ফন্ট স্টাইল, প্রান্তিককরণ, মার্জিন, প্যাডিং এবং ব্যাকগ্রাউন্ডের রঙ সেট করা, আপনার ডিজাইনের প্রয়োজনীয়তা অনুসারে টেবিলের ক্যাপশনের চেহারা কাস্টমাইজ করতে। উদাহরণ স্বরূপঃ- 

<style> caption { font-size: 18px; font-weight: bold; text-align: center; margin-bottom: 10px; background-color: #eef; padding: 5px; } </style>

এই উদাহরণে, টেবিলের ক্যাপশনের জন্য ফন্টের আকার, ফন্টের ওজন, টেক্সট অ্যালাইনমেন্ট, মার্জিন, প্যাডিং এবং পটভূমির রঙ সেট করতে CSS শৈলীগুলি <ক্যাপশন> উপাদানে প্রয়োগ করা হয়। 

আপনার টেবিলের ক্যাপশনের জন্য পছন্দসই চেহারা অর্জন করতে আপনি এই শৈলীগুলিকে প্রয়োজন অনুসারে সামঞ্জস্য করতে পারেন।

Table Header:

HTML-এ, একটি টেবিলের শিরোনাম সাধারণত <th> উপাদান ব্যবহার করে সংজ্ঞায়িত করা হয়, যা "টেবিল হেডার" এর জন্য দাঁড়ায়। 

<th> উপাদানটি টেবিলের উপরের সারি বা বাঁদিকের কলামে সেলগুলি চিহ্নিত করতে ব্যবহৃত হয়, যা সাধারণত টেবিলের সংশ্লিষ্ট কক্ষে ডেটার জন্য লেবেল বা শিরোনাম ধারণ করে।

একটি HTML টেবিলে টেবিল হেডার তৈরি করতে <th> উপাদানটি কীভাবে ব্যবহার করবেন তার একটি উদাহরণ এখানে দেওয়া হলঃ- 

<table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </tbody> </table>

এই উদাহরণে, <thead> উপাদানটি টেবিলের শিরোনামের বিষয়বস্তুকে গোষ্ঠীবদ্ধ করতে ব্যবহৃত হয়, এবং <tr> উপাদানটি একটি টেবিল সারি উপস্থাপন করে। টেবিলের সারির ভিতরে, <th> উপাদানটি টেবিল হেডার "হেডার 1" এবং "হেডার 2" সংজ্ঞায়িত করতে ব্যবহৃত হয়। 

<th> উপাদানগুলি স্বয়ংক্রিয়ভাবে বোল্ড ফন্টের ওজন এবং কেন্দ্রীভূত পাঠ্য প্রান্তিককরণের সাথে ডিফল্টভাবে স্টাইল করা হয়, যদিও আপনি CSS ব্যবহার করে তাদের চেহারা কাস্টমাইজ করতে পারেন।

আপনি টেবিলের শিরোনামগুলিকে আরও স্টাইল করার জন্য CSS ব্যবহার করতে পারেন, যেমন ফন্ট শৈলী, প্রান্তিককরণ, পটভূমির রঙ, প্যাডিং এবং সীমানা নির্ধারণ করতে, আপনার টেবিলের শিরোনামগুলির জন্য পছন্দসই চেহারা অর্জন করতে। উদাহরণ স্বরূপঃ- 

<style> th { font-size: 16px; font-weight: bold; text-align: center; background-color: #eef; padding: 10px; border: 1px solid #ccc; } </style>

এই উদাহরণে, টেবিলের শিরোনামগুলির জন্য ফন্টের আকার, ফন্টের ওজন, টেক্সট অ্যালাইনমেন্ট, পটভূমির রঙ, প্যাডিং এবং বর্ডার সেট করতে <th> উপাদানগুলিতে CSS শৈলী প্রয়োগ করা হয়। 

আপনার টেবিল শিরোনামগুলির চেহারা কাস্টমাইজ করার জন্য আপনি এই শৈলীগুলিকে প্রয়োজন অনুসারে সামঞ্জস্য করতে পারেন।

Table Body:

HTML-এ, একটি টেবিলের বডি সাধারণত <tbody> উপাদান ব্যবহার করে সংজ্ঞায়িত করা হয়, যা "টেবিল বডি" এর জন্য দাঁড়ায়। 

<tbody> উপাদানটি একটি টেবিলের প্রধান বিষয়বস্তুকে গোষ্ঠীভুক্ত করতে ব্যবহৃত হয়, যেটিতে সাধারণত একাধিক সারি এবং কক্ষ থাকে যা টেবিলের জন্য ডেটা ধারণ করে।

একটি HTML টেবিলের বডি তৈরি করতে কিভাবে <tbody> উপাদান ব্যবহার করতে হয় তার একটি উদাহরণ এখানে দেওয়া হলঃ- 

<table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </tbody> </table>

এই উদাহরণে, <tbody> উপাদানটি টেবিলের বডি বিষয়বস্তুকে গোষ্ঠীবদ্ধ করতে ব্যবহৃত হয় এবং <tr> উপাদানটি একটি টেবিল সারি উপস্থাপন করে। 

টেবিলের সারির ভিতরে, <td> উপাদানটি টেবিলের ঘরগুলিকে সংজ্ঞায়িত করতে ব্যবহৃত হয় যেখানে ডেটা "সারি 1, সেল 1", "সারি 1, সেল 2", "সারি 2, সেল 1", এবং "সারি 2, সেল 2"। <td> উপাদানগুলি টেবিলের শরীরের পৃথক কোষগুলিকে উপস্থাপন করে।

আপনি টেবিল বডি স্টাইল করার জন্য CSS ব্যবহার করতে পারেন, যেমন ফন্ট স্টাইল, অ্যালাইনমেন্ট, ব্যাকগ্রাউন্ড কালার, প্যাডিং এবং বর্ডার, আপনার টেবিলের বডির জন্য কাঙ্খিত চেহারা অর্জন করতে। 

উদাহরণ স্বরূপঃ- 

<style> tbody { font-size: 14px; text-align: left; background-color: #f9f9f9; } td { padding: 5px; border: 1px solid #ccc; } </style>

এই উদাহরণে, টেবিল বডির জন্য ফন্ট সাইজ, টেক্সট অ্যালাইনমেন্ট এবং ব্যাকগ্রাউন্ড কালার সেট করতে <tbody> এলিমেন্টে CSS শৈলী প্রয়োগ করা হয়। 

CSS শৈলীগুলি <td> উপাদানগুলিতেও প্রয়োগ করা হয় যাতে শরীরে টেবিল কোষগুলির জন্য প্যাডিং এবং সীমানা সেট করা হয়। আপনার টেবিল বডির চেহারা কাস্টমাইজ করার জন্য আপনি এই শৈলীগুলিকে প্রয়োজন অনুসারে সামঞ্জস্য করতে পারেন।

Table Footer:

HTML এ, একটি টেবিলের ফুটার সাধারণত ব্যবহার করে সংজ্ঞায়িত করা হয়<tfoot> উপাদান, যা "টেবিল ফুটার" এর জন্য দাঁড়িয়েছে।

<tfoot> উপাদানটি একটি টেবিলের ফুটার বিষয়বস্তুকে গোষ্ঠীবদ্ধ করতে ব্যবহৃত হয়, যা সাধারণত সারাংশের তথ্য, মোট বা অন্যান্য বিষয়বস্তু নিয়ে থাকে যা সামগ্রিকভাবে টেবিলের সাথে সম্পর্কিত।

এখানে কিভাবে ব্যবহার করবেন তার একটি উদাহরণ<tfoot> একটি HTML টেবিলের ফুটার তৈরি করতে উপাদানঃ- 

<table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </tbody> <tfoot> <tr> <td>Footer 1</td> <td>Footer 2</td> </tr> </tfoot> </table>

এই উদাহরণে,<tfoot> পাদচরণ বিষয়বস্তু গ্রুপ করতে উপাদান ব্যবহার করা হয়, এবং<tr> উপাদান একটি টেবিল সারি প্রতিনিধিত্ব করে।

টেবিল সারি ভিতরে,<td> পাদচরণ ঘর "পাদটীকা 1" এবং "পাদচরণ 2" সংজ্ঞায়িত করতে উপাদান ব্যবহার করা হয়। দ্য<td> উপাদানগুলি টেবিল ফুটারের পৃথক কোষগুলিকে উপস্থাপন করে।

আপনি টেবিল ফুটার স্টাইল করতে CSS ব্যবহার করতে পারেন, যেমন ফন্ট শৈলী, প্রান্তিককরণ, ব্যাকগ্রাউন্ডের রঙ, প্যাডিং এবং সীমানা নির্ধারণ করতে, আপনার টেবিল ফুটারের জন্য পছন্দসই চেহারা অর্জন করতে। 

উদাহরণ স্বরূপঃ- 

<style> tfoot { font-size: 14px; text-align: center; background-color: #eef; font-weight: bold; } td { padding: 5px; border: 1px solid #ccc; } </style>

এই উদাহরণে, CSS শৈলী প্রয়োগ করা হয় <tfoot> টেবিল ফুটারের জন্য ফন্ট সাইজ, টেক্সট অ্যালাইনমেন্ট, ব্যাকগ্রাউন্ড কালার এবং ফন্টের ওজন সেট করার জন্য উপাদান। CSS শৈলী এছাড়াও প্রয়োগ করা হয় <td> ফুটারে ঘরের জন্য প্যাডিং এবং সীমানা সেট করার উপাদান। 

আপনার টেবিল ফুটারের চেহারা কাস্টমাইজ করার জন্য আপনি প্রয়োজন অনুসারে এই শৈলীগুলি সামঞ্জস্য করতে পারেন।

Nested Tables:

HTML-এ, একটি নেস্টেড টেবিল একটি টেবিলকে বোঝায় যা অন্য টেবিলের মধ্যে স্থাপন করা হয়। এর মানে হল যে একটি টেবিলের এক বা একাধিক ঘরের বিষয়বস্তু অন্য টেবিল।

HTML এ নেস্টেড টেবিল কীভাবে তৈরি করবেন তার একটি উদাহরণ এখানে দেওয়া হলঃ- 

<table border="1"> <tr> <td> Cell 1, Row 1 <table border="1"> <tr> <td>Cell 1, Row 1 (Nested Table)</td> <td>Cell 2, Row 1 (Nested Table)</td> </tr> <tr> <td>Cell 1, Row 2 (Nested Table)</td> <td>Cell 2, Row 2 (Nested Table)</td> </tr> </table> </td> <td>Cell 2, Row 1</td> </tr> <tr> <td>Cell 1, Row 2</td> <td>Cell 2, Row 2</td> </tr> </table>

এই উদাহরণে, 1 এর বর্ডার সহ একটি প্যারেন্ট টেবিল ব্যবহার করে তৈরি করা হয়েছে <table> উপাদান প্যারেন্ট টেবিলের ভিতরে, অন্য সেট ব্যবহার করে একটি ঘরের মধ্যে একটি নেস্টেড টেবিল তৈরি করা হয়<table> এবং<tr> উপাদান নেস্টেড টেবিলের সেলগুলিতে ডেটা থাকে যেমন "সেল 1, সারি 1 (নেস্টেড টেবিল)", "সেল 2, সারি 1 (নেস্টেড টেবিল)", এবং আরও অনেক কিছু।

আপনি আরও জটিল লেআউট তৈরি করতে বা ঘরের মধ্যে বিষয়বস্তু সংগঠিত করতে টেবিল নেস্ট করতে পারেন। যাইহোক, নেস্টেড টেবিলগুলি সুবিবেচনার সাথে ব্যবহার করা এবং আরও আধুনিক এবং নমনীয় লেআউটের জন্য বিকল্প HTML এবং CSS কৌশলগুলি, যেমন CSS গ্রিড বা ফ্লেক্সবক্স ব্যবহার করা গুরুত্বপূর্ণ। 

নেস্টেড টেবিল কখনও কখনও জটিল এবং এইচটিএমএল কাঠামো বজায় রাখা কঠিন হতে পারে এবং প্রতিক্রিয়াশীল ডিজাইন বা অ্যাক্সেসযোগ্যতার জন্য সর্বদা সর্বোত্তম পদ্ধতি নাও হতে পারে।