टेबल कोशिकाओं को समान रूप से दूरी कैसे प्राप्त करें?

Question

मैं उन पर कई स्थिर HTML तालिकाओं वाला एक पृष्ठ बनाने की कोशिश कर रहा हूं।

तालिका में प्रत्येक कॉलम के समान आकार को प्रत्येक कॉलम को प्रदर्शित करने के लिए मुझे क्या करने की आवश्यकता है?

<span class="Emphasis">Interest rates</span><br /> 
<table cellpadding="0px" cellspacing="0px" class="PerformanceTable"> 
    <tr><th class="TableHeader"></th><th class="TableHeader">Current rate as at 31 March 2010</th><th class="TableHeader">31 December 2009</th><th class="TableHeader">31 March 2009</th></tr> 
    <tr class="TableRow"><td>Index1</td><td class="PerformanceCell">1.00%</td><td>1.00%</td><td>1.50%</td></tr> 
    <tr class="TableRow"><td>index2</td><td class="PerformanceCell">0.50%</td><td>0.50%</td><td>0.50%</td></tr> 
    <tr class="TableRow"><td>index3</td><td class="PerformanceCell">0.25%</td><td>0.25%</td><td>0.25%</td></tr> 
</table> 
<span>Source: Bt</span><br /><br /> 

<span class="Emphasis">Stock markets</span><br /> 
<table cellpadding="0px" cellspacing="0px" class="PerformanceTable"> 
    <tr><th class="TableHeader"></th><th class="TableHeader">As at 31 March 2010</th><th class="TableHeader">1 month change</th><th class="TableHeader">QTD change</th><th class="TableHeader">12 months change</th></tr> 
    <tr class="TableRow"><td>index1</td><td class="PerformanceCell">1169.43</td><td class="PerformanceCell">5.88%</td><td class="PerformanceCell">4.87%</td><td class="PerformanceCell">46.57%</td></tr> 
    <tr class="TableRow"><td>index2</td><td class="PerformanceCell">1958.34</td><td class="PerformanceCell">7.68%</td><td class="PerformanceCell">5.27%</td><td class="PerformanceCell">58.31%</td></tr> 
    <tr class="TableRow"><td>index3</td><td class="PerformanceCell">5679.64</td><td class="PerformanceCell">6.07%</td><td class="PerformanceCell">4.93%</td><td class="PerformanceCell">44.66%</td></tr> 
    <tr class="TableRow"><td>index4</td><td class="PerformanceCell">2943.92</td><td class="PerformanceCell">8.30%</td><td class="PerformanceCell">-0.98%</td><td class="PerformanceCell">44.52%</td></tr> 
    <tr class="TableRow"><td>index5</td><td class="PerformanceCell">978.81</td><td class="PerformanceCell">9.47%</td><td class="PerformanceCell">7.85%</td><td class="PerformanceCell">26.52%</td></tr> 
    <tr class="TableRow"><td>index6</td><td class="PerformanceCell">3177.77</td><td class="PerformanceCell">10.58%</td><td class="PerformanceCell">6.82%</td><td class="PerformanceCell">44.84%</td></tr> 
</table> 
<span>Source: B</span><br /><br /> 

मैं भी यह कैसे साफ करने के लिए पर सुझाव के लिए खुला रहा हूँ, यदि कोई हो तो:

एचटीएमएल इस प्रकार है? :-)

संपादित करें: मैं जोड़ने चाहिए कि cellpadding & cellspacing गुण उपयोग हम कि

Answer 1

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

table.PerformanceTable { 
    table-layout: fixed; 
    width: 500px; 
} 
    table.PerformanceTable td.PerformanceCell { 
     width: 75px; 
    } 

tidying up के लिए सुझाव? आपको cellpadding या cellspacing विशेषताओं, या TableRow और TableHeader कक्षाओं की आवश्यकता नहीं है। आप सीएसएस में उन लोगों से दूर कवर कर सकते हैं:

