টেবিল সম্পর্কিত CSS প্রপার্টিজ

Articles

এই নিবন্ধটি টেবিল সম্পর্কিত CSS প্রপার্টিজ ব্যাখ্যা করে।

আপনি টেবিল লেআউট, বর্ডার, ক্যাপশন অবস্থান এবং আরও অনেক কিছুর জন্য প্রপার্টিজ ব্যবহার এবং লিখতে শিখতে পারেন।

YouTube Video

প্রিভিউর জন্য HTML

css-table.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-table.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Table Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Table Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>table-layout</h3>
 23            <section>
 24                <header><h4>table-layout: auto</h4></header>
 25                <section class="sample-view">
 26                    <table class="table-layout-auto">
 27                        <thead>
 28                            <tr>
 29                                <th>Column 1</th>
 30                                <th>Column 2</th>
 31                                <th>Column 3</th>
 32                            </tr>
 33                        </thead>
 34                        <tbody>
 35                            <tr>
 36                                <td>Short</td>
 37                                <td>Some longer content here</td>
 38                                <td>Content</td>
 39                            </tr>
 40                            <tr>
 41                                <td>Another short one</td>
 42                                <td>This is a much longer piece of text to demonstrate the auto layout</td>
 43                                <td>Short</td>
 44                            </tr>
 45                        </tbody>
 46                    </table>
 47                </section>
 48            </section>
 49            <section>
 50                <header><h4>table-layout: fixed</h4></header>
 51                <section class="sample-view">
 52                    <table class="table-layout-fixed">
 53                        <thead>
 54                            <tr>
 55                                <th>Column 1</th>
 56                                <th>Column 2</th>
 57                                <th>Column 3</th>
 58                            </tr>
 59                        </thead>
 60                        <tbody>
 61                            <tr>
 62                                <td>Short</td>
 63                                <td>Some longer content here</td>
 64                                <td>Content</td>
 65                            </tr>
 66                            <tr>
 67                                <td>Another short one</td>
 68                                <td>This is a much longer piece of text to demonstrate the fixed layout</td>
 69                                <td>Short</td>
 70                            </tr>
 71                        </tbody>
 72                    </table>
 73                </section>
 74            </section>
 75        </article>
 76        <article>
 77            <h3>border-collapse</h3>
 78            <section>
 79                <header><h4>border-collapse: separate</h4></header>
 80                <section class="sample-view">
 81                    <table class="border-collapse-separate">
 82                        <thead>
 83                            <tr>
 84                                <th>Header 1</th>
 85                                <th>Header 2</th>
 86                                <th>Header 3</th>
 87                            </tr>
 88                        </thead>
 89                        <tbody>
 90                            <tr>
 91                                <td>Cell 1</td>
 92                                <td>Cell 2</td>
 93                                <td>Cell 3</td>
 94                            </tr>
 95                            <tr>
 96                                <td>Cell 4</td>
 97                                <td>Cell 5</td>
 98                                <td>Cell 6</td>
 99                            </tr>
