সিএসএস টিউটোরিয়াল পর্ব - ১২

ওয়েব স্কুল বিডি : সুপ্রিয় শিক্ষার্থী বন্ধুরা, শুভেচ্ছা নিয়ো। আমরা গত পর্বে লিস্টে ইমেজের ব্যবহার নিয়ে আলোচনা করেছিলাম। আজ তোমাদের টেবিল (Table ) নিয়ে আলোচনা করা হলো :

টেবিল (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;
}

এখানে মূল টেবিল, টেবিলের প্রতিটা সারি এবং প্রতিটা সেল এর জন্য একই স্ট্যাইলের বর্ডার নির্ধারণ করা হয়েছে।

টেবিল ওয়াইডথ এন্ড হাইট (Table Width and Height):

টেবিল ডিজাইনের ক্ষেত্রে যে বিষয়টি প্রথমে চিন্তা করতে হয়, তা হচ্ছে টেবিলটি কতটুকু চওড়া হবে এবং এর উচ্চতা কতটুকু হবে, টেবিল হেডার তথা প্রথম সারির প্রতিটা সেল কেমন হবে। টেবিলের চওড়া কেমন হবে এবং এর উচ্চতা নির্ধারণের জন্য স্টাইল শীটে লেখতে হবে,

table
{
width:300px; height:100px;
}

মানসমূহ px তথা পিক্সেলে অথবা পেজের শতকরা হিসেবে দেয়া যেতে পারে।যেমন,

table
{
width:50%; height:20%;
}

শতকরা হিসেবে মান দিলে মনিটরের সাইজ অনুসারে টেবিলের আকার পরিবর্তিত হবে কিন্তু পিক্সেলে মান দিলে কোন পরিবর্তন হবে না।
টেবিল হেডার তথা প্রথম সারির প্রতিটা সেল এর উচ্চতা নির্ধারণের জন্য স্টাইল শীটে লেখতে হবে,

th
{
height:50px;
}

এক্ষেত্রেও মানসমূহ px তথা পিক্সেলে অথবা পেজের শতকরা হিসেবে দেয়া যেতে পারে। সাধারণত টেবিল হেডার তথা প্রথম সারির প্রতিটা সেল এর উচ্চতা নির্ধারণ করে দিলে বাকি সেল গুলোর আকার টেবিলের width দ্বারা নির্ধারিত হয়।

টেবিল টেক্সট এলাইনমেন্ট (Table Text Alignment):

টেবিলে টেক্সট সমূহ কিভাবে থাকবে তা নির্দেশ করার জন্য টেবিল টেক্সট এলাইনমেন্ট ব্যবহার করা হয়। প্রতিটা সেলের টেক্সট সমূহ বামে রাখতে হলে স্টাইল শীটে লেখতে হবে,

td
{
text-align:right;

}

ডানে রাখতে হলে Declaration করতে হবে text-align:left;
মাঝখানে রাখতে হলে Declaration করতে হবে text-align:center;

এখন যদি প্রতিটা সেলের টেক্সট সমূহের ভার্টিক্যাল এলাইনমেন্ট অর্থাৎ প্রতিটা সেলের মধ্যে টেক্সট সমূহ উপরের দিকে থাকবে না নিচের দিকে থাকবে অথবা মাঝামাঝি অবস্থানে থাকবে কিনা নির্ধারণ করতে হয় তাহলে Declaration এ vertical-align নির্ধারণ করে দিতে হবে।টেক্সট সমূহ নিচের দিকে রাখার জন্য Declaration করতে হবে,

td
{
vertical-align:bottom;
}  

টেবিল কালার (Table Color):
বর্তমানে একটা ওয়েব সাইট শুধুমাত্র তথ্য প্রকাশের উদ্দেশ্যে ডিজাইন করা হয় না।তথ্যটি কতটা সুন্দরভাবে এবং সহজে ব্যবহারযোগ্য করে ব্যবহারকারীর নিকট উপস্থাপন করা হল, সেটাও অধিক গুরুত্বপূর্ণ। ওয়েব পেজে টেবিলে উপস্থাপিত পরিসংখ্যান বা তালিকাকে সি এস এস ব্যবহার করে আকর্ষণীয়রূপে ব্যবহারকারীর নিকট প্রদর্শন করা যায়।এক্ষেত্রে টেবিলের হেডার এবং প্রতিটা সেলের কালার অধিক গুরুত্বপূর্ণ ভূমিকা পালন করে। টেবিল হেডার এর ব্যকগ্রাউন্ড কালার নির্ধারণের জন্য স্টাইল শীটে লেখতে হবে,

th
{
background:#F69;
}

টেবিলের প্রতিটা সেলের ব্যকগ্রাউন্ড কালার নির্ধারণের জন্য স্টাইল শীটে লেখতে হবে,

td
{
background:#FAC;
}