Post No:09
আসসালামুয়ালাইকুম আশা করি সবাই অনেক ভালো আছেন আজকে আমরা Html এর Table ট্যাগ সম্পর্কে জানবো।
আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:
hashnode.com/@Labib
HTML table & Image ট্যাগ কি এবং এটি কিভাবে কাজ করে? চুলুন আমরা আজ জেনে নেই html table ট্যাগ সম্পর্কে ।
এই পোস্ট এ আমরা যা শিখতে যাচ্ছি,
HTML Table Tag কি?
HTML Image Tag কি?
কিভাবে এটি ব্যাবহার করতে পারি ?
HTML Table Tag
আপনি বিভিন্ন ওয়েব সাইটে টেবিল ভিত্তিক ডেটা দেখেছেন নিশ্চয়ই। বিশেষ করে খেলাধুলার সাইটের খেলোয়ারদের স্কোর, প্রোফাইল, সময়সূচি, শেয়ার বাজারের হিসাব ইত্যাদি কাজে টেবিল লাগে। টেবিলভিত্তিক ডেটা দেখানোর জন্য এইচটিএমএল এর বেশকিছু ট্যাগ আছে যেগুলি দিয়ে নানন ধরনের টেবিল তৈরী করা যায়। একটা টেবিল তৈরীতে প্রাথমিকভাবে ৩টি ট্যাগ লাগে
১. <table></table>
২. <tr></tr> (tr তে table row)
৩. <td></td> (td তে table data)
এই ৩টি ট্যাগ দিয়ে একটা টেবিল বানাতে পারবেন। পুরো grid সিস্টেম বানানো যাবে। row এবং column দিয়ে
tr দিয়ে row বা সারি এবং td দিয়ে column বা স্তম্ভ বানানো হয়। চলুন একটি সাধারণ টেবিল তৈরী করা যাক,
তার জন্যে আপনার প্রয়োজন হবে একটি HTML ফাইল এবং যেকোনো CODE এডিটর। একটি HTML FILE আপনার কোড এডিটর এ ওপেন করেন আর নিচের কোড গুলো লিখলে আপনি আউটপুটে নিচের মতো একটি টেবিল দেখতে পাবেন।
প্রদর্শন:
আমি দুটি row এবং ৩টি করে কলাম ব্যবহার করেছি আপনি ইচ্ছে মত row ব্যবহার করতে পারবেন।
টেবিল শিরোনাম
<th> নামে একটা ট্যাগ আছে এটা দেয়া টেবিলের হেডার বানানো যায় যেমন
প্রদর্শন:
দেখুন th এলিমেন্টের লেখাগুলি হেডিং আকারে দেখাচ্ছে।
তবে টেবিল দেয়ার উপযুক্ত নিয়ম হচ্ছে টেবিলের হেডার, বডি এবং ফুটার সহ দেয়া। এজন্য কিছু ট্যাগ আছে (thead, tbody, tfoot ) এগুলি ব্যবহার করলে গ্রামাটিকালি টেবিলটি সঠিক হয় এরুপ একটি উদাহরন:
প্রদর্শন:
<tfoot> ট্যাগ <tbody> এর আগে দেয়া হয়েছে, আর এভাবেই ব্রাউজার সঠিকভাবে দেখাতে পারে।(দেখুন tfoot এর ডেটা নিচেই দেখাচ্ছে)
উপরের টেবিলগুলিতে বর্ডার না দেয়াতে ভাল দেখাচ্ছে না এজন্য <table> এলিমেন্টে বেশ কয়েকটি এট্রিবিউট আছে যেগলি দিয়ে টেবিল সুন্দর সাজানো যায়। যেমন টেবিলে বর্ডার দিতে চাইলে <table border="1"> এভাবে দিবেন ফলে টেবিলটি কিছুটা সুন্দর লাগবে আবার আছে cellpadding এবং cellspacing এদুটি দিয়ে cell বা অংশগুলির মধ্যে যথাক্রমে প্যাডিং (কনটেন্ট থেকে বর্ডারের দুরত্ব) এবং দুরত্ব বাড়ানো যায় যেমন উপরের টেবিলে <table border="1" cellpadding="10"> এটা যোগ করে আমাদের Code এডিটরে রান করিয়ে দেখতে পারেন।
rowspan এবং colspan
td, th এ rowspan এবং colspan এট্রিবিউট দুটি ব্যবহার করে জটিল ধরনের টেবিল বানানো যায়্। rowspan এর সংখ্যাত্নক মান দিয়ে ঠিক করা যায় cell টি কতটি row এর সমান হবে যেমন :
প্রদর্শন:
কোথায় th, td ইত্যাদি দিয়েছি ভালভাবে লক্ষ্য করুন নাহলে কিছুই বুঝবেননা। দেখুন দুটি row এর জায়গা কিভাবে একটি cell th(Web Language) দিয়ে দখল করা হয়েছে, rowspan দিয়ে।
colspan এর সংখ্যাত্নক মান দিয়ে ঠিক করা যায় cell টি কতটি col এর সমান হবে যেমন :
ব্যাস এবার রান করিয়ে দেখুন একটি কলামেই কাজ হয়ে গেছে।
প্রদর্শন:
** একটা cell এর ভিতর (td এর ভিতর) যেকোন এইচটিএমএল এলিমেন্ট রাখতে পারেন। img, p বা যেকোন কিছু।
** গুরত্বপূর্ন এট্রিবিউটগুলিই শুধু আলোচনা করা হচ্ছে, এগুলি ছাড়াও align, bgcolor ইত্যাদি কমন এট্রিবিউটগুলি ব্যবহার করা যাবে।
HTML img Tag
আমরা আমাদের ওয়েবসাইট এ যে ইমেজ গুলা দেখতে পাই তা মূলত img ট্যাগ এর মাধ্যমে নেয়া হয়। চলুন দেখে নেই কিভাবে img ট্যাগের মাধ্যমে ইমেজকে ওয়েবসাইটে দেখানো হয়। এর জন্যে আপনাকে একটি html ফাইল যেকোনো কোড এডিটর এ ওপেন করে ওই ফাইল এ নিচের মতো করে ইমেজ ট্যাগটি ব্যাবহার করতে হবে। তবে ইমেজ এর img ট্যাগে আমাদের একটি attribute ব্যাবহার করতে হয়। তাহলো src attribute , মূলত এই src এই আপনার ইমেজ টি বা ইমেজ লিংকটি দেখিয়ে দিতে হয়। আমরা প্রাকটিক্যাল দেখি তাহলে আরো ক্লিয়ার হতে পারবো।
Output:
