সারি এবং কলাম সহ ট্যাবুলার ডেটা প্রদর্শনের জন্য HTML টেবিল ব্যবহার করা হয়। একটি <table> ব্যবহার করার সিদ্ধান্তটি আপনার উপস্থাপনা করা সামগ্রী এবং সেই সামগ্রীর সাথে সম্পর্কিত আপনার ব্যবহারকারীদের চাহিদার উপর ভিত্তি করে হওয়া উচিত। যদি ডেটা উপস্থাপন করা হয়, তুলনা করা হয়, সাজানো হয়, গণনা করা হয় বা ক্রস-রেফারেন্স করা হয়, তাহলে <table> সম্ভবত সঠিক পছন্দ। আপনি যদি কেবল অ-ট্যাবুলার বিষয়বস্তু সুন্দরভাবে সাজাতে চান, যেমন থাম্বনেইল চিত্রের একটি বড় গ্রুপ, টেবিল উপযুক্ত নয়: পরিবর্তে, চিত্রগুলির একটি তালিকা তৈরি করুন এবং CSS দিয়ে গ্রিড স্টাইল করুন।
এই বিভাগে, আমরা টেবিল তৈরির সমস্ত উপাদান নিয়ে আলোচনা করতে যাচ্ছি, সাথে কিছু অ্যাক্সেসিবিলিটি এবং ব্যবহারযোগ্যতা বৈশিষ্ট্যগুলি যা আপনি সারণী ডেটা উপস্থাপন করার সময় বিবেচনা করবেন। যদিও শিখুন HTML মৌলিকভাবে CSS সম্পর্কে নয়, এবং CSS শেখার জন্য একটি সম্পূর্ণ কোর্স রয়েছে, আমরা কিছু টেবিল-নির্দিষ্ট CSS বৈশিষ্ট্য কভার করব।
টেবিল উপাদান, ক্রমে
<table> ট্যাগ টেবিলের সমস্ত উপাদান সহ টেবিলের বিষয়বস্তুকে আবৃত করে। একটি <table> এর অন্তর্নিহিত ARIA ভূমিকা হল table ; সহায়ক প্রযুক্তিগুলি জানে যে এই উপাদানটি সারি এবং কলামে সাজানো ডেটা ধারণকারী একটি টেবিল কাঠামো। যদি টেবিলটি একটি নির্বাচনের অবস্থা বজায় রাখে, দ্বি-মাত্রিক নেভিগেশন থাকে বা ব্যবহারকারীকে সেল অর্ডার পুনর্বিন্যাস করার অনুমতি দেয়, role="grid" সেট করুন। যদি grid সারিগুলি প্রসারিত করা যায় এবং ভেঙে ফেলা যায়, তাহলে এর পরিবর্তে role="treegrid" ব্যবহার করুন।
<table> এর ভিতরে, আপনি টেবিল হেডার ( <thead> ), টেবিল বডি ( <tbody> ), এবং ঐচ্ছিকভাবে, টেবিল ফুটার ( <tfoot> ) পাবেন। এর প্রত্যেকটি টেবিল সারি দিয়ে তৈরি ( <tr> )। সারিগুলিতে টেবিলের শিরোনাম ( <th> ) এবং টেবিল ডেটা ( <td> ) কোষ রয়েছে যা ঘুরে, সমস্ত ডেটা ধারণ করে। DOM-এ, এর যেকোনো একটির আগে, আপনি দুটি অতিরিক্ত বৈশিষ্ট্য খুঁজে পেতে পারেন: টেবিল ক্যাপশন ( <caption> ) এবং কলাম গ্রুপ ( <colgroup> )। <colgroup> এর একটি span অ্যাট্রিবিউট আছে কি না তার উপর নির্ভর করে, এতে নেস্টেড টেবিল কলাম ( <col> ) উপাদান থাকতে পারে।
টেবিলের বাচ্চারা ক্রমানুসারে:
-
<caption>উপাদান -
<colgroup>উপাদান -
<thead>উপাদান -
<tbody>উপাদান -
<tfoot>উপাদান
আমরা <table> উপাদানের শিশুদের কভার করব, যেগুলো সবই ঐচ্ছিক কিন্তু প্রস্তাবিত, তারপর সারি, টেবিল হেডার সেল, এবং টেবিল ডেটা সেলগুলি দেখুন। <colgroup> শেষ কভার করা হবে।
টেবিল ক্যাপশন
একটি নেটিভ, শব্দার্থিক উপাদান হওয়ায়, <caption> একটি টেবিলে একটি নাম দেওয়ার পছন্দের পদ্ধতি। <caption> একটি বর্ণনামূলক, প্রোগ্রামগতভাবে যুক্ত টেবিল শিরোনাম প্রদান করে। এটি ডিফল্টরূপে সমস্ত ব্যবহারকারীর কাছে দৃশ্যমান এবং উপলব্ধ৷
<caption> উপাদানটি <table> এলিমেন্টে থাকা প্রথম উপাদান হওয়া উচিত। এটি সহ সমস্ত ব্যবহারকারীকে পার্শ্ববর্তী পাঠ্য না পড়েই টেবিলের উদ্দেশ্য অবিলম্বে জানতে দেয়৷ বিকল্পভাবে, আপনি ক্যাপশন হিসাবে একটি অ্যাক্সেসযোগ্য নাম প্রদান করতে <table> -এ aria-label বা aria-labelledby ব্যবহার করতে পারেন। <caption> উপাদানটির কোনো উপাদান-নির্দিষ্ট বৈশিষ্ট্য নেই।
ক্যাপশনটি টেবিলের বাইরে দেখা যাচ্ছে। ক্যাপশনের অবস্থান CSS caption-side প্রপার্টি দিয়ে সেট করা যেতে পারে, যা অবহেলিত align বৈশিষ্ট্য ব্যবহার করার চেয়ে একটি ভাল অনুশীলন। এটি উপরে এবং নীচে ক্যাপশন সেট করতে পারে। inline-start এবং inline-end সহ বাম এবং ডান পাশের অবস্থান এখনও সম্পূর্ণরূপে সমর্থিত নয়। শীর্ষ ডিফল্ট ব্রাউজার উপস্থাপনা.
বিশেষভাবে, ডেটা টেবিলে স্পষ্ট শিরোনাম এবং একটি ক্যাপশন থাকা উচিত এবং প্রায় স্ব-ব্যাখ্যামূলক হতে যথেষ্ট সহজ। মনে রাখবেন যে সমস্ত ব্যবহারকারীর একই জ্ঞানীয় ক্ষমতা নেই। যখন টেবিলটি "বিন্দু তৈরি করে" বা অন্যথায় ব্যাখ্যার প্রয়োজন হয়, তখন টেবিলের মূল পয়েন্ট বা ফাংশনের একটি সংক্ষিপ্ত সারসংক্ষেপ প্রদান করুন। সেই সারাংশটি কোথায় রাখা হয়েছে তা নির্ভর করে এর দৈর্ঘ্য এবং জটিলতার উপর। সংক্ষিপ্ত হলে, ক্যাপশনের ভিতরের পাঠ্য হিসাবে এটি ব্যবহার করুন। যদি দীর্ঘ হয়, ক্যাপশনে এটির সংক্ষিপ্তসার দিন এবং সারণীর পূর্ববর্তী অনুচ্ছেদে সারাংশটি প্রদান করুন, দুটিকে 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: collapse সেট করা থাকলে Border-spacing কোনো প্রভাব ফেলবে না। যদি border-collapse: separate; সেট করা আছে, empty-cells: hide; . স্টাইলিং টেবিল সম্পর্কে আরও জানতে, এখানে টেবিল-সম্পর্কিত CSS শৈলীগুলির একটি ইন্টারেক্টিভ স্লাইডেক রয়েছে।
উদাহরণগুলিতে, কিছু বৈশিষ্ট্য আরও স্পষ্ট করতে আমরা টেবিলে একটি সীমানা এবং CSS সহ প্রতিটি পৃথক কক্ষ যুক্ত করেছি:
এই উদাহরণে, আমাদের কাছে একটি ক্যাপশন, একটি টেবিল হেডার এবং একটি টেবিল বডি রয়েছে। হেডারে একটি সারি রয়েছে যেখানে তিনটি হেডার <th> সেল রয়েছে, যার ফলে তিনটি কলাম তৈরি হয়। বডিতে তিনটি সারি ডেটা রয়েছে: প্রথম ঘরটি সারির জন্য একটি হেডার সেল, তাই আমরা <td> এর পরিবর্তে <th> ব্যবহার করি।
কলাম হেডার বা রো হেডারের অন্তর্নিহিত ARIA ভূমিকা সহ <th> সেলের শব্দার্থিক অর্থ রয়েছে। এটি গণনাকৃত scope অ্যাট্রিবিউটের মানের উপর নির্ভর করে কলাম বা টেবিল ঘরের সারির শিরোনাম হিসাবে ঘরকে সংজ্ঞায়িত করে। scope স্পষ্টভাবে সেট করা না থাকলে ব্রাউজারটি ডিফল্ট col বা row থাকবে। যেহেতু আমরা শব্দার্থিক মার্কআপ ব্যবহার করেছি, 1956 সেলটিতে দুটি শিরোনাম রয়েছে: ইয়ার এবং লু মিনিয়স। এই সমিতি আমাদের বলে যে "1956" হল "Lou Minious" এর স্নাতকের "বছর"। এই উদাহরণে, আমরা পুরো টেবিলটি দেখতে পাচ্ছি, অ্যাসোসিয়েশনটি দৃশ্যত স্পষ্ট। হেডার কলাম বা সারি দৃশ্যের বাইরে স্ক্রোল করলেও <th> ব্যবহার করা অ্যাসোসিয়েশন প্রদান করে। আমরা স্পষ্টভাবে <th scope="col">Year</th> এবং <th scope="row">Lou Minious</th> সেট করতে পারতাম কিন্তু এই মত একটি সাধারণ টেবিলের সাথে, গণনাকৃত ডিফল্ট মানগুলি কাজ করে। scope জন্য অন্যান্য মানগুলির মধ্যে রয়েছে rowgroup এবং colgroup , যা জটিল টেবিলের সাথে উপযোগী।
কোষ একত্রিত করা
MS Excel, Google Sheets, এবং Numbers-এর মতই, একাধিক কোষকে একক কক্ষে যোগ করা সম্ভব। এই HTML দিয়ে করা হয়! একটি একক সারির মধ্যে দুই বা ততোধিক সংলগ্ন কক্ষকে একত্রিত করতে 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 এর সাথে কলামের জন্য একটি প্রস্থ নির্ধারণ সহ সীমিত কলাম স্টাইলিংয়ের অনুমতি দেয়।
<col> শৈলী একটি কলামকে স্টাইল করবে যতক্ষণ না কোন <td> বা <th> শৈলী সেই স্টাইলকে ওভাররাইড করে। উদাহরণস্বরূপ, যখন <colspan> একটি টেবিলের কিছু সারিতে ঘরগুলিকে একত্রিত করতে ব্যবহার করা হয় তবে সবগুলি নয়, আপনি নিশ্চিত হতে পারবেন না যে একটি নির্বাচক যেমন tr > *:nth-child(8) , যা এর 8 তম সন্তান নির্বাচন করে প্রতিটি সারি, 8 তম কলামটিকে সম্পূর্ণভাবে হাইলাইট করবে বা বেশ কয়েকটি সারির জন্য 8 তম কলাম হাইলাইট করবে, তবে 9 তম এবং 10 তম কলামের কক্ষগুলিকে বিচ্ছিন্ন করার সাথে, কোন সারি বা কলাম কক্ষগুলিকে একত্রিত করা হয়েছে তার উপর নির্ভর করে৷
দুর্ভাগ্যবশত, শুধুমাত্র কয়েকটি বৈশিষ্ট্য সমর্থিত, শৈলীগুলি কোষে উত্তরাধিকারসূত্রে প্রাপ্ত হয় না, এবং টার্গেটিং সেলগুলিতে <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 প্রদর্শন বৈশিষ্ট্য পরিবর্তন করেন , তাহলে ARIA role বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করুন৷ যদিও এটি অপ্রয়োজনীয় মনে হতে পারে, CSS display বৈশিষ্ট্য কিছু ব্রাউজারে অ্যাক্সেসিবিলিটি ট্রিকে প্রভাবিত করতে পারে।
তথ্য উপস্থাপন
সারণী উপাদানগুলির শব্দার্থিক অর্থ রয়েছে যা সহায়ক প্রযুক্তি ব্যবহার করে 'হারিয়ে' না গিয়ে সারি এবং কলামগুলির মাধ্যমে নেভিগেট করতে সক্ষম হয়৷ উপস্থাপনার জন্য <table> উপাদান ব্যবহার করা উচিত নয়। আপনার যদি একটি তালিকার উপরে একটি শিরোনাম প্রয়োজন হয়, একটি শিরোনাম এবং একটি তালিকা ব্যবহার করুন। আপনি যদি অনেক কলামে বিষয়বস্তু লেআউট করতে চান, বহু-কলাম লেআউট ব্যবহার করুন। আপনি যদি একটি গ্রিডে বিষয়বস্তু রাখতে চান, CSS গ্রিড ব্যবহার করুন। শুধুমাত্র ডেটার জন্য একটি টেবিল ব্যবহার করুন। এটিকে এভাবে ভাবুন: যদি আপনার ডেটা একটি মিটিং এ উপস্থাপন করার জন্য একটি স্প্রেডশীটের প্রয়োজন হয়, তাহলে <table> ব্যবহার করুন। আপনি যদি কীনোট বা পাওয়ারপয়েন্টের মতো উপস্থাপনা সফ্টওয়্যারগুলিতে উপলব্ধ বৈশিষ্ট্যগুলি ব্যবহার করতে চান তবে আপনার সম্ভবত একটি বর্ণনা তালিকা প্রয়োজন৷
টেবিলের কলাম সাজানো হল JavaScript-এর পরিধি, ব্যবহারকারীদের জানাতে আপনার শিরোনামগুলিকে মার্ক-আপ করা কলামটি সাজানোর যোগ্য HTML এর পরিধি। আপনার ব্যবহারকারীদের জানান যে সারণি কলামগুলি আইকনোগ্রাফি সহ আরোহী, অবরোহ, বা সাজানো ছাড়া বাছাই করা যায়। বর্তমানে সাজানো কলামে সাজানোর দিকনির্দেশের গণনাকৃত মান সহ aria-sort বৈশিষ্ট্য অন্তর্ভুক্ত করা উচিত। <caption> বিনীতভাবে অ্যারিয়া-লাইভ এবং গতিশীলভাবে আপডেট করা একটি স্প্যান এবং স্ক্রিন রিডার ব্যবহারকারীদের কাছে দৃশ্যমান হওয়ার মাধ্যমে সাজানোর জন্য আপডেটগুলি ঘোষণা করতে পারে। হেডারের বিষয়বস্তুতে ক্লিক করে কলামটি সাজানো যায়, হেডারের বিষয়বস্তু একটি <button> হওয়া উচিত।
আপনি যদি ট্যাবুলার ডেটা উপস্থাপন না করেন তবে একটি <table> ব্যবহার করবেন না। আপনি যদি উপস্থাপনার জন্য একটি টেবিল ব্যবহার করেন, role="none" সেট করুন।
অনেক ডেভেলপার ফর্ম লেয়ার করার জন্য টেবিল ব্যবহার করে কিন্তু এর কোন প্রয়োজন নেই। কিন্তু আপনাকে এইচটিএমএল ফর্ম সম্পর্কে জানতে হবে, তাই আমরা পরবর্তীতে এটি কভার করব।
আপনার উপলব্ধি পরীক্ষা করুন
টেবিল আপনার জ্ঞান পরীক্ষা.
শিরোনামগুলি কোষগুলিকে চিহ্নিত করতে কোন উপাদান ব্যবহার করা হয়?
<header><caption><th>কোন তথ্য টেবিলের সাথে লেআউটের জন্য উপযুক্ত হতে পারে?
<dl> এর জন্য আরও উপযুক্ত।<ul> এর জন্য আরও উপযুক্ত।