এটি একটি টেবিল সংজ্ঞায়িত করে।
এটি একটি টেবিলে একটি সারি সংজ্ঞায়িত করে।
এটি একটি টেবিলে একটি হেডার সেল সংজ্ঞায়িত করে।
এটি একটি টেবিলে একটি ঘর সংজ্ঞায়িত করে।
এটি টেবিলের ক্যাপশন সংজ্ঞায়িত করে।
এটি বিন্যাস করার জন্য একটি টেবিলে এক বা একাধিক কলামের একটি গ্রুপ নির্দিষ্ট করে।
প্রতিটি কলামের জন্য কলামের বৈশিষ্ট্য নির্দিষ্ট করতে এটি
উপাদানের সাথে ব্যবহার করা হয়।
এটি একটি টেবিলে শরীরের বিষয়বস্তু গ্রুপ করতে ব্যবহৃত হয়।
এটি একটি টেবিলে শিরোনাম বিষয়বস্তু গ্রুপ করতে ব্যবহৃত হয়।
এটি একটি টেবিলে ফুটার বিষয়বস্তু গ্রুপ করতে ব্যবহৃত হয়।
HTML টেবিলের উদাহরণ
আসুন HTML টেবিল ট্যাগের উদাহরণ দেখি। এটির আউটপুট উপরে দেখানো হয়েছে।
< table > < tr > < th > First_Name th > < th > Last_Name th > < th > Marks th > tr > < tr > < td > Sonoo td > < td > Jaiswal td > < td > 60 td > tr > < tr > < td > James td > < td > William td > < td > 80 td > tr > < tr > < td > Swati td > < td > Sironi td > < td > 82 td > tr > < tr > < td > Chetna td > < td > Singh td > < td > 72 td > tr > table >
আউটপুট:
প্রথম_নাম শেষ_নাম চিহ্ন
সোনু
জয়সওয়াল
60
জেমস
উইলিয়াম
80
স্বাতী
সিরোনি
82
চেতনা
সিং
72
উপরের html টেবিলে, 5টি সারি এবং 3টি কলাম = 5*3 = 15টি মান রয়েছে।
বর্ডার সহ HTML টেবিল
HTML টেবিলের জন্য সীমানা নির্দিষ্ট করার দুটি উপায় আছে।
HTML এ টেবিলের বর্ডার এট্রিবিউট দ্বারা
CSS এ বর্ডার প্রপার্টি দ্বারা
1) HTML বর্ডার অ্যাট্রিবিউট
আপনি বর্ডার নির্দিষ্ট করতে HTML এ টেবিল ট্যাগের বর্ডার অ্যাট্রিবিউট ব্যবহার করতে পারেন। কিন্তু এখন এটি সুপারিশ করা হয় না।
< table border = “1" > < tr > < th > First_Name th > < th > Last_Name th > < th > Marks th > tr > < tr > < td > Sonoo td > < td > Jaiswal td > < td > 60 td > tr > < tr > < td > James td > < td > William td > < td > 80 td > tr > < tr > < td > Swati td > < td > Sironi td > < td > 82 td > tr > < tr > < td > Chetna td > < td > Singh td > < td > 72 td > tr > table >
আউটপুট:
First_Name
Last_Name
Marks
সোনু জয়সওয়াল 60 জেমস উইলিয়াম 80 স্বাতী সিরোনি 82 চেতনা সিং 72
2) CSS বর্ডার সম্পত্তি
এখন টেবিলে সীমানা নির্দিষ্ট করতে CSS-এর বর্ডার প্রপার্টি ব্যবহার করার পরামর্শ দেওয়া হচ্ছে।
< style > table, th, td { border: 1px solid black; } style >
আপনি সীমানা-পতন সম্পত্তি দ্বারা একটি সীমানায় সমস্ত সীমানা ভেঙে ফেলতে পারেন। এটি সীমানাকে একটিতে ভেঙ্গে ফেলবে।
< style > table, th, td { border: 2px solid black; border-collapse: collapse; } style >
আউটপুট:
Name
Last Name
Marks
সোনু জয়সওয়াল 60 জেমস উইলিয়াম 80 স্বাতী সিরোনি 82 চেতনা সিং 72
সেল প্যাডিং সহ HTML টেবিল
আপনি দুটি উপায়ে টেবিল হেডার এবং টেবিল ডেটার জন্য প্যাডিং নির্দিষ্ট করতে পারেন:
HTML এ টেবিলের সেলপ্যাডিং বৈশিষ্ট্য দ্বারা
CSS এ প্যাডিং সম্পত্তি দ্বারা
HTML টেবিল ট্যাগের সেলপ্যাডিং অ্যাট্রিবিউট এখন অপ্রচলিত। সিএসএস ব্যবহার করার পরামর্শ দেওয়া হয়। তো চলুন CSS এর কোড দেখি।
< style > table, th, td { border: 1px solid pink; border-collapse: collapse; } th, td { padding: 10px; } style >
আউটপুট:
Name
Last Name
Marks
সোনু জয়সওয়াল 60 জেমস উইলিয়াম 80 স্বাতী সিরোনি 82 চেতনা সিং 72
HTML টেবিল প্রস্থ:
আমরা CSS width প্রপার্টি ব্যবহার করে HTML টেবিলের প্রস্থ নির্দিষ্ট করতে পারি। এটি পিক্সেল বা শতাংশে নির্দিষ্ট করা যেতে পারে।
আমরা আমাদের প্রয়োজন অনুযায়ী আমাদের টেবিলের প্রস্থ সামঞ্জস্য করতে পারি। প্রস্থ সহ টেবিল প্রদর্শনের উদাহরণ নিচে দেওয়া হল।
table{ width: 100%; }
উদাহরণ:
> < html > < head > < title > table title > < style > table{ border-collapse: collapse; width: 100%; } th,td{ border: 2px solid green; padding: 15px; } style > head > < body > < table > < tr > < th > 1 header th > < th > 1 header th > < th > 1 header th > tr > < tr > < td > 1data td > < td > 1data td > < td > 1data td > tr > < tr > < td > 2 data td > < td > 2 data td > < td > 2 data td > tr > < tr > < td > 3 data td > < td > 3 data td > < td > 3 data td > tr > table > body > html >
কলস্প্যান সহ এইচটিএমএল টেবিল
আপনি যদি একটি সেল স্প্যান একাধিক কলাম করতে চান, আপনি colspan বৈশিষ্ট্য ব্যবহার করতে পারেন।
এটি একটি ঘর/সারিকে একাধিক কলামে ভাগ করবে এবং কলামের সংখ্যা কলস্প্যান অ্যাট্রিবিউটের মানের উপর নির্ভর করে।
দুই কলাম স্প্যান যে উদাহরণ দেখুন.
CSS কোড:
< style > table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } style >
HTML কোড:
< table style = “width:100%" > < tr > < th > Name th > < th colspan = “2" > Mobile No. th > tr > < tr > < td > Ajeet Maurya td > < td > 7503520801 td > < td > 9555879135 td > tr > table >
আউটপুট:
Name
Mobile No.
অজিত মৌর্য 7503520801 9555879135
রোস্প্যান সহ এইচটিএমএল টেবিল
আপনি যদি একটি সেল স্প্যান একাধিক সারি করতে চান, আপনি rowspan বৈশিষ্ট্য ব্যবহার করতে পারেন।
এটি একটি ঘরকে একাধিক সারিতে ভাগ করবে। বিভক্ত সারির সংখ্যা সারি-স্প্যান মানের উপর নির্ভর করবে।
দুই সারি স্প্যান যে উদাহরণ দেখুন.
CSS কোড:
< style > table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } style >
HTML কোড:
< table > < tr > < th > Name th > < td > Ajeet Maurya td > tr > < tr > < th rowspan = “2" > Mobile No. th > < td > 7503520801 td > tr > < tr > < td > 9555879135 td > tr > table >
আউটপুট:
Name
অজিত মৌর্য
Mobile No.
7503520801
9555879135
ক্যাপশন সহ HTML টেবিল
HTML ক্যাপশন টেবিলের উপরে প্রদর্শিত হয়। এটা শুধুমাত্র টেবিল ট্যাগ পরে ব্যবহার করা আবশ্যক.
< table > < caption > Student Records caption > < tr > < th > First_Name th > < th > Last_Name th > < th > Marks th > tr > < tr > < td > Vimal td > < td > Jaiswal td > < td > 70 td > tr > < tr > < td > Mike td > < td > Warn td > < td > 60 td > tr > < tr > < td > Shane td > < td > Warn td > < td > 42 td > tr > < tr > < td > Jai td > < td > Malhotra td > < td > 62 td > tr > table >
এইচটিএমএল টেবিল জোড় এবং বিজোড় কক্ষের স্টাইলিং
CSS code:
< style > table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } table#alter tr:nth-child(even) { background-color: #eee; } table#alter tr:nth-child(odd) { background-color: #fff; } table#alter th { color: white; background-color: gray; } style >
আউটপুট:
দ্রষ্টব্য: আপনি আপনার টেবিলের বিভিন্ন CSS বৈশিষ্ট্য ব্যবহার করে বিভিন্ন ধরণের টেবিল তৈরি করতে পারেন।
You Might Also Like
