প্রিয় পাঠক, গত পর্বে আমরা দেখিছি এইচটিএমএল টেবিলে কিভাবে রঙিন লেখা ব্যবহার করতে হয় বা কিভাবে টেবিলের লেখা সমূহ আলাদা আলাদাভাবে রঙিন করা যায়। এবার আমরা দুটি বিষয় নিয়ে আলোচনা করব -
- কিভাবে টেবিল ব্যাকগ্রাউন্ড রং করা যায়?
- কিভাবে <clo><colgroup > ব্যবহার করে একই সাথে অনেকগুলো সারি কলাম রং করা যায়?
যারা গত পর্ব দেখেন নি তারা এখানে ক্লিক করে দেখে আসতে পারেন।
শুরুতেই আসি কিভাবে টেবিলের ব্যাকগ্রাউন্ডড আলাদা আলাদা ভাবে রং করা যায়?
এটি আগের মতোই শুধু মাত্র Style ="" এর ভিতর background-color উপাদান লাগাতে হবে। তাই আগের পর্বটি অবশ্যই দেখে আসুন।
আমরা একটি HTML গঠন নিলাম এবং বরাবরের মতোই Style এর ভেতর background-color যোগ করলাম। যেমন -
ইনপুটঃ
<table border="1">
<thead style="color:red">ডিভাইসের সংখ্যা</thead>
<tbody>
<tr style="color:green; Background-color:yellow;"> <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>
আউটপুটঃ
ডিভাইসের সংখ্যাডিভাইসের নাম সংখ্যা কম্পিউটার ১২০টি মোবাইল ৫৫০টি টেবলেট ৩২০টি
উপরের ইনপুটে লক্ষ্য করুন, এখানে প্রথম row অর্থাৎ প্রথম <tr> এর ভিতর style এট্রিবিউট এর ভিতর co উপাদান এর পরে background-color :yellow ব্যবহার করায় নিচের বক্সে আউটপুটে প্রথম সারি টি হলুদ রং এর হয়ে গিয়েছে। অর্থাৎ আমাদের কোডিং ঠিক মতোই কাজ করছে। এভাবে চাইলে আমরা বাকী Row গুলো আলাদাভাবে রং করতে পারি। আর কলাম গুলো রং করার পদ্ধতি একটু পর আলোচনা করব।
এখন আমরা টেবিলে আরো কিছু রং প্রয়োগ করি-
ইনপুটঃ
<table border="1">
<thead style="color:red">ডিভাইসের সংখ্যা</thead>
<tbody>
<trstyle="color:green; Background-color:yellow;"> <th>ডিভাইসের নাম</th> <th> সংখ্যা </th> </tr>
<tr style="Background-color:grey;"> <td>কম্পিউটার </td> <td>১২০টি</td> </tr>
<tr style="Background-color:#fd7dff;"> <td>মোবাইল</td> <td>৫৫০ টি</td> </tr>
<tr style="Background-color:#92ff38;"> <td >টেবলেট</td> <td>৩২০</td> </tr>
</tbody>
</table>
আউটপুটঃ
ডিভাইসের সংখ্যা
ডিভাইসের নাম
সংখ্যা
কম্পিউটার
১২০টি
মোবাইল
৫৫০ টি
টেবলেট
৩২০
উপরের ইনপুটে লক্ষ্য করুন, কি দেখছেন?
দেখুন প্রতিটি <tr> এর ভিতরে আলাদা আলাদা ব্যাকগ্রাউন্ড কালার ব্যবহার করায় আউটপুটের টেবিলের প্রতিটি সারিতে আলাদা আলাদা রং তৈরি হয়েছ। এখন যদি কোনো একটি সারি এর ভিতরের কোনো একটি বক্স বাদ দিতে চাই তবে শুধু ঐ বক্সের ট্যাগের ভিতরো Background color : লিখে রং দিতে পারেন। যেমন - যদি আমি "মোবাইল" লেখাটির ঘরে রং করা বাদ দিতে চাই অথবা অন্য ঘরে রং করতে চাই তবে <tr> হতে style ="" বাদ দিয়ে ঐ লেখার ট্যাগের ভিতরে Background color : অথবা অন্য রং করতে চাইলে এর স্থানে অন্য রং এর কোড বা নাম বসালেই হবে। যেমন আমি "মোবাইল" লেখাটির ঘরের রং বাতিল করব- আর ডানপাশের ঘরে রং ঠিক থাাকবে!
ইনপুটঃ
<table border="1">
<thead style="color:red">ডিভাইসের সংখ্যা</thead>
<tbody>
<trstyle="color:green; Background-color:yellow;"> <th>ডিভাইসের নাম</th> <th> সংখ্যা </th> </tr>
<tr style="Background-color:grey;"> <td>কম্পিউটার </td> <td>১২০টি</td> </tr>
<tr > <td >মোবাইল</td> <td style="Background-color:#fd7dff;" >৫৫০ টি</td> </tr>
<tr style="Background-color:#92ff38;"> <td >টেবলেট</td> <td>৩২০</td> </tr>
</tbody>
</table>
আউটপুটঃ
ডিভাইসের সংখ্যা
ডিভাইসের নাম সংখ্যা কম্পিউটার ১২০টি মোবাইল ৫৫০ টি টেবলেট ৩২০
এভাবে চাইলে আমরা কোনো বক্স হতে রং বাতিল করতে পারি।
মোট কথা- যে বক্স রং করতে চাই সে ঘরের ট্যাগের ভিতরে style="" যোগ করে এর ভিতর Background-color: দিতে হবে।
এখন,
আমরা দেখব কিভাবে একই সাথে নির্দিষ্ট একটি কলাম রং করা যায়। এর জন্য আমাদের< colgroup> এবং <col> এই দুটি ট্যাগ এর প্রযোজন হবে।
এর মানে হলো Column Group. ধরেন আমরা প্রথম কলাম টি রং করব। অর্থাৎ যে দুটি কলাম রয়েছে তার বামপাশের টা রং করব তাহলে <colgroup > ট্যাগ এর ভিতর আমাদের <col> ট্যাগ এর ভিতর স্টাইল লিখতে হবে, আমরা এখন <tbody> এর উপরে <colgroup> লেখব-যেমন :
ইনপুটঃ
<table border="1">
<thead style="color:red">ডিভাইসের সংখ্যা</thead><colgroup><col span="1" style="background-color:yellow ;">
</colgroup>
<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>
উপরের ইনপুটে লক্ষ্য করুন, কি দেখছেন? দেখতে পাচ্ছি বাম পাশের কলাম টি হলুদ বর্ণের হয়ে গিয়েছে। এর কারণ হলো আমরা ইনপুটে col group এর ভিতরে style="" দিয়ে Background color yellow দিয়েছি। আর span="1" দেবার অর্থ হলো যে আমি প্রথম একটা কলামকে রঙিন হবার নির্দেশ দিয়েছি। এরকম যতটি কলাম রঙ করতে চান span দিয়ে তত সংখ্যা লিখবেন।যেমন প্রথম হতে ২ টি কলাম রং করতে চাইলে span="2" লিখতে হবে। বাকী সব ঠিক থাকবে।
এবার,
আমরা আরো একটু চর্চা করি-
ইনপুটঃ
<table border="1">
<thead style="color:red">ডিভাইসের সংখ্যা</thead><colgroup><col span="2" style="background-color: #dcf2b1;">
</colgroup>
<tbody>
<tr> <th>ডিভাইসের নাম</th> <th> কোম্পানী </th> <th> সংখ্যা </th> </tr>
<tr> <td>কম্পিউটার </td> <td> HP </td> <td>১২০টি</td> </tr>
<tr> <td>মোবাইল</td> <td>Apple </td> <td>৫৫০ টি</td> </tr>
<tr> <td>টেবলেট</td> <td>ওয়াল্টন </td><td>৩২০</td> </tr>
</tbody>
</table>
 |
