টেবিল

HTML টেবিলগুলি সারি এবং কলাম সহ ট্যাবুলার ডেটা প্রদর্শন করে। আপনার প্রদর্শিত সামগ্রী এবং সেই সামগ্রীর সাথে সম্পর্কিত আপনার ব্যবহারকারীদের চাহিদার উপর ভিত্তি করে একটি <table> ব্যবহার করা উচিত। যদি ডেটা উপস্থাপন, তুলনা, সাজানো, গণনা করা বা ক্রস-রেফারেন্স করা হয়, তাহলে <table> সম্ভবত সঠিক পছন্দ। যদি আপনি এমন সামগ্রী সংগঠিত করতে আগ্রহী হন যা ট্যাবুলার নয়, যেমন থাম্বনেইল চিত্রের একটি বৃহৎ গ্রুপ, তাহলে টেবিলগুলি উপযুক্ত নয়। পরিবর্তে, ছবির একটি তালিকা তৈরি করুন এবং CSS দিয়ে গ্রিড স্টাইল করুন।

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

সারণির উপাদান, ক্রমানুসারে

<table> ট্যাগটি টেবিলের সমস্ত উপাদান সহ টেবিলের বিষয়বস্তুকে আবৃত করে। <table> এর অন্তর্নিহিত ARIA ভূমিকা হল table ; সহায়ক প্রযুক্তিগুলি জানে যে এই উপাদানটি একটি টেবিল কাঠামো যার মধ্যে সারি এবং কলামে সাজানো ডেটা রয়েছে। যদি টেবিলটি একটি নির্বাচন অবস্থা বজায় রাখে, দ্বি-মাত্রিক নেভিগেশন থাকে, অথবা ব্যবহারকারীকে কোষের ক্রম পুনর্বিন্যাস করতে দেয়, role="grid" সেট করুন। যদি grid সারিগুলি প্রসারিত এবং সংকুচিত করা যায়, তাহলে role="treegrid" ব্যবহার করুন।

<table> এর ভেতরে, আপনি টেবিল হেডার ( <thead> ), টেবিল বডি ( <tbody> ), এবং ঐচ্ছিকভাবে, টেবিল ফুটার ( <tfoot> ) পাবেন। এগুলির প্রতিটি টেবিল সারি ( <tr> ) দিয়ে তৈরি। সারিগুলিতে টেবিল হেডার ( <th> ) এবং টেবিল ডেটা ( <td> ) কোষ থাকে যা, পালাক্রমে, সমস্ত ডেটা ধারণ করে। DOM-এ, এর যেকোনোটির আগে, আপনি দুটি অতিরিক্ত বৈশিষ্ট্য খুঁজে পেতে পারেন: টেবিল ক্যাপশন ( <caption> ) এবং কলাম গ্রুপ ( <colgroup> )। <colgroup> এর একটি span অ্যাট্রিবিউট আছে কিনা তার উপর নির্ভর করে, এতে নেস্টেড টেবিল কলাম ( <col> ) উপাদান থাকতে পারে।

টেবিলের শিশুরা ক্রমানুসারে:

1. <caption> উপাদান
2. <colgroup> উপাদান
3. <thead> উপাদান
4. <tbody> উপাদান
5. <tfoot> উপাদান

আমরা <table> এলিমেন্টের শিশুগুলি কভার করব, যেগুলি সব ঐচ্ছিক কিন্তু সুপারিশকৃত, তারপর সারি, টেবিল হেডার সেল এবং টেবিল ডেটা সেলগুলি একবার দেখে নেব। <colgroup> টি সবশেষে কভার করা হবে।

টেবিল ক্যাপশন

একটি টেবিলের নামকরণের পছন্দের পদ্ধতি হল শব্দার্থিক উপাদান, <caption> । <caption> একটি বর্ণনামূলক, প্রোগ্রাম্যাটিকভাবে সম্পর্কিত টেবিলের শিরোনাম প্রদান করে। এটি ডিফল্টরূপে সকল ব্যবহারকারীর কাছে দৃশ্যমান এবং উপলব্ধ।

<caption> এলিমেন্টটি <table> এলিমেন্টে নেস্টেড প্রথম এলিমেন্ট হওয়া উচিত। এটি অন্তর্ভুক্ত করলে সমস্ত ব্যবহারকারী টেবিলের উদ্দেশ্য তাৎক্ষণিকভাবে জানতে পারবেন, আশেপাশের টেক্সট না পড়েই। বিকল্পভাবে, আপনি ক্যাপশন হিসেবে একটি অ্যাক্সেসযোগ্য নাম প্রদান করতে <table> এ aria-label অথবা aria-labelledby ব্যবহার করতে পারেন। <caption> এলিমেন্টের কোন এলিমেন্ট-নির্দিষ্ট অ্যাট্রিবিউট নেই।

