Email HTML - Có cho phép colspan không?

Question

Tôi đã tự hỏi nếu tôi sử dụng thuộc tính colspan trong một bảng HTML mà tôi dự định sẽ có dưới dạng email, sẽ gửi email cho khách hàng (Outlook, v.v.) hiểu colspan có gì không, vì tôi đã đọc rằng điều này có thể gây ra sự cố với bố trí?

Answer 1

Đúng. Tất cả đánh dấu HTML được cho phép nhiều nhất nếu không phải tất cả các ứng dụng email. Khi nói đến kịch bản, sau đó bạn đã có một vấn đề để tranh luận, cho kịch bản chỉ đơn giản là không được cho phép bởi hầu hết nếu không phải tất cả các khách hàng email.

Answer 2

Id chỉ cần thêm một chút đầu vào cho câu hỏi của bạn

Colspan có thể được sử dụng nhưng tôi sẽ đề xuất chống lại nó. Bất cứ khi nào tôi tạo email (6 tháng kinh nghiệm) tôi đã luôn luôn sử dụng bảng lồng nhau. Ngoài ra, bạn chỉ có thể sử dụng css nội tuyến trong email vì vậy tôi sẽ rất cẩn thận bằng cách sử dụng ngay cả lề và đệm.

Vài điều tôi làm trên mọi email.

Luôn sử dụng mã này trong mọi hình ảnh trên trang của bạn. Nó sẽ sửa một không gian gmail bên dưới lỗi hình ảnh.

style="display:block" 

Cũng sử dụng border = "0" trên bất kỳ liên kết hình ảnh nào để ngăn chặn đường viền màu xanh xuất hiện.

Tôi hy vọng điều này sẽ hữu ích!

Answer 3

Một mẹo ngoài các style = "display: block' là thêm line-height: 0 trên với một hình ảnh trong - đây phân loại ra các lỗi khoảng trắng lẻ trong Outlook 2007.

tôi sử dụng colspans tất cả thời gian nhưng cũng làm tổ bảng nếu có thể - tránh các hàng rào - chúng là cơn ác mộng, và khi bạn làm tổ bàn không đi quá điên và làm tổ 4/5 hoặc 6, tôi thấy điều đó bắt đầu nhúc nhích mọi thứ.

Answer 4

Colspan và rowspan đều được hỗ trợ đầy đủ trong tất cả các ứng dụng email chính, chúng khó khăn hơn, nhưng nếu bạn hiểu đúng, chúng là một lựa chọn tuyệt vời kết hợp với các bảng lồng nhau

Lý do họ có danh tiếng không tốt, bên cạnh khó khăn là vì có một sự lừa đảo cụ thể trong Outlook mà bạn cần phải cân nhắc, nếu không bố cục của bạn có thể bị hỏng.

colspan:

Outlook có một vấn đề mà nếu bạn đặt một colspan trong hàng đầu tiên của một bảng, nó sẽ mess lên độ rộng của các hàng tiếp theo. Công việc xung quanh cho điều này là bạn cần phải xác định chiều rộng ô của bạn ở hàng trên cùng, ngay cả khi nó là một hàng trống.

Dưới đây là một ví dụ:

<!-- 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:

Thậm chí nhiều hơn tránh hơn colspan là rowspan. Tôi đã tìm thấy nó thực sự có thể hiển thị thường xuyên hơn so với các bảng lồng tùy thuộc vào đối tượng mục tiêu của bạn. Điều này là do các hàng (đặc biệt là một hàng được mở rộng) không tách biệt nhiều như các bảng khi chuyển tiếp email từ Outlook do các thẻ <p class="msoNormal"> Outlook kết thúc tốt đẹp xung quanh chúng. Những khoảng trống đặc biệt là không thể tránh khỏi nếu ai đó forwards your email to Gmail.

Một điều cần lưu ý là rowpan dường như không hoạt động với Blackberry (mà tôi sẽ không xem xét một khách hàng lớn). Vì vậy, giống như với bất cứ điều gì trong email html, bạn cần phải chơi các trò chơi tỷ lệ phần trăm và quyết định nơi bạn ít muốn nó phá vỡ.

Một ví dụ cơ bản của colspan và rowspan làm việc cùng nhau:

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

Để thực hiện một cái gì đó tương tự như này mà không rowspan/colspan, bạn sẽ phải chia các tế bào bảng hình chữ nhật thành các ô vuông nhỏ. Hãy tưởng tượng nếu ô trên cùng bên phải là một hình ảnh chồng lên tiêu đề see this question for a real world example. Nếu bạn đã tránh các hàng rào và chia hình ảnh biểu trưng theo chiều ngang trong hai ô được xếp chồng lên nhau, điều này sẽ trở nên có vấn đề khi Outlook thực hiện điều đó. Không ai thích một đường may trong hình ảnh của họ.

Trong email html, bạn luôn có thể chia hình ảnh theo chiều dọc mà không gặp bất kỳ rủi ro về đường nối/khoảng trống nào, nhưng theo quy tắc, bạn nên luôn tránh chia nhỏ hình ảnh theo chiều ngang. Rowspan giúp tránh điều này trong các tình huống khi bạn muốn hình ảnh trùng lặp.

Một lưu ý cuối cùng - Outlook cũng có cùng vấn đề kéo dài với rowspan giống như với colspan. Bạn cần phải thiết lập chiều cao hàng của bạn trong cột đầu tiên để nó tôn trọng chiều cao của các hàng được kéo dài tiếp theo. Đây là một số example of that. Lưu ý ô đầu tiên trong mỗi hàng trống.

Answer 5

Rowspans và Colspans không sao nhưng tôi thực sự khuyên bạn nên sử dụng các bảng lồng nhau. Tuy nhiên, bạn sẽ có các dòng mã bổ sung, điều này sẽ giúp bạn tiết kiệm từ mọi lần ngắt trên các ứng dụng email khác.