এখন আমরা চাইযে,
প্রথম একটি কলাম হলুদ হবে একটি সবুজ এবং পরেরটি লাল হবে তাহলে আমাদের colgroup এ span ব্যবহার না করে পর পর তিনটি <col> ট্যাগ ব্যবহার করলেই চলবে। তিনটির জন্য তিনটি <col> নিতে হবে। যেমন-
ইনপুটঃ
<table border="1">
<thead style="color:red">ডিভাইসের সংখ্যা</thead><colgroup>
<col style="background-color: yellow;"><col style="background-color: #dcf2b1;"><col style="background-color: red;">
</colgroup>
<tbody>
<tr> <th>ডিভাইসের নাম</th> <th> কোম্পানী </th> <th> সংখ্যা </th> </tr>
<tr> <td>কম্পিউটার </td> <td> HP </td> <td>১২০টি</td> </tr>
<tr> <td>মোবাইল</td> <td>Apple </td> <td>৫৫০ টি</td> </tr>
<tr> <td>টেবলেট</td> <td>ওয়াল্টন </td><td>৩২০</td> </tr>
</tbody>
</table>
উপরের ইনপুটে দেখছি colgroup এ তিনটি কলামের জন্য তিনটি col ট্যাগ যোগ করা হয়েছে এবং প্রতিটিতে Style ব্যবহার করে আলাদা রং ব্যবহার করা হয়েছে।
এভাবে আমরা কলামের বিভিন্ন ডিজাইন দিতে পারি।
প্রিয় পাঠক এরকম আরো প্রয়োজনীয় পৃষ্ঠা পেতে সাথে থাকতে ভুলবেন না। প্রয়োজনে ওয়েবসাইট টি সেভ করে রাখি।
ধন্যবাদ!
0 Comments
আপনার মন্তব্য লিখুন!