Mengapa kita tidak seharusnya menggunakan <table> dalam desain?

Apa alasan yang jelas dan logis mengapa kita tidak boleh mendesain situs web dengan tabel? Di mana manfaatnya, apa yang mendorong ide ini dalam industri? Kapan saya bisa menggunakan tabel?

1) Tabel tidak boleh digunakan untuk tata letak halaman karena mereka adalah:

• Lambat untuk merender karena peramban perlu mengunduh paling banyak - jika tidak semua - dari tabel untuk membuatnya dengan benar

• Mereka membutuhkan lebih banyak HTML daripada tata letak non-tabel yang berarti pemuatan dan rendering yang lebih lambat, serta peningkatan penggunaan bandwidth

• Mereka dapat menjadi mimpi buruk untuk dipertahankan karena mereka dapat dengan cepat menjadi kompleks

• Mereka dapat merusak penyalinan teks

• Mereka memengaruhi pembaca layar secara negatif dan membuat konten Anda tidak dapat diakses oleh beberapa pengguna

• Mereka tidak sefleksibel menggunakan markup semantik yang tepat

• Mereka tidak pernah dimaksudkan untuk digunakan untuk tata letak halaman

• Membuat tabel menjadi tata letak yang responsif sangat sulit dikendalikan

2) Gunakan tabel untuk data tabular. Untuk itulah tabel itu dibuat.

Lihat juga: Mengapa orang membuat tabel dengan divs?

Tabel adalah untuk data tabular, bukan desain. Orang sering salah memahami motivasi di balik membuat halaman "tableless".

Salah menggunakan tabel untuk membuat tata letak Anda. Anda harus menggunakan elemen lain untuk tata letak (divs, daftar, bagian, artikel, header, footer, selain itu, dll). Dan Anda dapat mencapai efek luar biasa dengan HTML / CSS minimal (membuat kode Anda bermakna, ringan, dan mudah dipelihara secara semantik).

Tentu saja, data tabular harus berada di dalam elemen tabel. Jika Anda mau, Anda bahkan bisa meningkatkan semantik tabel dengan menambahkan thead, tfoot, tbody, th, caption, dll. Semua elemen tersebut dimaksudkan untuk digunakan dengan tabel, dan percayalah, mereka dapat membuat tabel Anda lebih deskriptif sendiri. .

Jadi, masalahnya, jangan pergi dengan desain berbasis tabel dan menggunakan solusi HTML / CSS yang cocok. Mulai dari markup semantik HTML, dan kemudian bangun desain dengan CSS. Ini harus menjaga siapa pun aman. Gunakan ini sebagai aturan praktis.

Tabel seharusnya berisi data, dan bukan elemen desain.

Tabel hanya boleh digunakan saat menampilkan data tabular. Kalau tidak, mereka biasanya pilihan yang buruk untuk ditampilkan.

Penyebab sebenarnya untuk tidak menggunakan tabel adalah:

Tata letak default tabel adalah: table-layout:fixed

Ini memberi tahu browser untuk menganalisis tabel dan memperbaiki sel agar mengandung elemen di dalamnya, yang membutuhkan waktu. (Inilah sebabnya mengapa tabel sangat baik untuk data yang kompleks)

Intinya: tabel akan di render setelah semua konten di dalamnya ditampilkan, sebagai lawan ketika menggunakan elemen DIV misalnya.

Saya menggunakan tabel untuk struktur desain web dalam cairan dicampur dengan tetap dan saya tahu banyak kata tabel adalah untuk noobs yang lain mengatakan mereka adalah untuk orang-orang sekolah tua yang selalu mengatakan DIV adalah yang terbaik tetapi kenyataannya adalah bahwa tabel lebih baik untuk beberapa hal dan DIVS untuk hal lain.

Apa yang lebih baik <br>atau lebih <p></p>? Hal yang sama

Saya dan meja lama saya di desain web baru 2015 saya dapat menendang puntung bagi siapa pun dengan ponsel saya yang 100% lebar dicampur dengan masing-masing 2 kolom sisi 200px.

Jelas di dalam tabel jelek untuk menempatkan lebih banyak tabel, di situlah DIVS berguna. Tabel dapat melakukan hal-hal divs tidak dapat dan divs dapat melakukan hal-hal tabel tidak bisa.

Yang mengatakan tata letak tabel default sudah diperbaiki? Saya memberi Anda sebuah contoh

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>

Apakah Anda melihat potensinya sekarang? Lihatlah di PC dan ponsel. Ah ya dan saya bahkan tidak perlu bootstrap.

Sekarang untuk melakukan hal yang sama dengan divs Anda harus menulis banyak kode CSS untuk menampilkan align float dan crap. Siapa yang menulis lebih sedikit kode? Saya! Apa yang dibutuhkan pelanggan? Seorang pria yang mengakhiri halaman dalam 1 tahun atau dalam 1 bulan?

Sekarang mari kita tingkatkan desain dengan divs

<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>
<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>

Sangat indah tata letak desain 5 kolom menggunakan divs dan tabel.

Jawaban Anda adalah: mereka berdua bekerja lebih baik dan lebih cepat dan itu akan terlihat bagus pada desain apa pun bahkan di TV dan ponsel kecil.