Làm cách nào để bạn đặt một bảng trong phần thân của email bằng html?

If there’s only one thing you to know about coding email, it’s that tables rule the day. Forget that old “separation of structure, presentation, and behavior” nonsense you learned in standards-based web design. Unlike modern web design the

element isn’t used just for tabular data, it’s all there is for consistent structure. External CSS doesn’t drive the styling, either; emails depend on inlined CSS.

bảng trong bảng

For finer control of your HTML, try nesting

elements when building emails. At its simplest, an email should be at least two tables deep:

This is where my content goes.

Có một lý do chính đáng;

Không Quá Rộng

Các phương pháp hay nhất hiện tại quy định rằng email phải có chiều rộng khoảng 600px và chúng tôi nhận thấy rằng 800px là giới hạn trên khả thi. Bảng thứ hai - trong trường hợp này là emailContainer - là nơi bạn có thể đặt chiều rộng đó

    
        
            
                
                    
                        This is where my content goes.
                    
                
            
        
    

Nhiều ứng dụng email hiện có các cửa sổ 'xem trước' nơi email được hiển thị mà không cần người dùng thực sự 'mở' nó. Thật không may, những cửa sổ xem trước đó có xu hướng khá nhỏ. Phạm vi 600 - 800 pixel này là phạm vi có xu hướng vừa vặn trong các cửa sổ nhỏ này

Thuộc tính HTML

Mặc dù phần lớn kiểu dáng trong HTML dựa trên tiêu chuẩn được thực hiện thông qua CSS, nhưng đôi khi kiểu dáng thông qua các thuộc tính HTML hoạt động tốt hơn cho email. Bởi vì một số ứng dụng email lớn đang chạy trên các công cụ kết xuất lỗi thời nên chúng có xu hướng hiểu rõ hơn về các thuộc tính

Các thuộc tính ở trên, đường viền, ô đệm, không gian ô, chiều rộng, căn chỉnh và valign được hỗ trợ trong tất cả các ứng dụng email, khiến chúng trở nên lý tưởng để thiết lập một số kiểu dáng cơ bản trước khi bạn bắt đầu sử dụng CSS

Mã đáp ứng

Chỉ vì bạn buộc phải viết mã phù hợp hơn cho web của năm 1998 không có nghĩa là tất cả đều tệ. Có thể cổ xưa như việc sử dụng các bảng để xây dựng email, các kỹ thuật mới như thiết kế web đáp ứng đang tìm đường vào email HTML. Khi bạn viết mã, hãy cố gắng làm cho mọi email phản hồi nhanh;

    
        
            
                
                    
                        
                            
                                
                                    This is where my header content goes.
                                
                            
                        
                    
                
                
                    
                        
                            
                                
                                    This is where my body content goes.
                                
                            
                        
                    
                
                
                    
                        
                            
                                
                                    This is where my footer content goes.
                                
                            
                        
                    
                
            
        
    

Bằng cách thêm các bảng khác, emailHeader, emailBody và emailFooter và đặt độ rộng của chúng thành 100%, bạn chỉ cần thao tác với bảng emailContainer. Các bảng độc lập này giúp việc tạo email hoạt động tốt trên màn hình nhỏ trở nên đơn giản hơn