का उपयोग div .. ठीक है, लेकिन टेबल आसान है, इसलिए

Question

दोस्तों मैं एक प्रोग्रामर हूँ और जब मैं कुछ है कि आंखों में एक मेज की तरह दिखता है जोड़ सकते हैं और एचटीएमएल तालिकाओं का उपयोग करने की जरूरत है, मैं हमेशा अपने साथी वेब द्वारा smaked हो डिजाइनरों। मैं divs के लिए एक सामान्य एचटीएमएल div संरचना कैसे बना सकता हूं ताकि मैं इसे प्राप्त कर सकूं और हमेशा एचटीएमएल पेस्ट की प्रतिलिपि बना सकता हूं जब मुझे किसी टेबल की तरह दिखने की ज़रूरत होती है?

तो इस तालिका एचटीएमएल संरचना

<table> 
<tr><td></td><td></td></tr> 
<tr><td></td><td></td></tr> 
<tr><td></td><td></td></tr> 
</table> 

समान div संरचना क्या है के मामले में

?

Answer 1

आप प्रदर्शन table, table-row, और table-cell का उपयोग करना चाहेंगे:

सीएसएस:

.table 
{ 
    display:table; 
} 

.table-row 
{ 
    display:table-row; 
} 

.table-cell 
{ 
    display:table-cell; 
} 

HTML:

<div class="table"> 
    <div class="table-row"> 
     <div class="table-cell">1</div> 
     <div class="table-cell">2</div> 
    </div> 
    <div class="table-row"> 
     <div class="table-cell">3</div> 
     <div class="table-cell">4</div> 
    </div> 
</div> 

Demo

ध्यान दें कि table, table-row, और table-cell प्रदर्शन मान IE7 या नीचे में समर्थित नहीं हैं और IE8 को एक की आवश्यकता है! DOCTYPE।

इसके अलावा, टेबल के बाद से यह वर्गों के साथ div के का एक समूह से अधिक मार्कअप अधिक अर्थ अर्थ देता है सारणीबद्ध डेटा का प्रतिनिधित्व करने के लिए इस्तेमाल किया जाना चाहिए। आपको लेआउट उद्देश्यों के लिए टेबल का उपयोग नहीं करना चाहिए।

Answer 2

मैं सादगी के लिए इनलाइन शैलियों का उपयोग करेंगे, लेकिन उन्हें कोई वास्तविक परियोजना में सिफारिश नहीं होगा:

<div style="overflow: hidden"> 
    <div style="width: 50%; float: left"></div> 
    <div style="width: 50%; float: right"></div> 
    <div style="width: 50%; clear: both; float: left"></div> 
    <div style="width: 50%; float: right"></div> 
</div> 

यह कई समाधानों में से एक है।

overflow: hidden बिट कंटेनर div "स्वयं स्पष्ट" करने के लिए प्रयोग किया जाता है (इसके बिना div इसके फ़्लोट किए गए बच्चों के चारों ओर लपेट नहीं जाएगा)। तीसरे div दोनों को साफ़ करने का कारण यह है कि यह अपनी पंक्ति पर प्रस्तुत करता है।

संपादित करें: चूंकि divs 50% चौड़ाई है, इसलिए हर दूसरे div को दाईं ओर तैरने की आवश्यकता नहीं है (आप उन्हें सभी को बाईं ओर तैर सकते हैं और यह समान दिखाई देगा) लेकिन यदि आप divs के बीच कुछ मार्जिन चाहते हैं तो आप कर सकते हैं बस चौड़ाई बदलें और हर दूसरे div को अभी भी दाईं ओर गठबंधन किया जाएगा (जो मामला नहीं होगा अगर वे सभी बाईं ओर तैर गए थे)।

संपादित करें: आप तालिका डेटा को चिह्नित (के रूप में कुछ टिप्पणियों का सुझाव) तब तक हर तरह तालिका तत्व के साथ चिपके रहते हैं वास्तव में कर रहे हैं। यही वह है जो इसके लिए है। आपको बिल्कुल को table, tr और td से div एस पर उसी नाम के वर्गों से स्विच करना चाहिए।

Answer 3

आप तालिका डेटा के लिए HTML table तत्व उपयोग कर रहे हैं, तो मैं तुम्हें अपने साथी वेब डिजाइनर वापस एक प्रकार का जहाज़ सलाह देते हैं!

एचटीएमएल टेबल बुरा नहीं हैं, यह & स्वीकार्य है, टैबलेट डेटा प्रदर्शित करते समय HTML table का उपयोग करने के लिए स्वीकार्य है।

http://webdesign.about.com/od/tables/a/aa122605.htm

Answer 4

मैं सुझाव powerbuoy जैसे कुछ लेआउट का उपयोग करने का सुझाव देते हैं, लेकिन आप अपने सीएसएस में एक ग्रिड प्रणाली का उपयोग करने के डिजाइन लेआउट केंद्रीकृत करने के लिए चाहते हो सकता है के बाद से आप विभिन्न परिदृश्यों में विभिन्न आकार के लिए संरचना फिट करने के लिए चाहता हूँ ।

.left { float:left; } 
.right { float: right } 
.onetenth { width: 10%; } 
.onetwentieth { width: 5%; } 

और इतने पर ...

मैं तुमसे वादा करता हूँ इस दृष्टिकोण एक बहुत उच्च प्रदर्शन में जिसके परिणामस्वरूप द्वारा अपने स्टाइल कम हो जाएगा।

देखें: https://github.com/stubbornella/oocss/wiki/ (वस्तु उन्मुख सीएसएस)