সিএসএস টেবিল(table)
নিচে যে সুন্দর একটি এইচটিএমএল টেবিল দেখতে পাচ্ছেন তা সিএসএস দিয়ে স্টাইল করা হয়েছে।
এই অধ্যায়ে আমরা ধাপে ধাপে এধরনের টেবিল তৈরি করা শিখবোঃ
| খেলোয়াড়ের নাম | দলীয় অবস্থান | দেশ |
|---|---|---|
| মাশরাফি বিন মুর্তজা | ক্যাপ্টেন এবং বোলার | বাংলাদেশ |
| সাকিব আল হাসান | অলরাউন্ডার | বাংলাদেশ |
| ডু প্লেসিস | ক্যাপ্টেন এবং ব্যাটসম্যান | দক্ষিন আফ্রিকা |
| বিরাট কোহলি | ব্যাটসম্যান | ভারত |
একনজরে সিএসএসের টেবিল প্রোপার্টিসমূহ
| প্রোপার্টি | বর্ণনা |
|---|---|
border |
একটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো বর্ডার প্রোপার্টি সেট করার জন্য একটি শর্টকাট প্রোপার্টি। |
border-collapse |
টেবিলের বর্ডার কলাপ্স হবে কিনা তা নির্ধারণ করে। |
border-spacing |
পাশাপাশি দুটি সেলের বর্ডারের দূরত্ব নির্ধারণ করে। |
caption-side |
টেবিল ক্যাপশনের অবস্থান নির্ধারণ করে। |
empty-cells |
একটি টেবিলের মধ্যে খালি সেল এর বর্ডার এবং ব্যাকগ্রাউন্ড প্রদর্শিত হবে কিনা তা নির্ধারণ করে। |
table-layout |
একটি টেবিলের লেআউট নির্ধারণ করে। |
টেবিলে বর্ডার সেট
<table> এর চারপাশে বর্ডার সেট করার জন্য সিএসএস border প্রোপার্টি ব্যবহার করতে হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
table {
border: 2px solid green;
}
</style>
</head>
<body>
<h3 >টেবিলের মধ্যে বর্ডারের ব্যবহার</h3>
<table>
<tr>
<th>মাস</th>
<th>আয়</th>
<th>সঞ্চয়</th>
</tr>
<tr>
<td>জানুয়ারি</td>
<td>২৫০০০</td>
<td>৫০০০</td>
</tr>
<tr>
<td>ফেব্রুয়ারী</td>
<td>২৪০০০</td>
<td>৪০০০</td>
</tr>
<tr>
<td>মার্চ</td>
<td>২৭০০০</td>
<td>৭০০০</td>
</tr>
</table>
</body>
</html>
ফলাফল
উপরের উদাহরণে লক্ষ্য করলে দেখবেন, শুধুমাত্র <table> এর চারপাশে বর্ডার আছে। কিন্তু <th> এবং <td> এলিমেন্টে কোনো বর্ডার নাই।
<table>, <th> এবং <td> এলিমেন্টে বর্ডার দিতে হলে এদের প্রত্যেকটিতে পৃথকভাবে border প্রোপার্টি সেট করতে হবে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
table, th, td {
border: 2px solid green;
}
</style>
</head>
<body>
<h3>সম্পূর্ণ টেবিলে বর্ডার দিয়ে দেখানো হলো</h3>
<table>
<tr>
<th>মাস</th>
<th>আয়</th>
<th>সঞ্চয়</th>
</tr>
<tr>
<td>জানুয়ারি</td>
<td>২৫০০০</td>
<td>৫০০০</td>
</tr>
<tr>
<td>ফেব্রুয়ারী</td>
<td>২৪০০০</td>
<td>৪০০০</td>
</tr>
<tr>
<td>মার্চ</td>
<td>২৭০০০</td>
<td>৭০০০</td>
</tr>
</table>
</body>
</html>
ফলাফল
উপরের উদাহরণে লক্ষ্য করলে দেখবেন, টেবিলের মধ্যে ডাবল বর্ডার দেখা যাচ্ছে। কারণ <table>, <th> এবং <td> তিনটি এলিমেন্টের জন্য পৃথকভাবে বর্ডার সেট করা হয়েছে।
টেবিলের বর্ডার কলাপ্স
টেবিলের বর্ডারসমূহ একটি একক বর্ডারে কলাপ্স হবে কিনা অর্থাৎ দুটি বর্ডার এক হয়ে যাবে কিনা তা নির্ধারণ করার জন্য border-collapse প্রোপার্টিটি ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
table, th, td {
border: 2px solid green;
}
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<h3>টেবিল বর্ডার কলাপ্সের উদাহরণ</h3>
<table>
<tr>
<th>মাস</th>
<th>আয়</th>
<th>সঞ্চয়</th>
</tr>
<tr>
<td>জানুয়ারি</td>
<td>২৫০০০</td>
<td>৫০০০</td>
</tr>
<tr>
<td>ফেব্রুয়ারী</td>
<td>২৪০০০</td>
<td>৪০০০</td>
</tr>
<tr>
<td>মার্চ</td>
<td>২৭০০০</td>
<td>৭০০০</td>
</tr>
</table>
</body>
</html>
ফলাফল
উপরের উদাহরনে border-collapse প্রোপার্টি ব্যবহার করায় দুটি বর্ডার একত্রিত হয়ে একটি বর্ডারে পরিনত হয়েছে।
টেবিলের টেক্সট এলাইনমেন্ট সেট
টেবিলের <th> এবং <td> এলিমেন্টের কন্টেন্টসমূহ অনুভূমিকভাবে সেন্টারে, বামে নাকি ডানে দেখাবে তা সেট করার জন্য সিএসএস text-align প্রোপার্টি ব্যবহার করা হয়।
ডিফল্টভাবে <th> এলিমেন্টেের কন্টেন্টসমূহ সেন্টারে থাকে এবং <td> এলিমেন্টের কন্টেন্টসমূহ বামে থাকে।
নিচের উদাহরনে <th> এলিমেন্টের কন্টেন্টসমূহের এলাইনমেন্ট left নির্ধারণ করা হয়েছে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
table, th, td {
border: 2px solid green;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
text-align: left;
}
</style>
</head>
<body>
<h3>টেবিলে text-align প্রোপার্টির ব্যবহার</h3>
<table>
<tr>
<th>মাস</th>
<th>আয়</th>
<th>সঞ্চয়</th>
</tr>
<tr>
<td>জানুয়ারি</td>
<td>২৫০০০</td>
<td>৫০০০</td>
</tr>
<tr>
<td>ফেব্রুয়ারী</td>
<td>২৪০০০</td>
<td>৪০০০</td>
</tr>
<tr>
<td>মার্চ</td>
<td>২৭০০০</td>
<td>৭০০০</td>
</tr>
</table>
</body>
</html>
বিঃদ্রঃ এছাড়াও আপনি চাইলে কন্টেন্টকে ভার্টিক্যাললি এ্যালাইন করতে পারবেন। <th> এবং <td> এলিমেন্টের কন্টেন্টকে ভার্টিক্যাললি এ্যালাইন করার জন্য vertical-align প্রোপার্টিটি ব্যবহার করুন। এর সম্ভাব্য ভ্যালুগুলো হলোঃ top এবং bottom।
ফলাফল
টেবিলের প্রস্থ এবং উচ্চতা সেট
টেবিলের প্রস্থ এবং উচ্চতা নির্ধারণ করার জন্য সিএসএস width এবং height প্রোপার্টি ব্যাবহার করা হয়।
নিচের উদাহরনে <table> এর প্রস্থ সেট করা হয়েছে 100% এবং <th> এলিমেন্টের height সেট করা হয়েছে 50px।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
table, td, th {
border: 2px solid green;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
height: 50px;
}
</style>
</head>
<body>
<h3>টেবিলের প্রস্থ এবং উচ্চতা নির্ধারণ</h3>
<table>
<tr>
<th>মাস</th>
<th>আয়</th>
<th>সঞ্চয়</th>
</tr>
<tr>
<td>জানুয়ারি</td>
<td>২৫০০০</td>
<td>৫০০০</td>
</tr>
<tr>
<td>ফেব্রুয়ারী</td>
<td>২৪০০০</td>
<td>৪০০০</td>
</tr>
<tr>
<td>মার্চ</td>
<td>২৭০০০</td>
<td>৭০০০</td>
</tr>
</table>
</body>
</html>
ফলাফল
টেবিলে প্যাডিং যুক্তকরণ
টেবিলের বর্ডার এবং কন্টেন্ট এর মধ্যে স্পেস নিয়ন্ত্রন করার জন্য <th> এবং <td> এলিমেন্টে padding প্রোপার্টি ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
table, td, th {
border: 2px solid green;
text-align: left;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<h3>টেবিল সেলে প্যাডিং এর ব্যবহার</h3>
<table>
<tr>
<th>মাস</th>
<th>আয়</th>
<th>সঞ্চয়</th>
</tr>
<tr>
<td>জানুয়ারি</td>
<td>২৫০০০</td>
<td>৫০০০</td>
</tr>
<tr>
<td>ফেব্রুয়ারী</td>
<td>২৪০০০</td>
<td>৪০০০</td>
</tr>
<tr>
<td>মার্চ</td>
<td>২৭০০০</td>
<td>৭০০০</td>
</tr>
</table>
</body>
</html>
ফলাফল
সারিকে অনুভূমিকভাবে বিভাজন
টেবিলের সারিগুলোকে অনুভূমিক ভাবে বিভাজন করার জন্য <th> এবং <td> এলিমেন্টে border-bottom প্রোপার্টি যুক্ত করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td, th {
padding: 10px;
border-bottom: 2px solid green;
text-align: left;
}
</style>
</head>
<body>
<h3>টেবিলের সারি বিভাজন</h3>
<table>
<tr>
<th>মাস</th>
<th>আয়</th>
<th>সঞ্চয়</th>
</tr>
<tr>
<td>জানুয়ারি</td>
<td>২৫০০০</td>
<td>৫০০০</td>
</tr>
<tr>
<td>ফেব্রুয়ারী</td>
<td>২৪০০০</td>
<td>৪০০০</td>
</tr>
<tr>
<td>মার্চ</td>
<td>২৭০০০</td>
<td>৭০০০</td>
</tr>
</table>
</body>
</html>
ফলাফল
টেবিলের সারিতে পৃথকভাবে কালার সেট
নিচের উদাহরণে <th> এলিমেন্টের ব্যাকগ্রাউন্ড কালার এবং টেক্সট কালার নির্ধারণ করা হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td, th {
padding: 10px;
text-align: center;
}
th {
background-color: teal;
color: white;
}
</style>
</head>
<body>
<h3>টেবিলের নির্দিষ্ট একটি সারিতে কালার সেট</h3>
<table>
<tr>
<th>মাস</th>
<th>আয়</th>
<th>সঞ্চয়</th>
</tr>
<tr>
<td>জানুয়ারি</td>
<td>২৫০০০</td>
<td>৫০০০</td>
</tr>
<tr>
<td>ফেব্রুয়ারী</td>
<td>২৪০০০</td>
<td>৪০০০</td>
</tr>
<tr>
<td>মার্চ</td>
<td>২৭০০০</td>
<td>৭০০০</td>
</tr>
</table>
</body>
</html>
ফলাফল
টেবিলে জেব্রা স্টাইল যুক্তকরণ
টেবিলকে জেব্রা স্টাইল করতে হলে nth-child() সিলেক্টর ব্যবহার করে টেবিলের জোড় অথবা বিজোড় সারিতে background-color প্রোপার্টি যুক্ত করতে হবে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td, th {
padding: 10px;
text-align: left;
}
tr:nth-child(even) {
background-color: lightpink;
}
</style>
</head>
<body>
<h3>জেব্রা স্টাইলযুক্ত টেবিল</h3>
<table>
<tr>
<th>মাস</th>
<th>আয়</th>
<th>সঞ্চয়</th>
</tr>
<tr>
<td>জানুয়ারি</td>
<td>২৫০০০</td>
<td>৫০০০</td>
</tr>
<tr>
<td>ফেব্রুয়ারী</td>
<td>২৪০০০</td>
<td>৪০০০</td>
</tr>
<tr>
<td>মার্চ</td>
<td>২৭০০০</td>
<td>৭০০০</td>
</tr>
</table>
</body>
</html>
ফলাফল
টেবিলে হোভার ইফেক্ট যুক্তকরণ
টেবিলের সারির উপর মাউস নেওয়ার পরে সারিকে হাইলাইট করার জন্য <tr> এলিমেন্টে :hover সিলেক্টর ব্যবহার করে সিএসএস প্রয়োগ করুন।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td, th {
padding: 10px;
text-align: left;
border-bottom: 1px solid green;
}
tr:hover{
background-color: teal;
}
</style>
</head>
<body>
<h3>হোভার ইফেক্টযুক্ত টেবিল</h3>
<p>টেবিলের হোভার ইফেক্ট দেখার জন্য মাউসটি সারির উপরে নিন।</p>
<table>
<tr>
<th>মাস</th>
<th>আয়</th>
<th>সঞ্চয়</th>
</tr>
<tr>
<td>জানুয়ারি</td>
<td>২৫০০০</td>
<td>৫০০০</td>
</tr>
<tr>
<td>ফেব্রুয়ারী</td>
<td>২৪০০০</td>
<td>৪০০০</td>
</tr>
<tr>
<td>মার্চ</td>
<td>২৭০০০</td>
<td>৭০০০</td>
</tr>
</table>
</body>
</html>
ফলাফল
রেসপন্সিভ টেবিল তৈরি করা
টেবিলকে রেস্পন্সিভ করার জন্য <table> এলিমেন্টকে <div> এলিমেন্টের মধ্যে রেখে <div> এলিমেন্টে overflow-x: auto প্রোপার্টি ব্যবহার করুন।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td, th {
padding: 10px;
text-align: left;
}
tr:nth-child(even) {
background-color: lightpink;
}
div {
overflow-x: auto;
}
</style>
</head>
<body>
<h3>রেসপন্সিভ টেবিল</h3>
<div class="responsive">
<table>
<tr>
<th>নাম</th>
<th>মূল বেতন</th>
<th>মহার্ঘ ভাতা</th>
<th>বাড়ি ভাড়া</th>
<th>যাতায়াত ভাতা</th>
<th>শিক্ষা ভাতা</th>
<th>মোট বেতন</th>
</tr>
<tr>
<td>আতাউর</td>
<td>৩০০০০</td>
<td>১৫০০০</td>
<td>১০০০০</td>
<td>৫০০০</td>
<td>২০০০</td>
<td>৬২০০০</td>
</tr>
<tr>
<td>নিজাম</td>
<td>২৮০০০</td>
<td>১৪০০০</td>
<td>৮০০০</td>
<td>৪০০০</td>
<td>২০০০</td>
<td>৫৬০০০</td>
</tr>
<tr>
<td>ভিভিয়ান</td>
<td>২৬০০০</td>
<td>১৩০০০</td>
<td>৭০০০</td>
<td>৪০০০</td>
<td>২০০০</td>
<td>৫২০০০</td>
</tr>
</table>
</div>
</body>
</html>
বিঃদ্রঃ রেসপন্সিভনেস বুঝার জন্য ব্রাউজারের উইন্ডো রিসাইজ করুন।
ফলাফল