क्या टीडी के अंदर एक डीआईवी एक बुरा विचार है?


143

ऐसा लगता है कि मैंने कहीं सुना / पढ़ा है कि <div>अंदर का <td>कोई नहीं था। ऐसा नहीं है कि यह काम नहीं करेगा, बस उनके बारे में कुछ उनके प्रदर्शन प्रकार के आधार पर वास्तव में संगत नहीं है। मेरे कूबड़ का बैकअप लेने के लिए कोई सबूत नहीं मिल सकता है, इसलिए मैं पूरी तरह से गलत हो सकता हूं।

जवाबों:


144

एक divinstide का उपयोग करना atd लेआउट के लिए तालिकाओं का उपयोग करने के किसी अन्य तरीके से भी बदतर नहीं है। (हालांकि कुछ लोग लेआउट के लिए तालिकाओं का उपयोग कभी नहीं करते हैं, और मैं उनमें से एक होता हूं।)

यदि आप एक divका उपयोग करते हैं तो आप tdएक ऐसी स्थिति में पहुंच जाएंगे, जहां यह अनुमान लगाना कठिन हो सकता है कि तत्वों का आकार कैसा होगा। एक डिव के लिए डिफ़ॉल्ट अपने माता-पिता से इसकी चौड़ाई निर्धारित करने के लिए है, और एक टेबल सेल के लिए डिफ़ॉल्ट इसकी सामग्री के आकार के आधार पर इसका आकार निर्धारित करना है।

divमानकों का आकार कैसा होना चाहिए, इसके नियमों को अच्छी तरह से परिभाषित किया गया है, लेकिन tdआकार कैसे होना चाहिए , इसके लिए नियम भी परिभाषित नहीं हैं, इसलिए अलग-अलग ब्राउज़र थोड़ा अलग एल्गोरिदम का उपयोग करते हैं।


मुझे संदेह है कि यह मेरा कूबड़ कहां से आया। इसे क्लीयर करने के लिए शुक्रिया।
जूलम

9
यदि आपके कॉलम में पूर्व-निर्दिष्ट चौड़ाई है, तो यह समस्या नहीं होनी चाहिए। बस टेबल-लेआउट सेट करने के लिए याद रखें: टेबल पर तय किया गया है ताकि ब्राउज़र आपकी चौड़ाई को खत्म न करें (संभावित रूप से परेशानी में)
जेन्स रोलैंड

6
उन्होंने कभी नहीं कहा कि वे लेआउट के लिए तालिकाओं का उपयोग कर रहे थे।
टेक्सेलेट

@texelate table-layout:fixedCSS वह नहीं है जो आपको लगता है कि यह है। यह गणना ब्राउज़र की मात्रा को कम करता है जब केवल पहली पंक्ति के आकार की गणना करके तालिकाओं का प्रतिपादन करते हैं।
स्टीव बीपी

73

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">

1
यह वह विशिष्ट उत्तर है जिसकी मुझे तलाश थी। तो कृपया धन्यवाद। मुझे लगता है कि मैं आज रात थोड़ा बेहतर सोऊंगा।
3Dom

एकमात्र उत्तर pec द्वारा समर्थित है।
पीटरचूला

कृपया हमारे साथ साझा करें जहां डीटीडी में यह इस बारे में बताता है। यह पढ़ने के लिए एक आसान दस्तावेज नहीं है। धन्यवाद!
redolent

1
@redolent: मैंने अपने उत्तर में प्रासंगिक DTD नियम जोड़े।
मार्टिन लीवरेज

HTML5 युक्ति के बारे में क्या है जो XHTML नहीं है?
क्रश करें

38

नहीं, जरूरी नहीं।

यदि आपको टीडी के भीतर एक डीआईवी रखने की आवश्यकता है, तो सुनिश्चित करें कि आप टीडी का ठीक से उपयोग कर रहे हैं। यदि आप सारणीबद्ध डेटा, और शब्दार्थ के बारे में परवाह नहीं करते हैं, तो आप अंततः TD में DIVs के बारे में परवाह नहीं करेंगे। आप अगर - मैं वहाँ एक समस्या है, हालांकि है नहीं लगता कि है यह कर रहे हैं ठीक है, तुम।

HTML विनिर्देश के अनुसार

A <div>को रखा जा सकता है जहां प्रवाह सामग्री 1 अपेक्षित है , जो <td>सामग्री मॉडल है 2 है


2
मैं हमेशा एक प्रश्न का उत्तर हां या नहीं के साथ देना चाहता हूं;)
जानी हार्टिकेनन

+1 - वास्तव में कुछ विटिटल के साथ उत्तर देना चाहता था, लेकिन असफल रहा।
करीम k ९

हालाँकि इससे मुझे और भी उभार मिले, मुझे लगता है कि गुफ़ा ने एक ऐसा मुद्दा लाया, जिसे यहाँ संबोधित नहीं किया गया (और मेरे कूबड़ का स्रोत हो सकता है)
jcollum

14

एक टेबल-सेल में ब्लॉक-स्तर के तत्व वैध रूप से हो सकते हैं, इसलिए यह स्वाभाविक रूप से, एक फॉक्स-पेस नहीं है। निश्चित रूप से, ब्राउज़र का अनुमान, इसे एक सट्टा-सैद्धांतिक स्थिति छोड़ देता है। यह लेआउट की समस्या और बग पैदा कर सकता है।

यद्यपि टेबल लेआउट के लिए उपयोग किए जाते थे -और कभी-कभी अभी भी हैं- मुझे लगता है कि अधिकांश ब्राउज़र सामग्री को ठीक से प्रस्तुत करेंगे। यहां तक ​​कि आई.ई.


