প্রিয় পাঠক,
গত ১০টি পর্বে আমরা - এইচটিএমএল এর বিভিন্ন ট্যাগ নিয়ে আলোচনা করেছিলাম, এবং গত পর্বে আলোচনা করেছিলাম কিভাবে বিভিন্ন স্টাইলের লিস্ট তৈরি করতে হয়। আমরা প্রায় ১০প্রকারের আকর্ষণীয় লিস্ট তৈরি দেখেছি। এবার আলোচনা করব কিভাবে একটি আকর্ষণীয় টেবিল তৈরি করতে হয় ( How to use multiple color in html table) এবং সারি কলামের আকর্ষণীয় রঙিন রূপ দেয়া যায়।
ত টেবিল তৈরি করার শুরুতেই আমাদেরকে জানতে হবে টেবিল তৈরিতে কিকি ট্যাগের প্রয়োজন হয়। আমরা যদি টেবিল তৈরি করতে চাই তাহলে নিম্নের ট্যাগ গুলোর প্রয়োজন পরে। যারা এই ট্যাগ গুলোর কাজ না জানি তাহলে আমরা মেনু হতে সার্চ করে দেখে আসতে পারি। ত টেবিল তৈরির জন্য নিচের ট্যাগ গুলোর প্রয়োজন হবে-
- <table>
- <thead>
- <tbody>
- <colgroup>
- <col>
- <tr>
- <th>
- <td>
- <tfoot>
এই ট্যাগ গুলো দিয়েই আমরা টেবিল তেরি শুরু করব, এছাড়াও টেবিলের সৌন্দর্য বৃদ্ধির জন্য এগুলোর ভেতরে আমরা বিভিন্ন এট্রিবিউট ও উপাদান যোগ করব। ত আমরা একটি টেবিলের html গঠন তৈরি করলাম।
ইনপুটঃ
<table border="1">
<thead>ডিভাইসের সংখ্যা</thead>
<tbody>
<tr> <th>ডিভাইসের নাম</th> <th> সংখ্যা </th> </tr>
<tr> <td>কম্পিউটার </td> <td>১২০টি</td> </tr>
<tr> <td>মোবাইল</td> <td>৫৫০ টি</td> </tr>
<tr> <td>টেবলেট</td> <td>৩২০</td> </tr>
</tbody>
</table>
আউটপুটঃ
ডিভাইসের সংখ্যা
ডিভাইসের নাম
সংখ্যা
কম্পিউটার
১২০টি
মোবাইল
৫৫০টি
টেবলেট
৩২০টি
উপরের ইনপুটে লেখা সমস্ত ট্যাগ গুলো লাই টু লাইন কেন লেখা হয়েছে তা কি বুঝতে পেড়েছি?
যারা বুঝিনি তারা নিচের শর্ট ভিডিও টা দেখে নেই।
আমরা আরো একটু বুঝে নেই- ইনপুট বক্সে লক্ষ্য করুন,
<table> ট্যাগ কেন ব্যবহার করা হয়েছে?
আমরা জানি যে কোনো টেবিল তৈরি করার জন্য অবশ্যই টেবিল ট্যাগ ব্যবহার করতে হবে।এজন্যই মূলত সমস্ত কোডিং এর শুরুতে আমরা <table> ট্যাগ দিয়েছি আর সবচেয়ে শেষে </table> দিয়ে টেবিল ট্যাগ শেষ করেছি। আর মাঝখানো যাবতীয় ট্যাগ গুলো লিখেছি।
<table> ট্যাগ এর ভিতরে কেন border="1" ব্যবহার করা হয়েছে?
আমরা ইনপুটের নিচে আউটপুট বক্সে যদি খেয়াল করি তাহলে দেখতে পাব যে টেবিলের চারপাশে একটি লাইন বা বক্স তৈরি হয়েছে। যেটা মূলত এই টেবিল Border এট্রিবিউট এর কাজ। তাই যেকোনো টেবিল তৈরির ক্ষেত্রে আমাদের বর্ডার ব্যবহার করতে হয়। নাহলে টেবিলের বক্স দেখা যাবে না।
<thead> কেন ব্যবহার করা হয়েছে?
t head এর মানে হলো table head এর কাজ হলো টেবিলের শিরোনাম বা টাইটেল দেয়া। কোনো টেবিলের উপরে হেডলাইন দিতে এই ট্যাগ ব্যবহার করা হয়। তাই আমরা এই ট্যাগ দিয়ে টেবিলের হেডলাইন তৈরি করেছি। আপনারা আউটপুটে দেখতে পাচ্ছেন যে টেবিলের একটি হেডলাইন দেয়া হয়েছে। এটি মূলত <thead>ও</thead> এর ভিতরে লেখা হয়েছে ।
<tbody> কেন ব্যবহার করা হয়েছে?
<thead>এর পরে সম্পূর্ণ টেবিলকে নির্দেশ করতে <tbody> ট্যাগ ব্যবহার করা হয়েছে। বাকী ট্যাগ গুলো এর ভিতরেই লেখা হয়। যেমনটা উপরের ইনপুটে দেখতে পাচ্ছেন।
<tr> কেন ব্যবহার করা হয়েছে?
<tr>এর এর মানে হলো table row অর্থাৎ প্রতিটি row বা সারি এর জন্য আমাদের প্রতিবার <tr></tr> ব্যবহার করতে হয়। যেমন উপরেরটেবিলের উপর হতে নিচে ৪টি বক্স লাইন দেখতে পাচ্ছি। এগুলো মূলত একেকটা সারি।এই ৪টি সারির জন্য আমরা ইনপুটে চারবার <tr>ট্যাগ ব্যবহার করেছি। আর এই tr এর ভিতরে td ব্যবহার করে করে টেবিলের তথ্য গুলো লেখেছি।
<th> কেন ব্যবহার করা হয়েছে?
এর মানে হলো table header অর্থাৎ প্রতিটি ট্যাবিলেরই উপরের সারিতে টেবিলের হেডার থাকে। যেমন ঐ টেবিলে উপরের সারিতে "ডিভাইসে নাম" আর "সংখ্যা" এই দুটি হেয়ারের জন্য ২বার <th> ব্যবহার করা হয়েছে যার জন্য ২টি কলামের সৃষ্টি হয়েছে। ঠিক একই রকম <td> এর ক্ষেত্রে ও।
<td> কেন ব্যবহার করা হয়েছে?
<tr> এর ভিতরে<td> দেয়ার কারণ হলো টেবিলের ডাটা তৈরি করা। প্রতিটি table data একেকটি কলাম নিয়ে গঠিত হয়। যেমন প্রতিটি <tr> ট্যাগ এর ভিতরে ২টি করে <td> ট্যাগ ব্যবহার করা হয়েছে। যার ফলে দুটি করে কলাম তৈরি হয়েছে। এর ভিতরেই মূলত ডাটা গুলো লেখা হয়। যেমনটা ইনপুট ও আউটপুটে দেখছেন।
এবার নিশ্চয়ই একটি সাধারণ টেবিল তৈরি করার পক্রিয়া বুঝতে পেড়েছি?
এখন আসি কিভাবে টেবিলের বিভিন্ন অংশে রঙ করা যায় বা কিভাবে টেবিলে রং ব্যবহার করা যায়।
তার আগে বলি- যারা টেবিলের লেখার বিভিন্ন স্টাইল দিতে চাই বা বিভিন্ন স্টাইলের ফন্ট ব্যবহার করতে চাই তারা অন্য আরেকটি পোস্ট দেখে আসবেন যেখানে দেখানো হয়েছে কিভাবে html এ বিভিন্ন স্টাইলের ফন্ট ব্যবহার করা যায়। এখন আমরা এত লম্বা বর্ণনায় যাব না। তাই আমরা শুধু কালার বা রং নিয়ে আলোচনা করব। ফন্ট ব্যবহারে যাব না।
ত টেবিলের বিভিন্ন সেকশন রং করার জন্য আমাদের style এট্রিবিউট ও উপাদানের এর প্রয়োজন হবে। যেমন -
- style="color: ; background color: ; "
ইত্যাদি।
আমরা দু ভাবে style ব্যবহার করতে পারি।
- আলাদা আলাদা করে, এবং
- গ্রুপ অনুযায়ী
আমরা প্রথমত আলাদা আলাদা করে রং ব্যবহার করব।
এর জন্য আমাদের আলাদা ভাবে প্রতিটি ট্যাগ এর ভিতরে style=" " ব্যবহার করতে হবে। আমরা উদাহরণ দেখি-
ইনপুটঃ
<table border="1">
<thead style="color:red">ডিভাইসের সংখ্যা</thead>
<tbody>
<trstyle="color:green"> <th>ডিভাইসের নাম</th> <th> সংখ্যা </th> </tr>
<tr> <td>কম্পিউটার </td> <td>১২০টি</td> </tr>
<tr> <td>মোবাইল</td> <td>৫৫০ টি</td> </tr>
<tr> <td>টেবলেট</td> <td>৩২০</td> </tr>
</tbody>
</table>
আউটপুটঃ
ডিভাইসের সংখ্যাডিভাইসের নাম সংখ্যা কম্পিউটার ১২০টি মোবাইল ৫৫০টি টেবলেট ৩২০টি
উপরের ইনপুটের উপরের দিকে লক্ষ্য করলে দেখবেন যে <thead> এর ভিতরে style ="" এট্রিবিউট যোগ করে এর ভিতরে Red Color ব্যবহার করা হয়েছে, যার ফলে আউটপুটে হেড অংশ টুকু লাল হয়ে গিয়েছে। আউটপুটে দেখছেন "ডিভাইসের সংখ্যা" অংশটুকু লাল হয়ে গিয়েছে।
ঠিক একই রকম <th> এর জন্য <tr> ট্যাগ এর ভিতরে style="" এর ভিতর color: green ব্যবহার করায় হেড এর সারি সম্পূর্ণ সবুজ রং এর হয়ে গিয়েছে।
বুঝার সুবিধার জন্য দুটি ট্যাগে ব্যবহার করেছি। এবার আমরা আরো কিছু ট্যাগের ভিতর এরকম রং প্রয়োগ করব। যেমনঃ
ইনপুটঃ
<table border="1">
<thead style="color:red">ডিভাইসের সংখ্যা</thead>
<tbody>
<trstyle="color:green"> <th>ডিভাইসের নাম</th> <th> সংখ্যা </th> </tr>
<tr style="color:#912156"> <td>কম্পিউটার </td> <td>১২০টি</td> </tr>
<tr style="color:#044952"> <td>মোবাইল</td> <td>৫৫০ টি</td> </tr>
<tr style="color:#5e097a"> <td>টেবলেট</td> <td>৩২০</td> </tr>
</tbody>
</table>
আউটপুটঃ
ডিভাইসের সংখ্যা
ডিভাইসের নাম
সংখ্যা
কম্পিউটার
১২০টি
মোবাইল
৫৫০ টি
টেবলেট
৩২০
দেখতে পাচ্ছি টেবিলের নিচের আলাদা আলাদা <tr> এর জন্য আলাদা ভাবে তিনটি ভিন্ন ভিন্ন রং এর কোড ব্যবহার করা হয়েছে যার ফলে তিনটি সারির জন্য তিনটি ভিন্ন ভিন্ন কালার এসেছে। এভাবে চাইলে আমরা টেবিলের জন্য বিভিন্ন রং ব্যবহার করতে পারব।
প্রিয় পাঠক। এতক্ষণ জানলাম কিভাবে আলাদা ভাবে রং ব্যবহার করতে হয়। আগামী পর্বে জানব কিভাবে একই সাথে <col group> ট্যাগ ব্যবহার করে একসাথে অনেক গুলো সারি বলা কলাম রং করা যায়। আর এর পরে দেখব কিভাবে টেবিলের ব্যকগ্রাউন্ড কালার ব্যবহার করা যায়।
0 Comments
আপনার মন্তব্য লিখুন!