টেবিল ক্যাপশনের গুরুত্ব কি?
টেবিলে শিরোনাম দেওয়ার জন্য 'টেবিল ক্যাপশন' ব্যবহার করা হয় যাতে ব্যবহারকারী প্রতিটি টেবিলের অর্থ কী এবং এটির মধ্যে থাকা ডেটা কীভাবে ব্যবহার করতে হয় তা নির্ধারণ করতে পারে। ক্যাপশনগুলি তাদের মধ্যে থাকা ডেটাকে আরও অ্যাক্সেসযোগ্য করে তুলতে একটি ওয়েবপৃষ্ঠার টেবিলগুলিকে নম্বর দিতেও সহায়তা করতে পারে।
ক্যাপশনগুলি একটি নথি বা ওয়েবপৃষ্ঠার প্রতিটি টেবিলের সঠিক প্রসঙ্গ দেয় যেখানে প্রচুর সংখ্যক টেবিল রয়েছে। তাছাড়া, স্ট্রাকচার্ড ক্যাপশনগুলি নিশ্চিত করে যে পাঠকরা দ্রুত বুঝতে পারে যে প্রতিটি টেবিলের মধ্যে কোন ডেটা রয়েছে।
কিভাবে Tailwind CSS এ একটি টেবিল ক্যাপশন ব্যবহার করবেন?
Tailwind CSS-এ, একটি টেবিলে একটি ক্যাপশন যোগ করা হয় ' <ক্যাপশন> ট্যাগ এই ক্যাপশনটি একটি শিরোনাম এবং টেবিলের ডেটা সম্পর্কে আরও তথ্য নির্দিষ্ট করে৷
উদাহরণ: টেবিলের উপরের এবং নীচে উভয় দিকে একটি টেবিল ক্যাপশন যোগ করা
নিম্নলিখিত কোডে, আমরা টেবিলের উপরের এবং নীচের উভয় দিকে একটি 'ক্যাপশন' যুক্ত করব:
< টেবিল >
< টেবিল ক্লাস = 'মিনিট-ওয়া-ফুল বর্ডার বর্ডার-ধূসর-300 ডিভাইড-ওয়াই ডিভাইড-গ্রে-300' >
< হেড >
< tr >
< ম ক্লাস = 'py-2 px-4 bg-gray-100 বর্ডার-b' >
নাম
< / ম >
< ম ক্লাস = 'py-2 px-4 bg-gray-100 বর্ডার-b' >
ইমেইল
< / ম >
< ম ক্লাস = 'py-2 px-4 bg-gray-100 বর্ডার-b' >
আইডি
< / ম >
< ম ক্লাস = 'py-2 px-4 bg-gray-100 বর্ডার-b' >
যোগাযোগ
< / ম >
< / tr >
< / হেড >
< tbody >
< tr >
< td ক্লাস = 'py-2 px-4 বর্ডার-b' > জেমস < / td >
< td ক্লাস = 'py-2 px-4 বর্ডার-b' > james@tsl.com < / td >
< td ক্লাস = 'py-2 px-4 বর্ডার-b' > 61101-1234567-8 < / td >
< td ক্লাস = 'py-2 px-4 বর্ডার-b' > 123-456-7890 < / td >
< / tr >
< tr >
< td ক্লাস = 'py-2 px-4 বর্ডার-b' > মাইকেল < / td >
< td ক্লাস = 'py-2 px-4 বর্ডার-b' > michael@tsl.com < / td >
< td ক্লাস = 'py-2 px-4 বর্ডার-b' > 61101-8765432-1 < / td >
< td ক্লাস = 'py-2 px-4 বর্ডার-b' > 098-765-4321 < / td >
< / tr >
< tr >
< td ক্লাস = 'py-2 px-4 বর্ডার-b' > ডেভিড < / td >
< td ক্লাস = 'py-2 px-4 বর্ডার-b' > David@TSL.com < / td >
< td ক্লাস = 'py-2 px-4 বর্ডার-b' > 54791-1234567-8 < / td >
< td ক্লাস = 'py-2 px-4 বর্ডার-b' > 123-786-4290 < / td >
< / tr >
< tr >
< td ক্লাস = 'py-2 px-4 বর্ডার-b' > পিটার < / td >
< td ক্লাস = 'py-2 px-4 বর্ডার-b' > peter@tsl.com < / td >
< td ক্লাস = 'py-2 px-4 বর্ডার-b' > 54300-1234567-8 < / td >
< td ক্লাস = 'py-2 px-4 বর্ডার-b' > 611-239-7890 < / td >
< / tr >
< / tbody >
< ক্যাপশন >
কর্মচারীদের ব্যক্তিগত তথ্য
< / ক্যাপশন >
< / টেবিল >
< ক্যাপশন >
কোম্পানির নাম
< / ক্যাপশন >
উপরের কোডে এই পদক্ষেপগুলি অনুসরণ করুন:
- ব্যবহার করে একটি টেবিল তৈরি করুন ' <টেবিল> ট্যাগ
- ইউটিলিটি ক্লাসের মাধ্যমে টেবিল ফরম্যাটিং নির্দিষ্ট করুন।
- 'নাম', 'ইমেল', 'আইডি', এবং 'যোগাযোগ' এর সারণী শিরোনাম সংজ্ঞায়িত করুন ট্যাগ
- টেবিলের মধ্যে সমস্ত 4 জনের জন্য ডেটা সংজ্ঞায়িত করুন “ ' এবং '
' ট্যাগ. - তারপর, ' ব্যবহার করে টেবিলের ক্যাপশনটি নির্দিষ্ট করুন <ক্যাপশন> ট্যাগ করুন এবং টেবিলটি বন্ধ করুন।
- সবশেষে, আমরা টেবিলের নীচে একটি টেবিল ক্যাপশন প্রয়োগ করতে শেষে আরেকটি “
” ট্যাগ যোগ করি। - বিঃদ্রঃ : এটি এমন যে টেবিলের শীর্ষে থাকা টেবিলের ক্যাপশনটি “
” ট্যাগের মধ্যে নির্দিষ্ট করা হয়েছে যেখানে নীচের ক্যাপশনটি টেবিলের ক্লোজিং ট্যাগের পরে নির্দিষ্ট করা দরকার।
আউটপুট
উপসংহার
টেবিলের ক্যাপশনগুলি টেবিল এবং সেগুলির মধ্যে থাকা ডেটা সম্পর্কে আরও তথ্য দেওয়ার জন্য গুরুত্বপূর্ণ৷ ফলস্বরূপ, ব্যবহারকারী এবং পাঠক উভয়ের জন্য টেবিলের অ্যাক্সেসযোগ্যতা বহুগুণ বৃদ্ধি পেয়েছে। ক্যাপশনটি একটি সংক্ষিপ্ত পদ্ধতিতে একটি টেবিল সম্পর্কিত অতিরিক্ত তথ্য প্রদান করে যা অনলাইন বিবরণেও দেখা যেতে পারে।
- টেবিলের মধ্যে সমস্ত 4 জনের জন্য ডেটা সংজ্ঞায়িত করুন “ ' এবং '