Pendekatan Tata Letak Berbasis Tabel

Klien surel—terutama Outlook di Windows, yang menggunakan mesin perenderan Microsoft Word—tidak mendukung tata letak fleksibel, kisi, atau bahkan tata letak tingkat blok yang andal. Tabel adalah satu-satunya komponen dasar struktural yang ditampilkan secara konsisten di semua klien surel utama.

Setiap surel responsif dimulai dengan <table> luar selebar 100% yang berfungsi sebagai badan surel, diikuti tabel dalam dengan lebar tetap (umumnya 600px) yang menampung konten sebenarnya. Pola dua tingkat ini menjadi dasar hampir semua templat produksi.

Selalu sertakan cellpadding="0" cellspacing="0" border="0" pada setiap tabel. Tanpanya, Outlook menyisipkan celah yang tidak terduga. Menambahkan role="presentation" memberi tahu pembaca layar untuk melewati semantik tabel, dan ini benar karena tabel tata letak bukan tabel data.

Untuk membuat beberapa kolom, buat tabel bertingkat dengan dua sel <td> di dalam baris konten. Setiap sel menampung satu kolom. Hindari elemen pembagi dan teknik mengambang—Outlook mengabaikan pengapungan dan tetap menumpuk kolom secara vertikal, sehingga tata letaknya rusak.

Panel pratinjau desktop yang berlaku secara umum memiliki lebar sekitar 600px. Merancang untuk lebar tersebut membuat surel tetap mudah dilihat tanpa pengguliran horizontal di Outlook, Gmail desktop, Apple Mail, Yahoo, dan Thunderbird secara bersamaan.

Untuk layar kecil, targetkan sel tabel dalam dengan kueri media yang menetapkan lebar menjadi 100% dan tampilan menjadi blok, sehingga kolom menumpuk secara vertikal. Mail iOS dan Gmail Android mendukung kueri media; Outlook 365 desktop mengabaikannya, tetapi tetap menggunakan tata letak desktop 600px.

Warna dan gambar latar harus diterapkan pada sel <td>, bukan pada elemen pembagi. Outlook mendukung atribut warna latar pada td secara andal, sedangkan warna latar CSS pada elemen pembagi dapat dihapus atau diabaikan sepenuhnya, bergantung pada kliennya.

Outlook memerlukan Vector Markup Language (VML) untuk gambar latar. Bungkus gambar latar CSS modern dalam komentar kondisional <!--[if mso]>...<![endif]--> dengan cadangan v:rect sebaris agar Outlook menampilkan gambar tersebut, sementara klien lain menggunakan CSS.

Hindari tata letak fleksibel, kisi, properti khusus (dukungan terbatas), dan sebagian besar penempatan. Gunakan tampilan blok/sebaris, lebar tetap melalui atribut, dan gaya sebaris. Hasilnya mungkin terlihat kuno menurut standar web, tetapi ditampilkan secara identik di setiap kotak masuk.

Gunakan atribut bantalan sel dan satu <td> dengan bantalan untuk ruang kosong internal. Margin pada sel tabel tidak andal di Outlook; bantalan pada td berlaku universal. Gabungkan warna latar dan bantalan pada td yang sama untuk komponen “kartu” tanpa elemen pembagi.

Tambahkan role="presentation" ke setiap tabel tata letak agar pembaca layar tidak mengumumkan “baris, kolom 1 dari 2”. Sertakan juga teks alternatif pada setiap gambar, teks sungguhan untuk semua konten (bukan gambar berisi teks), dan urutan judul bertingkat yang jelas.

Mengapa tabel—bukan elemen pembagi dengan tata letak fleksibel CSS—digunakan untuk menyusun tata letak surel?

Tata letak surel HTML menggunakan tabel bertingkat dengan bantalan sel, jarak sel, batas bernilai nol, dan role="presentation". Tabel luar selebar 100% memusatkan tabel dalam selebar 600px; sel td bertingkat membentuk kolom yang dapat ditumpuk oleh kueri media di perangkat seluler. Hindari tata letak fleksibel/kisi, gunakan warna latar pada td, dan tambahkan cadangan VML untuk latar Outlook.