ক্যাপশনটি টেবিলের বাইরে দেখা যাচ্ছে। ক্যাপশনের অবস্থান CSS caption-side প্রপার্টি দিয়ে সেট করা যেতে পারে, যা অবচিত align অ্যাট্রিবিউট ব্যবহার করার চেয়ে ভালো পদ্ধতি। এটি ক্যাপশনটিকে উপরে এবং নীচে সেট করতে পারে। inline-start এবং inline-end সহ বাম এবং ডান দিকের অবস্থান এখনও সম্পূর্ণরূপে সমর্থিত নয়। Top হল ডিফল্ট ব্রাউজার উপস্থাপনা।

ডেটা টেবিলে স্পষ্ট হেডার এবং ক্যাপশন থাকা উচিত এবং এটি যথেষ্ট স্পষ্ট যে এটি প্রায় স্ব-ব্যাখ্যামূলক। মনে রাখবেন যে সমস্ত ব্যবহারকারীর জ্ঞানীয় ক্ষমতা একই রকম হয় না। যখন টেবিলটি "একটি বিষয় তৈরি করছে", অথবা অন্যথায় ব্যাখ্যার প্রয়োজন হয়, তখন টেবিলের মূল বিষয় বা কার্যকারিতার একটি সংক্ষিপ্ত সারাংশ প্রদান করুন। সেই সারাংশটি কোথায় স্থাপন করা হবে তা তার দৈর্ঘ্য এবং জটিলতার উপর নির্ভর করে। যদি সংক্ষিপ্ত হয়, তাহলে এটি ক্যাপশনের অভ্যন্তরীণ পাঠ্য হিসাবে ব্যবহার করুন। যদি দীর্ঘ হয়, তাহলে ক্যাপশনে এটি সারাংশ করুন এবং টেবিলের পূর্ববর্তী অনুচ্ছেদে সারাংশ প্রদান করুন, দুটিকে aria-describedby বৈশিষ্ট্যের সাথে সংযুক্ত করুন। টেবিলটিকে একটি <figure> এ রাখা এবং সারাংশটিকে <figcaption> এ রাখা আরেকটি বিকল্প।

ডেটা বিভাগকরণ

টেবিলের বিষয়বস্তু তিনটি পর্যন্ত বিভাগ নিয়ে গঠিত: শূন্য বা তার বেশি টেবিল হেডার ( <thead> ) , টেবিল বডি ( <tbody> ), এবং টেবিল ফুটার ( <tfoot> )। সবগুলো ঐচ্ছিক, প্রতিটির শূন্য বা তার বেশি সমর্থিত।

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

আমাদের এখন পর্যন্ত যা আছে:

<table>
  <caption>MLW Students</caption>
  <thead></thead>
  <tbody></tbody>
  <tfoot></tfoot>
</table>

<tfoot> উপাদানটি মূলত <thead> এর ঠিক পরে এবং <tbody> এর আগে আসার জন্য নির্দিষ্ট করা হয়েছিল অ্যাক্সেসিবিলিটির কারণে, যে কারণে আপনি লিগ্যাসি কোডবেসে এই অ-স্বজ্ঞাত উৎস ক্রমটি দেখতে পেতে পারেন।

টেবিলের বিষয়বস্তু

টেবিলগুলিকে টেবিল হেডার, বডি এবং ফুটারে ভাগ করা যায়, কিন্তু টেবিলে টেবিল সারি, সেল এবং কন্টেন্ট না থাকলে এগুলোর কোনটিই আসলে কিছুই করে না। প্রতিটি টেবিল সারি, <tr> এ এক বা একাধিক সেল থাকে। যদি একটি সেল হেডার সেল হয়, তাহলে <th> ব্যবহার করুন। অন্যথায়, <td> ব্যবহার করুন।

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

