एचटीएमएल ईमेल - क्या कोलस्पेन की अनुमति है?

Question

अगर मैं एक HTML तालिका में कॉल्सपन विशेषता है कि मैं एक ईमेल के रूप में करने का इरादा का उपयोग मैं सोच रहा था, ग्राहकों ईमेल करेंगे (आउटलुक आदि ...), समझने की क्या कॉल्सपन करता है के रूप में मैं पढ़ा है कि इस के साथ एक समस्या के कारण हो सकता लेआउट?

Answer 1

हाँ। यदि सभी ईमेल क्लाइंट नहीं हैं तो सभी HTML मार्कअप की अनुमति है। जब स्क्रिप्टिंग की बात आती है, तो आपको सामना करने का कोई मुद्दा मिल गया है, क्योंकि सभी ईमेल क्लाइंट्स के लिए स्क्रिप्टिंग की अनुमति नहीं है।

Answer 2

बस सोचा आईडी अपने प्रश्न का इनपुट का एक सा जोड़ने

कॉल्सपन इस्तेमाल किया जा सकता, लेकिन मैं इसके खिलाफ सुझाव है। जब भी मैं ईमेल बनाता हूं (6 महीने का अनुभव) मैंने हमेशा नेस्टेड टेबल का उपयोग किया है। इसके अलावा आप केवल ईमेल में इनलाइन सीएसएस का उपयोग कर सकते हैं, इसलिए मैं मार्जिन और पैडिंग का उपयोग करके बहुत सावधान रहूंगा।

बातें मैं हर ईमेल पर कर की युगल।

हमेशा अपने पृष्ठ पर हर छवि में इस कोड का उपयोग। यह छवि बग के नीचे एक जीमेल स्पेस को सही करेगा।

style="display:block" 

नीली सीमा दिखाई देने के लिए किसी भी छवि लिंक पर सीमा = "0" का भी उपयोग करें।

मुझे आशा है कि इससे मदद मिलती है!

Answer 3

लिए शैली = "प्रदर्शन के अलावा एक और टिप: ब्लॉक 'जोड़ने के लिए line-height है: में एक छवि के साथ पर 0 - यह Outlook 2007 में अजीब खाली स्थान के बग को ठीक कर लेगा

मैं colspans का उपयोग हर समय, लेकिन यह भी घोंसला टेबल जहां संभव - rowspans से बचने -। वे बुरा सपना हो रहे हैं, और जब आप ऐसा करेंगे घोंसला टेबल भी पागल और घोंसला 4/5 या 6 नहीं जाते हैं, मुझे लगता है कि चीजों को गोबर के लिये शुरू होता है लगता है

Answer 4

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

कठिनाई के अलावा, उनकी बुरी प्रतिष्ठा है क्योंकि Outlook में एक विशेष क्विर्क है जिसे आपको ध्यान में रखना होगा, अन्यथा आपका लेआउट टूट सकता है।

कॉल्सपन:

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

<!-- the second row in this example will not respect the specified widths in Outlook --> 
<table width="600" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td width="600" colspan="3" bgcolor="#757575">&nbsp; 
    </td> 
    </tr> 
    <tr> 
    <td width="200" bgcolor="#353535">&nbsp; 
    </td> 
    <td width="400" bgcolor="#454545">&nbsp; 
    </td> 
    <td width="200" bgcolor="#555555">&nbsp; 
    </td> 
    </tr> 
</table> 


<!-- here is the fix - note the empty row at the top enforces the specified width in Outlook --> 
<table width="600" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td width="200"> 
    </td> 
    <td width="400"> 
    </td> 
    <td width="200"> 
    </td> 
    </tr> 
    <tr> 
    <td width="600" colspan="3" bgcolor="#757575">&nbsp; 
    </td> 
    </tr> 
    <tr> 
    <td width="200" bgcolor="#353535">&nbsp; 
    </td> 
    <td width="400" bgcolor="#454545">&nbsp; 
    </td> 
    <td width="200" bgcolor="#555555">&nbsp; 
    </td> 
    </tr> 
