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