100                        </tbody>
101                    </table>
102                </section>
103            </section>
104            <section>
105                <header><h4>border-collapse: collapse</h4></header>
106                <section class="sample-view">
107                    <table class="border-collapse-collapse">
108                        <thead>
109                            <tr>
110                                <th>Header 1</th>
111                                <th>Header 2</th>
112                                <th>Header 3</th>
113                            </tr>
114                        </thead>
115                        <tbody>
116                            <tr>
117                                <td>Cell 1</td>
118                                <td>Cell 2</td>
119                                <td>Cell 3</td>
120                            </tr>
121                            <tr>
122                                <td>Cell 4</td>
123                                <td>Cell 5</td>
124                                <td>Cell 6</td>
125                            </tr>
126                        </tbody>
127                    </table>
128                </section>
129            </section>
130        </article>
131        <article>
132            <h3>border-spacing</h3>
133            <section>
134                <header><h4>border-spacing: 5px 20px</h4></header>
135                <section class="sample-view">
136                    <table class="border-spacing-example">
137                        <thead>
138                            <tr>
139                                <th>Header 1</th>
140                                <th>Header 2</th>
141                                <th>Header 3</th>
142                            </tr>
143                        </thead>
144                        <tbody>
145                            <tr>
146                                <td>Cell 1</td>
147                                <td>Cell 2</td>
148                                <td>Cell 3</td>
149                            </tr>
150                            <tr>
151                                <td>Cell 4</td>
152                                <td>Cell 5</td>
153                                <td>Cell 6</td>
154                            </tr>
155                        </tbody>
156                    </table>
157                </section>
158            </section>
159        </article>
160        <article>
161            <h3>caption-side</h3>
162            <section>
163                <header><h4>caption-side: top</h4></header>
164                <section class="sample-view">
165                    <table>
166                        <caption class="caption-side-top">
167                            Table Caption on Top
168                        </caption>
169                        <thead>
170                            <tr>
171                                <th>Header 1</th>
172                                <th>Header 2</th>
173                                <th>Header 3</th>
174                            </tr>
175                        </thead>
176                        <tbody>
177                            <tr>
178                                <td>Data 1</td>
179                                <td>Data 2</td>
180                                <td>Data 3</td>
181                            </tr>
182                            <tr>
183                                <td>Data 4</td>
184                                <td>Data 5</td>
185                                <td>Data 6</td>
186                            </tr>
187                        </tbody>
188                    </table>
189                </section>
190            </section>
191            <section>
192                <header><h4>caption-side: bottom</h4></header>
193                <section class="sample-view">
194                    <table>
195                        <caption class="caption-side-bottom">
196                            Table Caption on Bottom
197                        </caption>
198                        <thead>
199                            <tr>
200                                <th>Header 1</th>
201                                <th>Header 2</th>
202                                <th>Header 3</th>
203                            </tr>
204                        </thead>
205                        <tbody>
206                            <tr>
207                                <td>Data 1</td>
208                                <td>Data 2</td>
209                                <td>Data 3</td>
210                            </tr>
211                            <tr>
212                                <td>Data 4</td>
213                                <td>Data 5</td>
214                                <td>Data 6</td>
215                            </tr>
216                        </tbody>
217                    </table>
218                </section>
219            </section>
220        </article>
221        <article>
222            <h3>empty-cells</h3>
223            <section>
224                <header><h4>empty-cells: show</h4></header>
225                <section class="sample-view">
226                    <table class="empty-cells-show">
227                        <tr>
228                            <th>Header 1</th>
229                            <th>Header 2</th>
230                            <th>Header 3</th>
231                        </tr>
232                        <tr>
233                            <td>Data 1</td>
234                            <td></td> <!-- Empty cell -->
235                            <td>Data 3</td>
236                        </tr>
237                        <tr>
238                            <td>Data 4</td>
239                            <td></td> <!-- Empty cell -->
240                            <td>Data 6</td>
241                        </tr>
242                    </table>
243                </section>
244            </section>
245            <section>
246                <header><h4>empty-cells: hide</h4></header>
247                <section class="sample-view">
248                    <table class="empty-cells-hide">
249                        <tr>
250                            <th>Header 1</th>
251                            <th>Header 2</th>
252                            <th>Header 3</th>
253                        </tr>
254                        <tr>
255                            <td>Data 1</td>
256                            <td></td> <!-- Empty cell -->
257                            <td>Data 3</td>
258                        </tr>
259                        <tr>
260                            <td>Data 4</td>
261                            <td></td> <!-- Empty cell -->
262                            <td>Data 6</td>
263                        </tr>
264                    </table>
265                </section>
266            </section>
267        </article>
268    </main>
269</body>
270</html>

টেবিল লেআউট

`table-layout` প্রপার্টি

 1table {
 2    width: 100%;
 3}
 4
 5th, td {
 6    border: 1px solid black;
 7    padding: 10px;
 8}
 9