কোষের মধ্যে এবং কোষের মধ্যে প্যাডিং যোগ করার জন্য, সীমানার জন্য এবং টেক্সট অ্যালাইনমেন্টের জন্য বৈশিষ্ট্য ছিল। সেলপ্যাডিং এবং সেলস্পেসিং, যা একটি কোষের বিষয়বস্তু এবং এর সীমানার মধ্যে এবং সংলগ্ন কোষের সীমানার মধ্যে স্থান নির্ধারণ করে, যথাক্রমে CSS border-collapse এবং border-spacing বৈশিষ্ট্য দিয়ে সেট করা উচিত। border-collapse: collapse সেট করা থাকলে Border-spacing কোনও প্রভাব থাকবে না। যদি border-collapse: separate; সেট করা থাকে, তাহলে খালি কোষগুলিকে empty-cells: hide; দিয়ে সম্পূর্ণরূপে লুকানো সম্ভব। টেবিল স্টাইলিং সম্পর্কে আরও জানতে, এখানে টেবিল-সম্পর্কিত CSS স্টাইলের একটি ইন্টারেক্টিভ স্লাইডডেক রয়েছে।

উদাহরণগুলিতে, আমরা কিছু বৈশিষ্ট্য আরও স্পষ্ট করার জন্য টেবিলে একটি সীমানা এবং প্রতিটি কক্ষে CSS যুক্ত করেছি:

এই উদাহরণে, আমাদের কাছে একটি ক্যাপশন, একটি টেবিল হেডার এবং একটি টেবিল বডি আছে। হেডারটিতে তিনটি হেডার <th> কোষ সহ একটি সারি রয়েছে, যার ফলে তিনটি কলাম তৈরি হয়। বডিটিতে তিনটি সারি ডেটা রয়েছে: প্রথম ঘরটি সারির জন্য একটি হেডার সেল, তাই আমরা <td> এর পরিবর্তে <th> ব্যবহার করি।

<th> কোষের অর্থগত অর্থ আছে, যার মধ্যে columnheader অথবা rowheader এর অন্তর্নিহিত ARIA ভূমিকা রয়েছে। এটি কোষকে টেবিল কোষের কলাম বা সারির জন্য হেডার হিসেবে সংজ্ঞায়িত করে, যা গণনাকৃত scope বৈশিষ্ট্যের মানের উপর নির্ভর করে। যদি scope স্পষ্টভাবে সেট না করা থাকে তবে ব্রাউজারটি ডিফল্টভাবে col অথবা row এ থাকবে। যেহেতু আমরা শব্দার্থিক মার্কআপ ব্যবহার করেছি, 1956 কোষের দুটি হেডার রয়েছে: Year এবং Lou Minious। এই অ্যাসোসিয়েশনটি আমাদের বলে যে "1956" হল "Lou Minious" এর জন্য স্নাতকের "বছর"। এই উদাহরণে, আমরা সম্পূর্ণ টেবিলটি দেখতে পাচ্ছি, অ্যাসোসিয়েশনটি দৃশ্যত স্পষ্ট। <th> ব্যবহার করলে হেডার কলাম বা সারি দৃশ্যের বাইরে স্ক্রোল করা হলেও অ্যাসোসিয়েশন প্রদান করে। আমরা স্পষ্টভাবে <th scope="col">Year</th> এবং <th scope="row">Lou Minious</th> সেট করতে পারতাম কিন্তু এই ধরণের টেবিলের সাথে, গণনাকৃত ডিফল্ট মানগুলি কাজ করে। scope অন্যান্য মানগুলির মধ্যে রয়েছে rowgroup এবং colgroup , যা জটিল টেবিলের সাথে কার্যকর।

কোষগুলি মার্জ করুন

এমএস এক্সেল, গুগল শিট এবং নাম্বারের মতো, একাধিক সেলকে একটি সেলের সাথে যুক্ত করা সম্ভব। এটি HTML colspan এবং rowspan বৈশিষ্ট্যগুলির সাহায্যে করা যেতে পারে:

• colspan একটি একক সারির মধ্যে দুটি বা ততোধিক সংলগ্ন কোষকে একত্রিত করে।
• আপনার মার্জ করা সারির প্রথম কক্ষে যোগ করা হলে rowspan সারি জুড়ে কোষগুলিকে একত্রিত করে।

এই উদাহরণে, টেবিলের হেডারে দুটি সারি রয়েছে। প্রথম হেডার সারিতে চারটি কলামে বিস্তৃত তিনটি কোষ রয়েছে: মাঝের কোষে colspan="2" রয়েছে। এটি দুটি সংলগ্ন কোষকে একত্রিত করে। প্রথম এবং শেষ কোষে রয়েছে rowspan="2" । এটি কোষটিকে সংলগ্ন সারির কোষের সাথে একত্রিত করে, ঠিক তার নীচে।