</table> 

---

rowspan:

इससे भी अधिक से बचा से कॉल्सपन रोस्पेन है

यहाँ एक उदाहरण है। मैंने पाया है कि यह वास्तव में आपके लक्षित दर्शकों के आधार पर घोंसले तालिकाओं की तुलना में अधिक लगातार प्रदर्शित कर सकता है। ऐसा इसलिए है क्योंकि <p class="msoNormal"> टैग्स के कारण Outlook से ईमेल अग्रेषित करते समय पंक्तियों (विशेष रूप से एक स्पैन किए गए) को टेबल के रूप में अलग नहीं किया जाता है। यदि forwards your email to Gmail कोई है तो ये अंतराल विशेष रूप से अपरिहार्य हैं।

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

कॉल्सपन और रोस्पेन एक साथ काम करने का एक बुनियादी उदाहरण:

<table width="600" border="0" cellpadding="0" cellspacing="0"> 
    <tr><!-- hidden row to establish widths in Outlook --> 
    <td width="200"> 
    </td> 
    <td width="200"> 
    </td> 
    <td width="200"> 
    </td> 
    </tr> 
    <tr> 
    <td width="400" height="200" colspan="2" bgcolor="#333333">... 
    </td> 
    <td width="200" height="400" rowspan="2" bgcolor="#444444">... 
    </td> 
    </tr> 
    <tr> 
    <td width="200" height="400" rowspan="2" bgcolor="#555555">... 
    </td> 
    <td width="200" height="200" bgcolor="#666666">... 
    </td> 
    </tr> 
    <tr> 
    <td width="400" height="200" colspan="2" bgcolor="#777777">... 
    </td> 
    </tr> 
</table> 

बिना रोस्पेन/कॉल्सपन यह करने के लिए कुछ इसी तरह पूरा करने के लिए, आप छोटे वर्गों में आयताकार तालिका सेल को विभाजित करने के लिए होगा। कल्पना करें कि शीर्ष दायां कक्ष शीर्षलेख see this question for a real world example पर ओवरलैप करने वाली छवि थी। यदि आप पंक्तियों से बचने के लिए थे और लोगो की छवि क्षैतिज रूप से दो स्टैक्ड कोशिकाओं के भीतर विभाजित करते थे, तो यह समस्याग्रस्त हो जाएगा जब Outlook यह असामान्य चीज़ करता है। उनकी छवि में कोई भी सीम पसंद नहीं करता है।

एचटीएमएल ईमेल में, आप सीम/अंतराल के किसी भी जोखिम के बिना छवियों को लंबवत रूप से विभाजित कर सकते हैं, लेकिन एक नियम के रूप में, आपको हमेशा क्षैतिज रूप से एक छवि को विभाजित करने से बचना चाहिए। जब आप छवियों को ओवरलैप करना चाहते हैं तो रोस्पेन परिदृश्यों में इससे बचने में मदद करता है।

एक आखिरी नोट - आउटलुक में रोशन के साथ समान स्पैनिंग समस्या भी है जैसा कि यह कोलस्पेन के साथ करता है। बाद में फैली पंक्तियों की ऊंचाइयों का सम्मान करने के लिए आपको पहले पंक्ति में अपनी पंक्ति ऊंचाई स्थापित करने की आवश्यकता है। यहां एक example of that है। ध्यान दें कि प्रत्येक पंक्ति में पहला सेल खाली है।

Answer 5

रोप्सपैन और कोल्स्पान ठीक हैं लेकिन मैं दृढ़ता से सुझाव देता हूं कि आप नेस्टेड टेबल का उपयोग करें। आपके पास कोड की अतिरिक्त पंक्तियां होंगी, हालांकि, यह आपको अन्य ईमेल क्लाइंटों पर किसी भी ब्रेक से बचाएगी।