10table.table-layout-auto {
11    border-collapse: collapse;
12    table-layout: auto;
13}
14
15table.table-layout-fixed {
16    border-collapse: collapse;
17    table-layout: fixed;
18}
19
20table.table-layout-fixed th {
21    width: 33.33%; /* Distribute width equally among 3 columns */
22}

table-layout একটি CSS প্রপার্টি যা HTML টেবিলগুলির লেআউট পদ্ধতি নিয়ন্ত্রণ করে। এই প্রপার্টিটি আপনাকে টেবিলের কলামের প্রস্থ কীভাবে গণনা করতে হবে তা নির্দিষ্ট করতে দেয়।

table-layout-auto ক্লাসে, column এর প্রস্থ নির্ধারিত হয় প্রতিটি সেলের বিষয়বস্তুর উপর ভিত্তি করে।
কলামের প্রস্থ বিষয়বস্তু অনুসারে পরিবর্তিত হয় এবং লম্বা বিষয়বস্তুযুক্ত সেলগুলো কলামকে বড় করে দেয়।
table-layout-fixed ক্লাস table-layout: fixed ব্যবহার করে।
প্রতিটি কলামের প্রস্থ সমানভাবে সেট হয় এবং বিষয়বস্তু দীর্ঘ হলেও প্রস্থ পরিবর্তন হয় না।

`table-layout` এর মানসমূহ

1table {
2    table-layout: auto;
3}
4
5table {
6    table-layout: fixed;
7}

table-layout এর মূলত দুটি মান রয়েছে: auto এবং fixed।

auto (ডিফল্ট মান):
- auto নির্ধারণ করলে টেবিলের কলামের প্রস্থ বিষয়বস্তুর উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে সামঞ্জস্য করা হয়।
- ব্রাউজার প্রতিটি সেলের সমস্ত বিষয়বস্তু পড়ে এবং উক্ত বিষয়বস্তুর উপর ভিত্তি করে প্রতিটি কলামের প্রস্থ নির্ধারণ করে।
- এর ফলে টেবিলের সম্পূর্ণ অংশটি ধীরগতিতে রেন্ডার হতে পারে।
fixed:
- fixed নির্ধারণ করা মানে প্রতিটি কলামের প্রস্থ প্রথম সারির সেলের প্রস্থ বা width attributes দ্বারা নির্ধারিত হয়।
- পুরো টেবিলটি তাৎক্ষণিকভাবে অঙ্কিত হয় এবং সমস্ত বিষয়বস্তু পড়া ছাড়াই কলামের প্রস্থ নির্ধারিত হয়।
- টেবিলে অনেক ডেটা থাকলেও কর্মক্ষমতা উন্নত হয়।

`table-layout: auto` এবং `table-layout: fixed` এর মধ্যে পার্থক্য

auto এর সাথে, টেবিলের প্রস্থ বিষয়বস্তুর উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে সামঞ্জস্য হয়। আরও গতিশীল বিন্যাস সম্ভব, তবে জটিল টেবিলের ক্ষেত্রে পারফরম্যান্স খারাপ হতে পারে।
fixed ব্যবহার করলে, কলামের প্রস্থ নির্ধারিত থাকে, টেবিল বিষয়বস্তুর উপর নির্ভর না করেই একটি সঙ্গতিশীল বিন্যাস নিশ্চিত করে। যদিও পারফরম্যান্স উন্নত হয়, তবে বিষয়বস্তু প্রস্থে না ফিট করলে সেটি কেটে যেতে পারে।

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

1table.border-collapse-separate {
2    border-collapse: separate;
3    border-spacing: 10px; /* Set space between cells */
4}
5
6table.border-collapse-collapse {
7    border-collapse: collapse;
8}