টেবিলের হেডারের দ্বিতীয় সারিতে দুটি ঘর রয়েছে; এগুলি দ্বিতীয় সারির দ্বিতীয় এবং তৃতীয় কলামের জন্য ঘর। প্রথম বা শেষ কলামের জন্য কোনও ঘর ঘোষণা করা হয় না কারণ প্রথম সারির প্রথম এবং শেষ কলামের ঘরটি দুটি সারিতে বিস্তৃত।

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

এই ক্ষেত্রে headers অ্যাট্রিবিউটগুলি হয়তো প্রয়োজন ছিল না, কিন্তু আপনার টেবিলের জটিলতা বৃদ্ধির সাথে সাথে এগুলি মনে রাখা গুরুত্বপূর্ণ। জটিল কাঠামোযুক্ত টেবিল, যেমন টেবিল যেখানে হেডার বা কোষ একত্রিত করা হয় অথবা দুই স্তরের বেশি কলাম বা সারি হেডার সহ, সংশ্লিষ্ট হেডার সেলগুলির স্পষ্ট সনাক্তকরণ প্রয়োজন। এই ধরনের জটিল টেবিলগুলিতে, প্রতিটি ডেটা সেলকে প্রতিটি সংশ্লিষ্ট হেডার সেলের সাথে স্পষ্টভাবে সংযুক্ত করুন এবং headers অ্যাট্রিবিউটের মান হিসাবে সমস্ত সংশ্লিষ্ট হেডারের স্থান-বিভাজিত id মানের তালিকা তৈরি করুন।

headers অ্যাট্রিবিউটটি সাধারণত <td> এলিমেন্টগুলিতে বেশি পাওয়া যায়, তবে <th> এও বৈধ।

তা বলে, জটিল টেবিল কাঠামো সকল ব্যবহারকারীর পক্ষেই বোঝা কঠিন হতে পারে, কেবল স্ক্রিন রিডার ব্যবহারকারীদের জন্যই নয়। জ্ঞানীয়ভাবে এবং স্ক্রিন রিডার সাপোর্টের দিক থেকে, সহজ টেবিলগুলি, খুব কম বা কোনও স্প্যানড সেল ছাড়াই, এমনকি স্কোপ এবং হেডার যোগ না করেও, আরও ভালভাবে বোঝা যায়। এগুলি পরিচালনা করাও সহজ!

স্টাইল টেবিল

দুটি অপেক্ষাকৃত অস্পষ্ট উপাদানের কথা সংক্ষেপে উল্লেখ করা হয়েছে: কলাম গ্রুপ, <colgroup> , উপাদান এবং এর একমাত্র বংশধর, খালি <col> কলাম উপাদান। <colgroup> উপাদানটি একটি টেবিলের মধ্যে কলামের গ্রুপ বা <col> উপাদানগুলিকে সংজ্ঞায়িত করতে ব্যবহৃত হয়।

যদি ব্যবহার করা হয়, তাহলে কলাম গ্রুপিং <table> এ নেস্ট করা উচিত, <caption> এর ঠিক পরে এবং যেকোনো টেবিল ডেটার আগে। যদি তারা একাধিক কলাম স্প্যান করে, তাহলে span অ্যাট্রিবিউট ব্যবহার করুন।

একটি টেবিলের কন্টেন্ট আউটলাইনের ক্রম সাধারণত নিম্নরূপ, <table> এবং <caption> এই দুটি উপাদান অন্তর্ভুক্ত করা উচিত:

<table>
  <caption>Table Caption</caption>
  <colgroup>
    <col/>
  </colgroup>
  <thead>...

<colgroup> এবং <col> কোন অর্থগত অর্থ নেই, যা টেবিলের অ্যাক্সেসযোগ্যতার উপর প্রভাব ফেলবে। তবে, তারা আপনাকে CSS ব্যবহার করে কলাম স্টাইল করতে সাহায্য করে, যেমন প্রস্থ নির্ধারণ করা।

<td> এবং <th> সম্পর্কিত স্টাইলগুলি <col> স্টাইলগুলিকে ওভাররাইড করে। CodePen-এ, আমরা colspan সেট করি টেবিলের কিছু সারি মার্জ করার জন্য, কিন্তু সবগুলো নয়। যদি nth-child CSS নির্বাচক <tr> তে প্রয়োগ করা হয়, তাহলে কোন সারি বা কলাম মার্জ করা হয়েছে তার উপর নির্ভর করে, এটি স্টাইলকে প্রভাবিত করতে পারে।

