এই লেখাটি এইচটিএমএল-এ টেবিল ঘরের ভিতরে একটি ছবি যোগ করার পদ্ধতি ব্যাখ্যা করবে।
কিভাবে HTML এ টেবিল সেলের ভিতরে একটি ছবি যোগ করবেন?
এইচটিএমএল ' ” ট্যাগটি একটি টেবিলের ঘরে একটি চিত্র সন্নিবেশ করার জন্য ব্যবহার করা হয়।
বাক্য গঠন
টেবিল ঘরের ভিতরে একটি চিত্র এম্বেড করতে সিনট্যাক্স অনুসরণ করুন:
< td < img src = '' সবকিছু = '' প্রস্থ = '' < / td >
এখানে:
- '
” উপাদানটি টেবিলের ঘর নির্দেশ করে যেখানে চিত্রটি যোগ করতে হবে। - '
” ট্যাগটি চিত্রটি নির্দিষ্ট করতে ব্যবহার করা হয়।
- ' src ” অ্যাট্রিবিউট ইমেজের পাথ সেট করে।
- ' সবকিছু ” ইমেজ লোড করতে ব্যর্থ হলে স্ক্রিনে প্রদর্শিত পাঠ্যকে বোঝায়।
- ' প্রস্থ ” চিত্রের প্রস্থ নির্ধারণ করে।
উদাহরণ
HTML ফাইলে, প্রদত্ত নির্দেশাবলী অনুসরণ করে একটি টেবিল তৈরি করুন:
- ' <টেবিল> একটি টেবিল তৈরি করতে উপাদান ব্যবহার করা হয়।
- '
” উপাদান একটি সারি নির্দিষ্ট করে। - ' <থ> ' একটি শিরোনাম সামঞ্জস্য করে যেখানে ' colspan ” বৈশিষ্ট্য নির্দেশ করে যে একটি কক্ষ কতগুলি কলাম আবৃত করা উচিত৷
- '
ডেটার জন্য টেবিল সেল তৈরি করে। দ্য ' এই ট্যাগের মধ্যে প্রয়োজনীয় গুণাবলী সহ ট্যাগগুলি একটি টেবিল কক্ষে চিত্রগুলি এম্বেড করার জন্য সন্নিবেশিত করা হয়েছে: < টেবিল >
< tr >
< ম colspan = '3' শৈলী = 'ফন্টের আকার: 28px;' ফলমূল ও শাকসবজি < / ম >
< / tr >
< tr >
< ম >নাম< / ম >
< ম শৈলী = 'প্রস্থ: 250px;' > ছবি< / ম >
< ম > ফল / সবজি < / ম >
< / tr >
< tr >
< td >আপেল < / td >
< td < img src = '/images/apples.jpg' সবকিছু = 'আপেল' প্রস্থ = '200' < / td >
< td >ফল < / td >
< / tr >
< tr >
< td >গাজর < / ম >
< td < img src = '/images/carrot.jpg' সবকিছু = 'গাজর' প্রস্থ = '200' < / ম >
< td > সবজি < / ম >
< / tr >
< tr >
< td >কমলা < / ম >
< td < img src = '/images/orang.jpg' সবকিছু = 'কমলা' প্রস্থ = '200' < / ম >
< td >ফল < / ম >
< / tr >
< / টেবিল >এটি লক্ষ্য করা যায় যে এইচটিএমএল টেবিলটি সফলভাবে এমবেড করা চিত্রগুলির সাথে তৈরি করা হয়েছে:
সিএসএস
এখন, আমরা টেবিলের লেআউট সেট করতে ব্যবহৃত CSS বৈশিষ্ট্যগুলি নিয়ে আলোচনা করব।
স্টাইল 'টেবিল' উপাদান
প্রথমে, অ্যাক্সেস করুন ' <টেবিল> ট্যাগ নামের দ্বারা উপাদান এবং নিম্নলিখিত বৈশিষ্ট্য প্রয়োগ করুন:
টেবিল {
পাঠ্য-সারিবদ্ধ : কেন্দ্র ;
প্রস্থ : 800px ;
সীমান্ত-পতন : পতন ;
মার্জিন : স্বয়ংক্রিয় ;
অক্ষরের আকার : 20px ;
}উপরের কোডের বর্ণনা নীচে দেওয়া হল:
- ' পাঠ্য-সারিবদ্ধ ” পাঠ্য সারিবদ্ধকরণ সেট করে।
- ' প্রস্থ ' টেবিলের প্রস্থ নির্ধারণ করে।
- ' সীমান্ত-পতন বর্ডার ভেঙ্গে গেছে কি না সম্পত্তি তা নির্ধারণ করে।
- ' মার্জিন ” টেবিলের চারপাশে স্থান যোগ করে।
- ' অক্ষরের আকার ” টেবিলের পাঠ্য ফন্টের আকার নির্ধারণ করে।
স্টাইল 'th' এবং 'td' উপাদান
ম , td {
সীমান্ত : 1px কঠিন বেগুনি ;
}এখানে ' সীমান্ত ” সম্পত্তি সীমানা প্রস্থ, শৈলী এবং রঙের জন্য মান নির্দিষ্ট করে উপাদানগুলির চারপাশে সীমানা সমন্বয় করে।
আউটপুট
এই পোস্টটি এইচটিএমএল-এ টেবিলের ঘরে ইমেজ সন্নিবেশ করা সম্পর্কে।
উপসংহার
ভিতরে একটি ছবি যোগ করতে ' <টেবিল> ' সেল, ' ব্যবহার করুন
'HTML এর মধ্যে ট্যাগ'
' উপাদান। ' ' উপাদানটি নির্দিষ্ট করে ' src ” ইমেজ URL প্রদান করতে বৈশিষ্ট্য. আরও নির্দিষ্টভাবে, ছবির আকার সামঞ্জস্য করতে, যোগ করুন ' উচ্চতা ' এবং ' প্রস্থ '
' ট্যাগের মধ্যে বৈশিষ্ট্যগুলি। এই ব্লগটি এইচটিএমএল টেবিলের ঘরে একটি ছবি যুক্ত করার পদ্ধতিটি চিত্রিত করেছে।
- '