বর্তমানে একটা ওয়েব সাইট শুধুমাত্র তথ্য প্রকাশের উদ্দেশ্যে ডিজাইন করা হয় না।তথ্যটি কতটা সুন্দরভাবে এবং সহজে ব্যবহারযোগ্য করে ব্যবহারকারীর নিকট উপস্থাপন করা হল, সেটাও অধিক গুরুত্বপূর্ণ। ওয়েব পেজে টেবিলে উপস্থাপিত পরিসংখ্যান বা তালিকাকে সি এস এস ব্যবহার করে আকর্ষণীয়রূপে ব্যবহারকারীর নিকট প্রদর্শন করা যায়।এক্ষেত্রে টেবিলের হেডার এবং প্রতিটা সেলের কালার অধিক গুরুত্বপূর্ণ ভূমিকা পালন করে। টেবিল হেডার এর ব্যকগ্রাউন্ড কালার নির্ধারণের জন্য স্টাইল শীটে লেখতে হবে,
th
{
background:#F69;
}
{
background:#F69;
}
টেবিলের প্রতিটা সেলের ব্যকগ্রাউন্ড কালার নির্ধারণের জন্য স্টাইল শীটে লেখতে হবে,
td
{
background:#FAC;
}
{
background:#FAC;
}
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;margin-left:120px; }
table{
border-collapse:collapse;
width:300px; height:200px;
}
table,th,td
{
border:1px solid #F00;
}
th
{
height:50px;
}
td
{
text-align:center;
vertical-align:bottom;
}
th
{
background: #F69;
}
td
{
background:#FAC;
}</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>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;margin-left:120px; }
table{
border-collapse:collapse;
width:300px; height:200px;
}
table,th,td
{
border:1px solid #F00;
}
th
{
height:50px;
}
td
{
text-align:center;
vertical-align:bottom;
}
th
{
background: #F69;
}
td
{
background:#FAC;
}</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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
0 comments: