X

X

X

CSS এ টেবিল উপস্থাপণ


শুধুমাত্র HTML দিয়ে টেবিল উপস্থাপণ করলে সেটি খুব বেশি দৃষ্টিনন্দন হয় না। একারনে টেবিলকে আরও সুন্দরভাবে উপস্থাপন করার জন্য সিএসএস টেবিল প্রপার্টি ব্যবহার করতে হয়।

নিচে একটি টেবিল উপস্থাপণ করা হলো।

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

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

border property প্রপার্টি ব্যবহার করে টেবিলের বর্ডার সেট করা হয়।

নিচের উদাহরণে <table>, <th>, ও <td> ইলামেন্টের জন্য কালো রংয়ের বর্ডার সেট করে দেখানো হলো।

Code Example

<style>
table, th, td {
    border: 1px solid black;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


লক্ষ্য করে দেখুন, উপরের উদাহরণে টেবিল ইলামেন্টগুলোর দুটি করে বর্ডার রয়েছে। কারণ, টেবিল এবং এর <th> ও <td> ইলামেন্টগুলোরও বর্ডার সেট করা হয়েছে বলেই এমনটি হচ্ছে।


টেবিল বর্ডারকে সঠিকভাবে উপস্থাপণ

উপরের উদাহরণে দেখেছেন যে, টেবিলের দুটি করে বর্ডার উপস্থাপিত হচ্ছে। আমরা সাধারণত এমন বর্ডার চাই না। বেশিরভাগক্ষেত্রে শুধুুমাত্র একটি বর্ডার হলেই চলে। সেক্ষেত্রে border-collapse property ব্যবহার করে নির্ধারণ করা হয়, বর্ডারটি এক লাইনে নাকি দুই লাইনে উপস্থাপিত হবে:

Code Example

<style>
table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

এখন যদি আপনি শুধুমাত্র টেবিলের চারপাশে বর্ডার উপস্থাপণ করতে চান, তবে শুধুমাত্র <table> ইলামেন্টের জন্য  border property ব্যবহার করবেন:

Code Example

<style>
table {
    border-collapse: collapse;
    border: 1px solid black;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


টেবিলের উচ্চতা/ দৈর্ঘ্য ও প্রস্থ

টেবিলের উচ্চতা/দৈর্ঘ্য ও প্রস্থ যথাক্রমে  heightwidth  property সমূহ ব্যবহার করে নির্ধারণ করতে হয়।
নিচের উদাহরণে টেবিলের প্রস্থ ১০০% এবং <th> ইলামেন্টের উচ্চতা ৫০ পিক্সেল নির্ধারণ করে দেখানো হলো:

Code Example

<style>
table, td, th {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th {
    height: 50px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


আনুভূমিক অবস্থান (Horizontal Alignment)

text-align property ব্যবহার করে <th> অথবা <td> ইলামেন্টের কন্টেন্টের আনুভূমিক অবস্থান (যেমন, left, right, অথবা center) নির্ধারণ করা হয়।

সাধারণত <th> ইলামেন্টের কন্টেন্ট কেন্দ্রীয় অবস্থানে এবং <td> ইলামেন্টের অবস্থান বাম দিকে হয়। নিচে <th> এর কন্টেন্টের অবস্থান বাম দিকে নির্ধারণ করা হলো:

Code Example

<style>
table, td, th {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th {
    text-align: left;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


লম্বিক অবস্থান (Vertical Alignment)

vertical-align property ব্যবহার করে কন্টেন্টের লম্বিক অবস্থান (যেমন top, bottom, অথবা middle) নির্ধারণ করা হয়। সাধারণত <th> ও <td> এর কন্টেন্টের লম্বিক অবস্থান মধ্যখানে (middle ) হয়ে থাকে। তবে এটি পরিবর্তন করতে চাইলে নিচের উদাহরণের মতো প্রপার্টি ব্যবহার করতে হবে।

Code Example

<style>
table, td, th {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    width: 100%;
}

td {
    height: 50px;
    vertical-align: bottom;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


টেবিলের বর্ডার ও কন্টেন্টের মধ্যবর্তী দূরত্ব নির্ধারণ (Table Padding)

টেবিলের <td> ও <th> ইলামেন্টসমূহের বর্ডার ও কন্টেন্টের মধ্যবর্তী দূরত্ব নির্ধারণ করার জন্য padding property ব্যবহার করা হয়।

Code Example

<style>
table, td, th {    
    border: 1px solid #ddd;
    text-align: left;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 15px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


টেবিলের আনুভূমিক ডিভাইডার তৈরি করার জন্য <th> ও <td> ইলামেন্টের border-bottom property এর মান নির্ধারণ করতে হবে:

Code Example

<style>
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Hoverable Table

টেবিলের বিভিন্ন সারি বা কলামের উপর মাউস নিয়ে আসলে যদি এর কোনো প্রপার্টির মান পরিবর্তিত হয়, তবে এটিকে Hoverable Table বলে। এখানে Hover বলতে কোনো ইলামেন্টের উপর মাউসের অবস্থান করার অবস্থাকে বোঝানো হয়। এই অবস্থায় কোনো ইলামেন্টের সিএসএস প্রপার্টি সেট করার জন্য :hover selector ব্যবহার করা হয়। নিচের উদাহরণে <tr> এর Hover অবস্থার জন্য সিএসএস প্রপার্টি সেট করা হলো:

First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

Code Example

<style>
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

tr:hover {background-color:#f5f5f5;}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Striped Tables

First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

zebra-striped টেবিল তৈরি করার জন্য ,  nth-child() selector ব্যবহার করুন এবং সব জোড় অথবা বিজোর সারির background-color নির্ধারণ করুন।

Code Example

<style>
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {background-color: #f2f2f2;}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Table Color

নিচের উদাহরণে <th> ইলামেন্টের background color ও text color নির্ধারণ করা হলো:

First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

Code Example

<style>
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
    background-color: #4CAF50;
    color: white;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Responsive Table

যদি কোনো টেবিলকে সঠিকভাবে উপস্থাপণ করার মতো পর্যাপ্ত জায়গা না থাকে, সেক্ষেত্রে রেসপনসিভ টেবিল তৈরি করতে হয়, যাতে অল্প জায়গায় পুরো টেবিল সঠিকভাবে উপস্থাপিত হয়। এই টেবিলের জন্য যখন নির্ধারিত জায়গার পরিমান কম হয়, তখন এর জন্য একটি আনুভুমিক স্ক্রলবার তৈরি হয়, যেটি ব্যবহার করে এর অদৃশ্যমান অংশ দেখা যায়।

First Name Last Name Points Points Points Points Points Points Points Points Points Points Points Points
Jill Smith 50 50 50 50 50 50 50 50 50 50 50 50
Eve Jackson 94 94 94 94 94 94 94 94 94 94 94 94
Adam Johnson 67 67 67 67 67 67 67 67 67 67 67 67

পুরো ফাংশনটি ভালোভাবে বুঝার জন্য উদাহরণটি চালু করুন, এবং ব্রাউজারের প্রস্থ ছোটো করুন।
রেসপনসিভ টেবিল তৈরি করার জন্য টেবিলটিকে আরো একটি ইলামেন্টের ভেতর ঢুকিয়ে দিন, এবং উক্ত ইলামেন্টের overflow-x:auto প্রপার্টি নির্ধারণ করুন।

Code Example

<style>
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


আরও কিছু উদাহরণ

Make a fancy table
This example demonstrates how to create a fancy table.

Set the position of the table caption
This example demonstrates how to position the table caption.


নিজে নিজে চেষ্টা করুন!

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »  Exercise 5 »  Exercise 6 »


CSS Table Property সমূহ

প্রপার্টি বর্ণনা
border সব প্রপার্টি একসাথে বর্ণনা করার জন্য ব্যবহৃত হয়।
border-collapse বর্ডার সংকোচন বা collapse হবে নাকি হবে না, তা নির্ধারণ করার জন্য ব্যবহৃত হয়।
border-spacing পাশাপাশি অবস্থানরত টেবিল সেলের মধ্যবর্তী দূরত্ব নির্ধারণ করার জন্য ব্যবহৃত হয়।
caption-side টেবিল ক্যাপশনের অবস্থান নির্ধারণ করার জন্য ব্যবহৃত হয়।
empty-cells ফাঁকা টেবিল সেলের বর্ডার উপস্থাপিত হবে নাকি হবে না তা নির্ধারণ করার জন্য এটি ব্যবহৃত হয়।
table-layout টেবিল লে-আউট তৈরি বা নির্ধারণ করার জন্য ব্যবহৃত হয়।