border-collapse একটি CSS প্রপার্টি যা টেবিল সেলের মধ্যকার বর্ডার কিভাবে প্রদর্শিত হবে তা নিয়ন্ত্রণ করে। টেবিল সেলের মধ্যকার বর্ডার কিভাবে প্রদর্শিত হবে তা নির্ধারণ করতে এটি ব্যবহৃত হয়।

border-collapse: separate ব্যবহার করলে সেলগুলোর মধ্যে আলাদা বর্ডার এবং ফাঁক থাকবে। সেলগুলোর মধ্যে ফাঁকের পরিমাণ border-spacing প্রপার্টি দিয়ে সমন্বয় করা হয়। এই উদাহরণে, প্রতিটি সেলের মধ্যে ১০px ফাঁক সেট করা হয়েছে।
border-collapse: collapse ব্যবহার করলে সংলগ্ন সেলগুলোর বর্ডার একত্রিত হয়ে একক একটি বর্ডার হিসেবে প্রদর্শিত হয়। ফলস্বরূপ, টেবিলের একটি সুসংহত নকশা দেখা যায়।

এই উদাহরণ অনুযায়ী, border-collapse প্রপার্টির প্রধানত দুটি মান রয়েছে: separate এবং collapse।

separate (ডিফল্ট মান):
- separate নির্দিষ্ট করলে, প্রতিটি সেলের বর্ডার আলাদাভাবে আঁকা হয় এবং সেলগুলোর মধ্যে ফাঁক থাকে।
- যখন আপনি বর্ডারগুলো স্পষ্টভাবে আলাদা করতে চান, তখন এটি ব্যবহার করা হয় কারণ সেল বর্ডারগুলো পৃথকভাবে প্রদর্শিত হয়।
- সেলগুলোর মধ্যে ফাঁক border-spacing প্রপার্টি দিয়ে সামঞ্জস্য করা যায়।
collapse:
- collapse নির্দিষ্ট করলে সংলগ্ন সেলগুলোর বর্ডার একত্রিত হয়ে একক একটি বর্ডার হিসেবে প্রদর্শিত হয়।
- বর্ডারগুলো ওভারল্যাপ করার কারণে পুরো টেবিলে একটি ঐক্যবদ্ধ চেহারা থাকে।
- টেবিলের সারি এবং কলামগুলি সুশৃঙ্খলভাবে প্রদর্শিত হয়, যা এটি সহজ ডিজাইনের জন্য উপযুক্ত করে তোলে।

`border-spacing` প্রপার্টি

1table.border-spacing-example {
2    border-collapse: separate;
3
4    /* Set 5px spacing between columns and 20px spacing between rows */
5    border-spacing: 5px 20px;
6}

border-spacing একটি CSS প্রপার্টি যা HTML টেবিলের সেলগুলোর মধ্যে ফাঁক নির্দিষ্ট করতে ব্যবহৃত হয়। এটি টেবিল সেলের মধ্যকার ফাঁক সমন্বয় করতে এবং ভিজ্যুয়াল মার্জিন নিয়ন্ত্রণ করতে সাহায্য করে। এই উদাহরণে, অনুভূমিক ফাঁক হিসেবে 5px এবং উল্লম্ব ফাঁক হিসেবে 20px যোগ করা হয়েছে।

border-spacing প্রপার্টি শুধুমাত্র সেই টেবিলগুলিতে কার্যকর হয় যেখানে border-collapse: separate; নির্ধারণ করা হয়েছে। যদি border-collapse: collapse; নির্ধারণ করা হয়, তবে এই প্রপার্টি কার্যকর হয় না।

ব্যবহার

border-spacing প্রপার্টির মান পিক্সেল বা অন্যান্য দৈর্ঘ্য এককে নির্ধারণ করা হয়। এটি নিম্নলিখিত দুটি ফর্ম্যাটে নির্ধারণ করা যেতে পারে:।

একক মান

1table {
2    border-spacing: 10px;
3}

একক মান নির্ধারণ করার সময়, সারি (উপরে এবং নিচে) এবং কলামের (বামের এবং ডানের) মধ্যবর্তী ফাঁক একই মানে নির্ধারণ করা হয়।

এই উদাহরণে, সমস্ত সেলের মধ্যে 10px ফাঁক যোগ করা হয়েছে।

দুটি মান

1table {
2    border-spacing: 10px 20px;
3}

দুটি মান নির্ধারণ করার সময়, প্রথম মানটি কলামের মধ্যবর্তী অনুভূমিক ফাঁক নির্ধারণ করে এবং দ্বিতীয় মানটি সারির মধ্যবর্তী উল্লম্ব ফাঁক নির্ধারণ করে।

এই উদাহরণে, কলামের মধ্যে ফাঁক 10px এবং সারির মধ্যে ফাঁক 20px।

`caption-side` প্রপার্টি

 1caption.caption-side-top {
 2    caption-side: top; /* Display the caption at the top of the table */
 3    font-weight: bold;
 4    font-size: 1.2em;
 5    margin-bottom: 10px;
 6    background-color: #ccc;
 7}
 8
 9caption.caption-side-bottom {
10    caption-side: bottom; /* Display the caption at the bottom of the table */
11    font-weight: bold;
12    font-size: 1.2em;
13    margin-top: 10px;
14    background-color: #ccc;
15}

caption-side প্রপার্টি একটি CSS প্রপার্টি যা HTML টেবিলের ক্যাপশন (<caption> এলিমেন্ট) কোথায় দেখানো হবে তা নির্ধারণ করতে ব্যবহৃত হয়।

top নির্ধারণ করলে ক্যাপশনটি টেবিলের উপরে প্রদর্শিত হয়।
- এটি ডিফল্ট সেটিং এবং ক্যাপশন প্রায়শই টেবিলের শিরোনাম বা বিবরণ হিসাবে ব্যবহৃত হয়।
bottom নির্ধারণ করলে ক্যাপশনটি টেবিলের নিচে প্রদর্শিত হয়।
- যখন আপনি টেবিলের নিচে ব্যাখ্যা স্থাপন করতে চান তখন এটি ব্যবহার করুন।

`empty-cells` প্রপার্টি

1table.empty-cells-show {
2    empty-cells: show; /* Display empty cells */
3}
4
5table.empty-cells-hide {
6    empty-cells: hide; /* Display empty cells */
7}

empty-cells একটি CSS প্রপার্টি যা HTML টেবিলের খালি সেলগুলো দেখানো হবে কিনা তা নিয়ন্ত্রণ করে। ডিফল্টভাবে, টেবিলে খালি সেলগুলিও বর্ডার দেখায়, তবে আপনি ডিসপ্লে নিয়ন্ত্রণ করতে এই প্রপার্টি ব্যবহার করতে পারেন।

show নির্ধারণ করলে খালি সেলও প্রদর্শিত হবে। এটি ডিফল্ট আচরণ।
hide নির্ধারণ করলে খালি সেল অদৃশ্য হয়ে যাবে। কোষগুলোর সীমানা এবং পটভূমি আঁকা হবে না।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video

তালিকা সম্পর্কিত CSS বৈশিষ্ট্যগুলি লেআউট-সম্পর্কিত CSS প্রোপার্টিস

টেবিল সম্পর্কিত CSS প্রপার্টিজ

YouTube Video

প্রিভিউর জন্য HTML

টেবিল লেআউট

table-layout প্রপার্টি

table-layout এর মানসমূহ

table-layout: auto এবং table-layout: fixed এর মধ্যে পার্থক্য

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

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

ব্যবহার

caption-side প্রপার্টি

empty-cells প্রপার্টি

YouTube Video

`table-layout` প্রপার্টি

`table-layout` এর মানসমূহ

`table-layout: auto` এবং `table-layout: fixed` এর মধ্যে পার্থক্য

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

`border-spacing` প্রপার্টি

`caption-side` প্রপার্টি

`empty-cells` প্রপার্টি