টেবিল (Table )
ওয়েব পেজে টেবিল ব্যাবহার করে খুব সহজেই তথ্য-উপাত্ত,পরিসংখ্যান উপস্থাপন করা যায়। টেবিল খুবই গুরুত্বপূর্ণ একটি উপাদান।সি এস এস ব্যবহার করে এইচ টি এম এল এ তৈরিকৃত টেবিলকে আরো আকর্ষণীয় এবং ব্যবহার বান্ধব করা যায়। সি এস এস ব্যবহার করে টেবিলের স্টাইল তৈরির জন্য বেশ কয়েকটি বিষয়ের উপর কাজ করতে হয়। এগুলো হচ্ছে,
- টেবিল বর্ডার (Table Border)
- টেবিল ওয়াইডথ এন্ড হাইট (Table Width and Height)
- টেবিল টেক্সট এলাইনমেন্ট (Table Text Alignment)
- টেবিল কালার (Table Color)
টেবিল বর্ডার (Table Border)
মূলত টেবিলের দৃশ্যমান মূল গঠন তৈরি করা হয় টেবিল বর্ডার দ্বারা।টেবিলের প্রতিটা সারি তৈরির জন্য HTML এ <tr></tr> ব্যবহার করা হয়, এবং প্রতিটা সেল তৈরির জন্য <td></td>ব্যবহার করা হয়। <th></th> এর মাধ্যমে টেবিল হেডার তৈরি করা হয়।CSS দ্বারা টেবিল বর্ডার স্টাইল তৈরির জন্য স্ট্যাইল শীটে লেখতে হবে,
table,th,td
{
border:1px solid #F00;
}
এখানে মূল টেবিল, টেবিলের প্রতিটা সারি এবং প্রতিটা সেল এর জন্য একই স্ট্যাইলের বর্ডার নির্ধারণ করা হয়েছে।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99; margin-left:120px;}
table,th,td
{
border:1px solid #F00;
}
</style>
</head>
<body >
<table>
<tr>
<th>SL</th>
<th>Book</th>
<th>Pen</th>
<th>Box</th>
</tr>
<tr>
<td>01</td>
<td>100</td>
<td>200</td>
<td>400</td>
</tr> <tr>
<td>02</td>
<td>300</td>
<td>600</td>
<td>300</td>
</tr>
</table>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
ছবিটাতে আসলে সাধারণ টেবিলের মত বর্ডার তৈরি হয়নি। প্রতিটা সেল পরস্পর থেকে আলাদা হয়েছে।
{
border-collapse:collapse;
}
এখন যদি স্টাইল শীটে উপরের কোড টুকু যুক্ত করা হয় তাহলে টেবিলটি দেখতে সাধারণ টেবিলের মত হবে এবং Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।
কপি রাইট © ২০১১থেকে যতদিন চলবে সর্বস্বত্ত্ব সংরক্ষিত