দুর্ভাগ্যবশত, মাত্র কয়েকটি বৈশিষ্ট্য সমর্থিত। স্টাইলগুলি কোষে উত্তরাধিকারসূত্রে পাওয়া যায় না, এবং <col> দিয়ে কোষগুলিকে লক্ষ্য করার একমাত্র উপায় হল :has() রিলেশনাল নির্বাচকের মতো একটি জটিল নির্বাচক ব্যবহার করা।

যদি <table> এবং <colgroup> উভয়েরই ব্যাকগ্রাউন্ড কালার থাকে, তাহলে <colgroup> এর background-color উপরে থাকবে। টেবিল লেয়ারের স্কিমায় দেখানো অনুযায়ী, টেবিল, কলাম গ্রুপ, কলাম, রোগ্রুপ, সারি, যার শেষে এবং উপরে কোষ থাকবে। <td> এবং <th> এলিমেন্টগুলি <colgroup> অথবা <col> এলিমেন্টের বংশধর নয় এবং তাদের স্টাইলিং উত্তরাধিকার সূত্রে পায় না।

টেবিল স্ট্রাইপ করার জন্য, CSS স্ট্রাকচারাল সিলেক্টরগুলি কাজে আসে। উদাহরণস্বরূপ, tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);} টেবিলের বডির প্রতিটি বিজোড় সারিতে একটি স্বচ্ছ কালো যোগ করে, একই সাথে <colgroup> এ সেট করা ব্যাকগ্রাউন্ড এফেক্টগুলিকে শো-থ্রু করার অনুমতি দেয়।

টেবিলগুলি ডিফল্টভাবে প্রতিক্রিয়াশীল হয় না। বরং, ডিফল্টভাবে তাদের কন্টেন্ট অনুসারে আকার নির্ধারণ করা হয়। বিভিন্ন ডিভাইসে কার্যকরভাবে কাজ করার জন্য টেবিল লেআউট স্টাইলিং করার জন্য অতিরিক্ত ব্যবস্থা প্রয়োজন। আপনি যদি টেবিল উপাদানগুলির জন্য CSS display বৈশিষ্ট্য পরিবর্তন করেন , তাহলে ARIA role বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করুন। যদিও এটি অপ্রয়োজনীয় শোনাতে পারে, CSS display বৈশিষ্ট্য কিছু ব্রাউজারে অ্যাক্সেসিবিলিটি ট্রিকে প্রভাবিত করতে পারে।

বর্তমান তথ্য

টেবিল এলিমেন্টের অর্থগত অর্থ রয়েছে যা সহায়ক প্রযুক্তি ব্যবহার করে ব্যবহারকারীদের সারি এবং কলামের মধ্যে নেভিগেট করতে সাহায্য করে, হারিয়ে না গিয়ে। <table> এলিমেন্টটি উপস্থাপনার জন্য ব্যবহার করা উচিত নয়। যদি আপনার একটি তালিকার উপরে একটি শিরোনামের প্রয়োজন হয়, তাহলে একটি হেডার এবং একটি তালিকা ব্যবহার করুন। যদি আপনি অনেক কলামে কন্টেন্ট লেআউট করতে চান, তাহলে মাল্টি-কলাম লেআউট ব্যবহার করুন। যদি আপনি একটি গ্রিডে কন্টেন্ট লেআউট করতে চান, তাহলে CSS গ্রিড ব্যবহার করুন।

শুধুমাত্র তথ্যের জন্য একটি টেবিল ব্যবহার করুন।

এটিকে এভাবে ভাবুন: যদি আপনার ডেটা কোনও সভায় উপস্থাপনের জন্য একটি স্প্রেডশিট প্রয়োজন হয়, তাহলে <table> ব্যবহার করুন। আপনি যদি উপস্থাপনা সফ্টওয়্যারে উপলব্ধ বৈশিষ্ট্যগুলি ব্যবহার করতে চান, যেমন Google Slides বা PowerPoint, তাহলে সম্ভবত আপনার একটি বর্ণনা তালিকার প্রয়োজন হবে।

সংক্ষেপে: যদি আপনি ট্যাবুলার ডেটা উপস্থাপন না করেন, তাহলে <table> ব্যবহার করবেন না। যদি আপনি উপস্থাপনার জন্য একটি টেবিল ব্যবহার করেন, role="none" সেট করুন।

অনেক ডেভেলপার ফর্ম তৈরির জন্য টেবিল ব্যবহার করেন, কিন্তু এটি অপ্রয়োজনীয়। আপনার HTML ফর্ম সম্পর্কে জানা দরকার।

তোমার বোধগম্যতা পরীক্ষা করো।

টেবিল সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন।