टेबल-संबंधी CSS गुण
यह लेख टेबल-संबंधी 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क्लास में कॉलम की चौड़ाई प्रत्येक सेल के अंदर की सामग्री के आधार पर निर्धारित होती है। -
कॉलम की चौड़ाई सामग्री के अनुसार बदलती है, और लंबे कंटेंट वाले सेल कॉलम को चौड़ा कर देंगे।
-
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विशेषता द्वारा निर्धारित होती है।- पूरा टेबल तुरंत खींचा जाता है और कॉलम की चौड़ाई पूरी सामग्री पढ़े बिना निर्धारित की जाती है।
- टेबल में डेटा अधिक होने पर भी प्रदर्शन बेहतर होता है।
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प्रॉपर्टी के माध्यम से समायोजित किया जाता है। इस उदाहरण में, प्रत्येक सेल के बीच 10px का अंतर निर्धारित किया गया है। -
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-collapse: separate; निर्दिष्ट हो, केवल तब border-spacing संपत्ति तालिकाओं पर प्रभाव डालती है। यदि 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 चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।