table { 
    /* cellspacing */ 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
th { 
    /* This covers the th elements */ 
} 
tr { 
    /* This covers the tr elements */ 
} 
th, td { 
    /* cellpadding */ 
    padding: 0; 
} 

आप एक शीर्षक <span class="Emphasis"> के बजाय (जैसे <h2>) और एक <p> या एक मेज स्रोत <span> के बजाय <caption> उपयोग करना चाहिए। आपको <br> तत्वों की आवश्यकता नहीं होगी, क्योंकि आप उचित ब्लॉक स्तर तत्वों का उपयोग करेंगे।

Answer 2

तुम हमेशा सिर्फ 100% करने के लिए प्रत्येक टीडी की चौड़ाई निर्धारित कर सकते हैं एक 3 पार्टी पीडीएफ रूपांतरण एप्लिकेशन द्वारा की आवश्यकता होती है/एन कॉलम

<td width="x%"></td> 

Answer 3

अपने सीएसएस फ़ाइल में:

.TableHeader { width: 100px; } 

यह 100px करने के लिए प्रत्येक शीर्षक के नीचे td के सभी टैग सेट हो जाएगा। आप प्रत्येक व्यक्ति th टैग पर चौड़ाई परिभाषा (मार्कअप में) भी जोड़ सकते हैं, लेकिन उपर्युक्त समाधान आसान होगा।

Answer 4

आप अपने सभी कॉलम एक निश्चित आकार चाहते हैं, आप सीएसएस इस्तेमाल कर सकते हैं:

td.PerformanceCell 
{ 
    width: 100px; 
} 

या बेहतर, th.TableHeader का उपयोग करें (मैं नोटिस नहीं था कि पहली बार के आसपास)।

Answer 5

मैं इस बारे में सुझाव देने के लिए भी खुला हूं कि अगर कोई है तो इसे कैसे साफ किया जाए? :-)

ठीक है, आप अर्थपूर्ण कारणों से span तत्व का उपयोग नहीं कर सके। और आपको कक्षा PerformanceCell परिभाषित करने की आवश्यकता नहीं है। कोशिकाओं और पंक्तियों को क्रमशः PerformanceTable tr {} और PerformanceTable tr {} का उपयोग करके एक्सेस किया जा सकता है।

अंतरण भाग के लिए, मुझे कई बार एक ही समस्या मिली है।मैं शर्मनाक रूप से मानता हूं कि मैंने समस्या से परहेज किया है, इसलिए मैं भी किसी भी उत्तर के लिए उत्सुक हूं।

Answer 6

तालिका की चौड़ाई लें और इसे सेल() की संख्या से विभाजित करें।

PerformanceTable {width:500px;}  
PerformanceTable.td {width:100px;} 

मेज गतिशील रूप से चौड़ी या आप गतिशील रूप से एक छोटे से जावास्क्रिप्ट के साथ सेल के आकार को बढ़ा सकता है सिकुड़ता है।

Answer 7

मैं एक HTML ईमेल डिज़ाइन कर रहा था और इसी तरह की समस्या थी। लेकिन निश्चित चौड़ाई वाले प्रत्येक सेल को वह नहीं है जो मैं चाहता हूं। मैं कॉलम की सामग्री के बीच बराबर अंतर रखना चाहता हूं, जैसे कि

| --- कुछ --- --- --- एक बहुत लंबी बात --- --- --- लघु --- |

परीक्षण और त्रुटि के एक बहुत बाद, मैं निम्नलिखित

<style> 
    .content {padding: 0 20px;} 
</style> 

table width="400" 
    tr 
     td 
      a.content something 
     td 
      a.content a very long thing 
     td 
      a.content short 

चिंता के मुद्दों के साथ आया था:

1. आउटलुक 2007/2010/2013 गद्दी का समर्थन नहीं करते। तालिका सेट की चौड़ाई होने से कॉलम की चौड़ाई स्वचालित रूप से सेट हो जाएगी। इस तरह, हालांकि सामग्री बराबर दूरी नहीं होगी। उनमें कम से कम उनके बीच कुछ अंतर है।

2. तालिका कॉलम के लिए स्वत: चौड़ाई सेटिंग सामग्री के बीच समान दूरी नहीं देगी सामग्री के लिए जोड़ा गया पैडिंग बराबर दूरी को मजबूर करेगा।