जवाबों:
एक div
instide का उपयोग करना atd
लेआउट के लिए तालिकाओं का उपयोग करने के किसी अन्य तरीके से भी बदतर नहीं है। (हालांकि कुछ लोग लेआउट के लिए तालिकाओं का उपयोग कभी नहीं करते हैं, और मैं उनमें से एक होता हूं।)
यदि आप एक div
का उपयोग करते हैं तो आप td
एक ऐसी स्थिति में पहुंच जाएंगे, जहां यह अनुमान लगाना कठिन हो सकता है कि तत्वों का आकार कैसा होगा। एक डिव के लिए डिफ़ॉल्ट अपने माता-पिता से इसकी चौड़ाई निर्धारित करने के लिए है, और एक टेबल सेल के लिए डिफ़ॉल्ट इसकी सामग्री के आकार के आधार पर इसका आकार निर्धारित करना है।
div
मानकों का आकार कैसा होना चाहिए, इसके नियमों को अच्छी तरह से परिभाषित किया गया है, लेकिन td
आकार कैसे होना चाहिए , इसके लिए नियम भी परिभाषित नहीं हैं, इसलिए अलग-अलग ब्राउज़र थोड़ा अलग एल्गोरिदम का उपयोग करते हैं।
table-layout:fixed
CSS वह नहीं है जो आपको लगता है कि यह है। यह गणना ब्राउज़र की मात्रा को कम करता है जब केवल पहली पंक्ति के आकार की गणना करके तालिकाओं का प्रतिपादन करते हैं।
XHTML DTD की जाँच करने के बाद मुझे पता चला कि <TD> -element में हेडिंग, लिस्ट जैसे ब्लॉक एलिमेंट्स और <DIV> -मेंट भी समाहित हैं। इस प्रकार, <td--ment के अंदर <DIV> -मेंट का उपयोग करना XHTML मानक का उल्लंघन नहीं करता है। मुझे पूरा यकीन है कि HTML के अन्य आधुनिक रूपांतरों में <TD> -element के बराबर सामग्री मॉडल है।
यहाँ प्रासंगिक DTD नियम हैं:
<!ELEMENT td %Flow;>
<!-- %Flow; mixes block and inline and is used for list items etc. -->
<!ENTITY %Flow "(#PCDATA | %block; | form | %inline; | %misc;>
<!ENTITY %block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">
नहीं, जरूरी नहीं।
यदि आपको टीडी के भीतर एक डीआईवी रखने की आवश्यकता है, तो सुनिश्चित करें कि आप टीडी का ठीक से उपयोग कर रहे हैं। यदि आप सारणीबद्ध डेटा, और शब्दार्थ के बारे में परवाह नहीं करते हैं, तो आप अंततः TD में DIVs के बारे में परवाह नहीं करेंगे। आप अगर - मैं वहाँ एक समस्या है, हालांकि है नहीं लगता कि है यह कर रहे हैं ठीक है, तुम।
HTML विनिर्देश के अनुसार
A <div>
को रखा जा सकता है जहां प्रवाह सामग्री 1 अपेक्षित है , जो <td>
सामग्री मॉडल है 2 है ।
एक टेबल-सेल में ब्लॉक-स्तर के तत्व वैध रूप से हो सकते हैं, इसलिए यह स्वाभाविक रूप से, एक फॉक्स-पेस नहीं है। निश्चित रूप से, ब्राउज़र का अनुमान, इसे एक सट्टा-सैद्धांतिक स्थिति छोड़ देता है। यह लेआउट की समस्या और बग पैदा कर सकता है।
यद्यपि टेबल लेआउट के लिए उपयोग किए जाते थे -और कभी-कभी अभी भी हैं- मुझे लगता है कि अधिकांश ब्राउज़र सामग्री को ठीक से प्रस्तुत करेंगे। यहां तक कि आई.ई.
यदि आप स्थिति का उपयोग करना चाहते हैं: निरपेक्ष; position: relative;
td के साथ div पर आप मुद्दों में चलेंगे। एफएफ, सफारी और क्रोम (मैक, पीसी नहीं) हालांकि td के सापेक्ष div स्थिति नहीं देगा (जैसे कि आप उम्मीद करेंगे) यह divs के लिए भी सही display: table-whatever;
है यदि आप ऐसा करना चाहते हैं, तो आपको दो div की जरूरत है, एक के लिए पात्रwidth: 100%;
height: 100%;
और कोई सीमा नहीं है, इसलिए यह बिना किसी दृश्य प्रभाव के td को भरता है। और फिर पूर्ण।
इसके अलावा क्यों सिर्फ सेल विभाजित नहीं?
जैसा कि सभी ने उल्लेख किया है, यह लेआउट उद्देश्यों के लिए एक अच्छा विचार नहीं हो सकता है। मैं इस सवाल पर पहुंचा क्योंकि मैं भी यही सोच रहा था और मैं केवल यह जानना चाहता था कि क्या यह वैध कोड होगा।
चूंकि यह वैध है, आप इसे अन्य उद्देश्यों के लिए उपयोग कर सकते हैं। उदाहरण के लिए, जो मैं इसका उपयोग करने जा रहा हूं, वह कुछ फैंसी "CSSed" divs को टेबल की पंक्तियों के अंदर रखना है और फिर एक त्वरित jQuery फ़ंक्शन का उपयोग करके उपयोगकर्ता को मूल्य, नाम, आदि द्वारा जानकारी को सॉर्ट करने की अनुमति देता है। केवल लेआउट तालिका मुझे "ऊर्ध्वाधर क्रम" देगी, लेकिन मैं सीएसएस द्वारा विभाजनों की चौड़ाई, ऊंचाई, पृष्ठभूमि आदि को नियंत्रित करूंगा।
इससे निपटने के दो तरीके
div
अंदर रखोtbody
div
अंदर रखोtr
दोनों दृष्टिकोण वैध हैं, यदि आप सामंजस्य देखते हैं: https://stackoverflow.com/a/23440419/2305243
यह शब्दार्थ को तोड़ता है , बस। यह ठीक काम करता है, लेकिन स्क्रीन रीडर या सड़क के नीचे कुछ हो सकता है जो आपके एचटीएमएल को संसाधित करने का आनंद नहीं लेगा यदि आप "शब्दार्थ तोड़ते हैं"।