सीएसएस का उपयोग करना नाम मूल्य जोड़े को प्रदर्शित करने के लिए सबसे अच्छा तरीका है?

Question

क्या मुझे अभी भी टेबल का उपयोग करना चाहिए?

तालिका कोड मैं जगह होगी है:

<table> 
    <tr> 
     <td>Name</td><td>Value</td> 
    </tr> 
    ... 
</table> 

कि मैं क्या मैं

<label class="name">Name</label><label class="value">Value</value><br /> 
... 

विचारों और ऑनलाइन नमूने के लिए लिंक बहुत सराहना की तरह कुछ करना चाहिए था पढ़ने किया गया है से। मैं अपनी डिजाइन गहराई से एक डेवलपर तरीका हूँ।

संपादित करें: मेरी जरूरत दोनों के लिए सक्षम एक उपयोगकर्ता के लिए डेटा का प्रदर्शन और एक अलग में मान संपादित करने के लिए (लेकिन समान के पास) रूप हो रहा है।

Answer 1

मुझे लगता है कि परिभाषा सूचियां नाम/मूल्य जोड़े के लिए बहुत करीब हैं।

<dl> 
    <dt>Name</dt> 
    <dd>Value</dd> 
</dl> 

Definition lists - misused or misunderstood?

Answer 2

मुझे लगता है कि टेबल सबसे अच्छा सारणीबद्ध डेटा, ऐसा लगता है जो आप देखते है के लिए उपयोग किया जाता है।

आप तालिकाओं का उपयोग नहीं करना चाहते हैं, सबसे अच्छी बात परिभाषा सूचियों का उपयोग करने के लिए होगा (<dl> and <dt>)। यहां अपने पुराने <td> लेआउट की तरह दिखने के लिए उन्हें स्टाइल करने का तरीका बताया गया है। http://maxdesign.com.au/articles/definition/

Answer 3

नाव का उपयोग करें: संपत्ति जैसे: सीएसएस:

.left { 
    float:left; 
    padding-right:20px 
} 

एचटीएमएल:

<div class="left"> 
Name<br/> 
AnotherName 
</div> 
<div> 
Value<br /> 
AnotherValue 
</div> 

Answer 4

यह क्या सारणीबद्ध हो रहा है के लिए तालिकाओं का उपयोग करने के लिए पूरी तरह से उचित है डेटा।

Answer 5

मैं एक रूप लिख रहा हूँ अगर मैं आम तौर पर इस का उपयोग करें:

<form ... class="editing"> 
    <div class="field"> 
     <label>Label</label> 
     <span class="edit"><input type="text" value="Value" ... /></span> 
     <span class="view">Value</span> 
    </div> 
    ... 
</form> 

तब मेरे सीएसएस में:

.editing .view, .viewing .edit { display: none } 
.editing .edit, .editing .view { display: inline } 

फिर एक छोटे से जावास्क्रिप्ट के साथ मैं संपादन से फार्म के वर्ग स्वैप कर सकते हैं देखने के लिए।

मैं इस दृष्टिकोण के बाद से आप प्रदर्शित करने और लगभग एक ही लेआउट के साथ डेटा को संपादित करना चाहता था उल्लेख है और इस में यह करने का एक तरीका है।

Answer 6

macbirdie की तरह मैं इस तरह डेटा को चिह्नित करने के लिए एक परिभाषा सूची के रूप में जब तक मौजूदा तालिका की सामग्री वास्तव में सारणीबद्ध ही संतोष करना आंका जा सकता है इच्छुक होगी।

मैं जिस तरह से आप का प्रस्ताव में लेबल टैग का उपयोग कर से बचने चाहते हैं। लेबल टैग @http://www.w3schools.com/tags/tag_label.asp की व्याख्या पर एक नज़र डालें - यह वास्तव में आपको इसके संबंधित नियंत्रण पर ध्यान केंद्रित करने की अनुमति देने का इरादा है। एक अर्थपूर्ण बिंदु से जेनेरिक divs और spans का उपयोग करने से बचें, वे कमजोर हैं।

आप एक स्क्रीन पर प्रदर्शन के कई नाम और मान के जोड़े, लेकिन एक संपादन स्क्रीन पर संपादन केवल एक ही कर रहे हैं, मैं पूर्व स्क्रीन पर एक मेज, और बाद में एक परिभाषा सूची का उपयोग करेंगे।

Answer 7

क्षैतिज परिभाषा सूचियों बहुत अच्छी तरह से काम करते हैं, अर्थात

<dl class="dl-horizontal"> 
     <dt>ID</dt> 
     <dd>25</dd> 

     <dt>Username</dt> 
     <dd>Bob</dd> 
    </dl> 

dl-horizontal वर्ग बूटस्ट्रैप सीएसएस ढांचे द्वारा प्रदान की जाती है।