CSS
टेबल्स
खोज…
वाक्य - विन्यास
- टेबल-लेआउट: ऑटो | तय;
- सीमा-पतन: अलग | ढहने;
- सीमा-रिक्ति: <लंबाई> | <लंबाई> <लंबाई>;
- रिक्त-कोशिकाएँ: शो | छिपाना;
- कैप्शन-पक्ष: शीर्ष | तल;
टिप्पणियों
ये गुण display: table रूप में display: table <table> तत्वों (*) और HTML तत्वों दोनों पर लागू होते display: table या display: inline-table
(*) <table> तत्व स्पष्ट रूप से देशी रूप से UA / ब्राउज़र द्वारा display: table
HTML तालिकाएँ सारणीबद्ध डेटा के लिए शब्दार्थ रूप से मान्य हैं। लेआउट के लिए तालिकाओं का उपयोग करने की अनुशंसा नहीं की जाती है। इसके बजाय, सीएसएस का उपयोग करें।
टेबल लेआउट
table-layout संपत्ति एल्गोरिथ्म को बदल देती है जिसका उपयोग किसी तालिका के लेआउट के लिए किया जाता है।
नीचे दिए गए दो तालिकाओं के उदाहरण में width: 150px :
बाईं ओर की table-layout: auto में table-layout: auto जबकि दाईं ओर के table-layout: fixed । पूर्व निर्दिष्ट चौड़ाई (150px के बजाय 210px) से व्यापक है, लेकिन सामग्री फिट है। उत्तरार्द्ध 150px की परिभाषित चौड़ाई लेता है, भले ही सामग्री अतिप्रवाह हो या न हो।
| मूल्य | विवरण |
|---|---|
| ऑटो | यह व्यतिक्रम मूल्य है। यह तालिका के लेआउट को परिभाषित करता है ताकि इसकी 'कोशिकाओं' की सामग्री का निर्धारण किया जा सके। |
| तय | यह मान तालिका द्वारा प्रदान की गई चौड़ाई की संपत्ति द्वारा निर्धारित किए जाने वाले तालिका लेआउट को निर्धारित करता है। यदि सेल की सामग्री इस चौड़ाई से अधिक है, तो सेल आकार नहीं लेगा, बल्कि इसके बजाय, सामग्री को ओवरफ्लो होने दें। |
सीमा-पतन
border-collapse संपत्ति निर्धारित करती है कि तालिकाओं की सीमाओं को अलग किया जाना चाहिए या विलय किया जाना चाहिए।
border-collapse संपत्ति के विभिन्न मूल्यों के साथ दो तालिकाओं के उदाहरण के नीचे:
बाईं ओर की तालिका में border-collapse: separate जबकि दाईं ओर एक में border-collapse: collapse ।
| मूल्य | विवरण |
|---|---|
| अलग | यह व्यतिक्रम मूल्य है। यह तालिका की सीमाओं को एक दूसरे से अलग बनाता है। |
| ढहने | यह मान अलग-अलग होने के बजाय एक साथ मर्ज करने के लिए तालिका की सीमाओं को निर्धारित करता है। |
सीमा-रिक्ति
border-spacing प्रॉपर्टी कोशिकाओं के बीच रिक्ति को निर्धारित करती है। यह तब तक कोई प्रभाव नहीं पड़ता जब तक कि border-collapse separate करने के लिए निर्धारित न separate ।
border-spacing संपत्ति के विभिन्न मूल्यों के साथ दो तालिकाओं के उदाहरण के नीचे:
बाईं ओर की टेबल में border-spacing: 2px (डिफॉल्ट) जबकि दाईं ओर वाले में border-spacing: 8px ।
| मूल्य | विवरण |
|---|---|
| <लंबाई> | यह डिफ़ॉल्ट व्यवहार है, हालांकि सटीक मान ब्राउज़र के बीच भिन्न हो सकता है। |
| <लंबाई> <लंबाई> | यह सिंटैक्स क्रमशः अलग-अलग क्षैतिज और ऊर्ध्वाधर मानों को निर्दिष्ट करने की अनुमति देता है। |
खाली कोशिकाओं
empty-cells गुण यह निर्धारित करता है कि बिना किसी सामग्री वाली कोशिकाओं को प्रदर्शित किया जाना चाहिए या नहीं। यह तब तक कोई प्रभाव नहीं पड़ता जब तक कि border-collapse separate करने के लिए निर्धारित न separate ।
empty-cells संपत्ति में भिन्न मानों के साथ दो तालिकाओं के साथ एक उदाहरण के नीचे:
बाईं ओर की तालिका में empty-cells: show जबकि दाईं ओर की empty-cells: hide । पूर्व खाली कोशिकाओं को प्रदर्शित करता है जबकि उत्तरार्द्ध नहीं करता है।
| मूल्य | विवरण |
|---|---|
| प्रदर्शन | यह व्यतिक्रम मूल्य है। यह कोशिकाओं को दिखाता है भले ही वे खाली हों। |
| छिपाना | यदि सेल में कोई सामग्री नहीं है, तो यह मान एक सेल को पूरी तरह से छुपाता है। |
अधिक जानकारी:
- https://www.w3.org/TR/CSS21/tables.html#empty-cells
- https://developer.mozilla.org/en-US/docs/Web/CSS/empty-cells
- http://codepen.io/SitePoint/pen/yfhtq
- https://css-tricks.com/almanac/properties/e/empty-cells/
कैप्शन-किनारा
caption-side गुण तालिका के भीतर <caption> तत्व की ऊर्ध्वाधर स्थिति निर्धारित करता है। इस तरह के तत्व मौजूद नहीं होने पर इसका कोई प्रभाव नहीं पड़ता है।
caption-side प्रॉपर्टी पर अलग-अलग मान वाले दो टेबल के साथ एक उदाहरण नीचे:
बाईं ओर की तालिका में caption-side: top जबकि दाईं ओर एक पर caption-side: bottom ।
| मूल्य | विवरण |
|---|---|
| ऊपर | यह व्यतिक्रम मूल्य है। यह तालिका के ऊपर शीर्षक रखता है। |
| तल | यह मान तालिका के नीचे कैप्शन रखता है। |