সিএসএস টেবিল - Css Table



সিএসএস টেবিল প্রপার্টি ব্যবহার করে এইচটিএমএল ডকুমেন্টের টেবিলে সম্পূর্ণ স্টাইলিং করা যায়।


টেবিল প্রপার্টি

টেবিলে সিএসএস এর যে সব প্রপার্টি ব্যবহার করা যায় সেগুলো হল border, Collapse Border, color, background-color, width, height, padding, text-align, vertical-align ইত্যাদি।


টেবিল বর্ডার

সিএসএস এর মাধ্যমে টেবিলের বর্ডার প্রদর্শনের জন্য border প্রপার্টি ব্যবহার করা হয়।

টেবিলে বর্ডার প্রপার্টি ব্যবহার করার উদাহরণ নীচে দেখুন -

উদাহরণ

table, th, td { border: 1px solid blue; }


বর্ডার প্রপার্টির ব্যবহার সিএসএস বর্ডারের মতই, প্রথমে বর্ডারের width, তারপর বর্ডারের স্টাইল যেমন- solid, dotted ইত্যাদি এবং সর্বশেষে বর্ডারের রং বা color উল্লেখ করতে হয়।

এই কোডের ফলে double border প্রদর্শিত হবে। এর কারন টেবিলের th এবং td এর নিজস্ব বর্ডার। টেবিলে single বর্ডার প্রদর্শন করতে হলে Collapse Border প্রপার্টি ব্যবহার করতে হবে।


border-collapse প্রপার্টি

border-collapse প্রপার্টি ব্যবহার করার ফলে টেবিলের বর্ডার single বা আলাদা আলাদা ভাবে প্রদর্শিত হয়।

উদাহরণ

table{
border-collapse:collapse;
}
table,th, td{
border: 1px solid black;
}




টেবিলে রঙের ব্যবহার

সিএসএস color প্রপার্টি ব্যবহার করে একই সাথে টেবিলের বর্ডার, টেক্সট এবং ব্যাকগ্রাউন্ড এ রঙ নির্ধারণ করা যায়।

নীচে একই সাথে টেবিলের বর্ডার, টেক্সট এবং ব্যাকগ্রাউন্ড এ রঙ নির্ধারণ করার একটি উদাহরণ দেয়া হল -

উদাহরণ

table, td, th{
border:1px solid green;
}
th{
background-color:green;
color:white;
}




Width এবং Height প্রপার্টি

টেবিল এর আকার নির্ধারণ করার জন্য সিএসএস এর width এবং height প্রপার্টি ব্যবহার করতে হবে।

width এবং height প্রপার্টির মান বা value বিভিন্ন ভাবে নির্ধারণ করা যায়। যেমন - পিক্সেল(px) এর সাহায্যে, শতকরা(%) পদ্ধতি ইত্যাদি।

টেবিলে width এবং height প্রপার্টি ব্যবহার করার পদ্ধতি নীচে দেয়া হল -

উদাহরণ

table{
width:100%;
}
th{
height:50px;
}




Text Alignment প্রপার্টি

টেবিলে প্রদর্শিত লেখা বা text এর অবস্থান পরিবর্তন বা নির্ধারণ করার জন্য text-align এবং vertical-align প্রপার্টি ব্যবহার করা যায়।

text-align প্রপার্টি কন্টেন্টের আনুভুমিক অবস্থান নির্দিষ্ট করে। এর মান বা value হতে পারে left, right বা center

নীচে text-align প্রপার্টি ব্যবহার করে একটি উদাহরণ দেখুন -

উদাহরণ

td{
text-align:right;
}


vertical-align প্রপার্টি কন্টেন্টের উলম্ব অবস্থান অর্থাৎ top, center বা bottom এ অবস্থান নির্দিষ্ট করে। এর মান বা value হতে পারে পিক্সেলে যেমন - 20px, 50px ইত্যাদি।

উদাহরণ

td{
vertical-align:50px;
}




Padding প্রপার্টি

টেবিলের বর্ডার এবং কন্টেন্ট যেমন - text, image ইত্যাদির মাঝে ফাকা স্থান নির্ধারণ করার জন্য td ও th এর সাথে প্যাডিং প্রপার্টি ব্যবহার করা যায়।

নীচে টেবিলে padding প্রপার্টি ব্যবহার করে একটা উদাহরণ দেখানো হল -

উদাহরণ

td{
padding:15px;
}









এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.