मुझे संदेह है कि ब्राउज़र कार्यान्वयन वह जगह है जहां मुझे मेरा "इंतजार है, यह एक बुरा विचार है"।
१२:०४ पर जूलम

13

यदि आप स्थिति का उपयोग करना चाहते हैं: निरपेक्ष; position: relative;td के साथ div पर आप मुद्दों में चलेंगे। एफएफ, सफारी और क्रोम (मैक, पीसी नहीं) हालांकि td के सापेक्ष div स्थिति नहीं देगा (जैसे कि आप उम्मीद करेंगे) यह divs के लिए भी सही display: table-whatever;है यदि आप ऐसा करना चाहते हैं, तो आपको दो div की जरूरत है, एक के लिए पात्रwidth: 100%; height: 100%; और कोई सीमा नहीं है, इसलिए यह बिना किसी दृश्य प्रभाव के td को भरता है। और फिर पूर्ण।

इसके अलावा क्यों सिर्फ सेल विभाजित नहीं?


6
एकमात्र व्यावहारिक, गैर-पवित्र उत्तर
एंटनी हैचकिंस

2

मैंने <div>अंदर रखकर समस्या का सामना किया है<td>

document.getElementById()अगर मैं अंदर td का उपयोग करके div को पहचानने में असमर्थ था । लेकिन बाहर, यह ठीक काम कर रहा था।


1

जैसा कि सभी ने उल्लेख किया है, यह लेआउट उद्देश्यों के लिए एक अच्छा विचार नहीं हो सकता है। मैं इस सवाल पर पहुंचा क्योंकि मैं भी यही सोच रहा था और मैं केवल यह जानना चाहता था कि क्या यह वैध कोड होगा।

चूंकि यह वैध है, आप इसे अन्य उद्देश्यों के लिए उपयोग कर सकते हैं। उदाहरण के लिए, जो मैं इसका उपयोग करने जा रहा हूं, वह कुछ फैंसी "CSSed" divs को टेबल की पंक्तियों के अंदर रखना है और फिर एक त्वरित jQuery फ़ंक्शन का उपयोग करके उपयोगकर्ता को मूल्य, नाम, आदि द्वारा जानकारी को सॉर्ट करने की अनुमति देता है। केवल लेआउट तालिका मुझे "ऊर्ध्वाधर क्रम" देगी, लेकिन मैं सीएसएस द्वारा विभाजनों की चौड़ाई, ऊंचाई, पृष्ठभूमि आदि को नियंत्रित करूंगा।



-4

यह शब्दार्थ को तोड़ता है , बस। यह ठीक काम करता है, लेकिन स्क्रीन रीडर या सड़क के नीचे कुछ हो सकता है जो आपके एचटीएमएल को संसाधित करने का आनंद नहीं लेगा यदि आप "शब्दार्थ तोड़ते हैं"।


13
@Greg, यह शब्दार्थ क्यों तोड़ता है? एक div पृष्ठ सामग्री का केवल एक ब्लॉक-स्तरीय विभाजन या उप-विभाजन है। जैसे कि यह अनिवार्य रूप से और अप्रासंगिक रूप से एंटी-सेमैटिक नहीं है कि उन्हें एक टेबल सेल के भीतर रखा जाए।
डेविड का कहना है कि मोनिका

2
मैंने आपके लिए कई प्रतिक्रियाएँ लिखने की कोशिश की, जो मेरे उत्तर को सही ठहराती हैं, लेकिन मैं व्यक्तिगत राय पर कायम रहा। : / मुझे लगता है कि मेरी सबसे अच्छी प्रतिक्रिया यह होगी कि आपके सेल में जो कुछ भी है वह संभवतः एक और HTML टैग द्वारा बेहतर रूप से प्रस्तुत किया जा सकता है। यदि आप वास्तव में अपनी कोशिकाओं को घटकों में विभाजित कर रहे हैं, तो शायद आपको शुरू करने के लिए तालिका का उपयोग नहीं करना चाहिए, आपको अपने लेआउट के लिए DIV की एक श्रृंखला को स्टाइल करना चाहिए। मुझे यकीन नहीं है कि मैं इसे बेहतर शब्दों में क्यों नहीं डाल सकता ... इसे IMHO तक चाक करें, मुझे लगता है।
ग्रेग

हम्म, क्या आपका मतलब है कि एक टीडी शब्द एक डीआईवाई के समान शब्द है, इसलिए उनमें से दो एक पंक्ति में क्यों हैं?
१२:०४ पर जूलम

2
@jcollum: नहीं, मैं नहीं कहूंगा कि वे शब्दार्थ रूप से समान हैं। टीडी निश्चित रूप से एक तालिका में एक सेल है; यह एक ज्ञात संरचना का एक हिस्सा है: एक तालिका में पंक्तियाँ होती हैं, एक पंक्ति में कोशिकाएँ होती हैं, कोशिकाओं में डेटा होता है। DIV सिर्फ एक कंटेनर है ... यह दस्तावेज़ में कहीं भी किसी भी समय किसी भी चीज़ का प्रतिनिधित्व कर सकता है - आपको मार्कअप में उद्देश्य के संदर्भ में इसमें से किसी भी शब्दार्थ को प्राप्त करने के लिए शैली को लागू करना होगा।
ग्रेग

7
DIV शब्दशः अर्थहीन है, इसलिए मैं यह नहीं देखता कि यह कैसे गलत हो सकता है।
रेक्स एम।
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.