Mengapa orang membuat tabel dengan divs?

Dalam pengembangan web modern saya lebih sering menemukan pola ini. Ini terlihat seperti ini:

<div class="table">
    <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
</div>

Dan di CSS ada sesuatu seperti:

.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }

^{* (Nama kelas hanya ilustratif; dalam kehidupan nyata itu adalah nama-nama kelas normal yang mencerminkan tentang elemen itu)}

Saya bahkan baru-baru ini mencoba melakukan ini sendiri karena ... Anda tahu, semua orang melakukannya.

Tapi saya masih belum mengerti. Kenapa kita melakukan ini? Jika Anda membutuhkan meja, maka buatlah blasted <table>dan selesaikan saja. Ya, bahkan jika itu untuk tata letak. Itulah gunanya meja - menata barang dengan cara tabular.

Penjelasan terbaik yang saya miliki adalah bahwa sekarang semua orang telah mendengar mantra "jangan gunakan tabel untuk tata letak", sehingga mereka mengikutinya secara membabi buta. Tetapi mereka masih membutuhkan tabel untuk tata letak (karena tidak ada lagi yang memiliki kemampuan memperluas tabel), sehingga mereka membuat <div>(karena bukan tabel!) Dan kemudian menambahkan CSS yang membuatnya menjadi tabel.

Bagi seluruh dunia, bagi saya ini seperti menempatkan hambatan yang tidak perlu yang sewenang-wenang di jalan Anda dan kemudian melakukan pekerjaan ekstra untuk menghindarinya.

Argumen asli untuk pindah dari tabel untuk tata letak adalah sulit untuk memodifikasi tata letak tabel setelahnya. Tetapi memodifikasi tata letak "tabel palsu" sama sulitnya, dan untuk alasan yang sama. Bahkan, dalam praktiknya memodifikasi tata letak selalu sulit, dan hampir tidak pernah cukup untuk hanya mengubah CSS, jika Anda ingin melakukan sesuatu yang lebih serius daripada perubahan kecil. Anda akan perlu memahami dan mengubah struktur HTML untuk perubahan desain yang serius. Dan tabel tidak membuat pekerjaan lebih sulit atau lebih mudah daripada div.

Bahkan, satu-satunya cara saya melihat bahwa tabel dapat membuat tata letak sulit untuk dimodifikasi, adalah jika Anda ab menggunakannya dan menciptakan kekacauan yang tidak baik. Anda dapat melakukannya dengan div juga.

Jadi ... dalam upaya untuk mengubah ini dari kata-kata kasar menjadi pertanyaan yang masuk akal: apa yang saya lewatkan? Apa manfaat sebenarnya dari menggunakan "tabel palsu" di atas yang asli?

Tentang tautan duplikat: Ini bukan saran untuk menggunakan tag lain atau sesuatu. Ini adalah pertanyaan tentang menggunakan <table>vs display:table.

Ini adalah pola umum untuk membuat tabel responsif. Data tabular sulit ditampilkan di ponsel karena halaman akan diperbesar untuk membaca teks, artinya tabel melenceng dari sisi halaman dan pengguna harus menggulir mundur dan maju untuk membaca tabel, atau halaman akan diperbesar , biasanya berarti bahwa tabel terlalu kecil untuk dapat dibaca.

Tabel responsif mengubah tata letak pada layar yang lebih kecil - kadang-kadang beberapa kolom disembunyikan atau kolom digabung, misalnya nama dan alamat email mungkin terpisah pada layar besar, tetapi runtuh menjadi satu sel pada layar kecil sehingga informasinya dapat dibaca tanpa harus menggulir.

<div>s digunakan untuk membuat tabel, bukan <table>tag karena beberapa alasan. Jika <table>tag digunakan maka Anda harus mengganti gaya dan tata letak default browser sebelum menambahkan kode Anda sendiri, jadi dalam hal ini <div>tag menyimpan banyak CSS boilerplate. Selain itu, versi IE yang lebih lama tidak memungkinkan Anda untuk menimpa gaya tabel default, jadi menggunakan <div>s juga memuluskan pengembangan lintas-browser.

Ada gambaran bagus tentang tabel responsif pada CSS-Trik .

Sunting: Saya harus menunjukkan bahwa saya tidak menganjurkan pola ini - itu jatuh ke dalam perangkap divitis dan bukan semantik - tapi ini sebabnya Anda akan menemukan tabel yang terbuat dari divs.

Pertanyaannya adalah apakah data semantik tabel (yaitu satu set data atau unit informasi yang disusun secara logis dalam dua dimensi) atau Anda hanya menggunakan kisi untuk tata letak visual, misalnya karena Anda ingin bilah sisi diperluas atau semacamnya.

Jika informasi Anda semantik tabel, Anda menggunakan <table>-tag. Jika Anda hanya ingin kisi untuk keperluan tata letak, Anda menggunakan beberapa elemen html lain yang sesuai dan digunakan display:tabledalam style sheet.

Kapan data semantik tabel? Ketika data diatur secara logis sepanjang dua sumbu. Jika masuk akal dengan header untuk baris atau kolom, maka Anda mungkin memiliki tabel semantik. Contoh dari sesuatu yang bukan semantik tabel adalah menyajikan teks dalam kolom seperti di koran. Ini bukan semantik tabel, karena Anda masih akan membacanya secara linear, dan tidak ada artinya akan hilang jika presentasi dihapus.

OK, mengapa tidak digunakan <table>untuk semuanya daripada hanya untuk sesuatu yang semantik tabel? Secara visual itu jelas sama (karena elemen tabel hanya ada display:elementdi style sheet standar).

Perbedaannya adalah bahwa informasi semantik dapat membantu agen pengguna alternatif. Misalnya pembaca layar mungkin memungkinkan Anda menavigasi dalam dua dimensi dalam tabel, dan membaca tajuk untuk sel untuk kedua sumbu jika Anda lupa di mana Anda berada. Ini hanya akan membingungkan jika tabel tidak semantik tabel tetapi hanya digunakan untuk tata letak visual.

The <table>vs display:tablediskusi hanya kasus prinsip yang lebih umum menggunakan markup semantik. Lihat misalnya: Mengapa orang repot-repot menandai dengan benar dan semantik? atau Mengapa markup semantik diberikan bobot lebih untuk mesin pencari?

Di beberapa tempat Anda mungkin benar-benar diminta secara hukum untuk menggunakan markup semantik untuk alasan aksesibilitas, dan dalam hal apa pun tidak ada alasan untuk sengaja membuat halaman Anda kurang dapat diakses.

Bahkan jika Anda tidak peduli dengan pengguna yang dinonaktifkan, presentasi yang terpisah dari konten memberi Anda manfaat. Misalnya, tata letak tiga kolom Anda dapat disajikan dalam satu kolom pada perangkat seluler menggunakan lembar gaya alternatif.

Sebenarnya, saya akan mengatakan bahwa penggunaan nama kelas seperti "tabel" dalam contoh Anda menunjukkan bagaimana orang tidak benar-benar memahami apa yang mereka lakukan ketika mencoba untuk markup semantik. Mereka mendapat nilai karena berusaha menunjukkan bahwa kontennya bukan data tabular , tetapi mereka kehilangan nilai karena nama kelas yang buruk.

<div class="table">
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

Semua yang telah dilakukan pengembang ini adalah mereplikasi <table>markup asli dengan nama kelas CSS. Ini berarti begitu tata letak ini bukan tabel, nama kelas berselisih.

Apa yang seharusnya dilakukan pengembang ini adalah mempertimbangkan informasi apa yang ada di tabel - apakah itu galeri thumbnail? Baiklah kalau begitu:

<div class="thumbnail-gallery">
  <div>
    <div class="thumbnail">
      <img src="" />
      <p>Some text</p>
    </div>
    <div class="thumbnail">
      <img src="" />
      <p>Some text</p>
    </div>
    <div class="thumbnail">
      <img src="" />
      <p>Some text</p>
    </div>
  </div>
</div>

Sekarang saya dapat membuat beberapa CSS adaptif:

@media screen {
  .thumbnail-gallery {
    display: table;
    border-collapse: collapse;
    width: 100%;
  }

  .thumbnail-gallery > div {
    display: table-row;
  }

  .thumbnail-gallery .thumbnail {
    display: table-cell;
    border: 1px solid #333333;
  }
}

@media screen and (max-width: 640px) {
  /** reset all thumbnail gallery elements to display as block and fill screen **/
  .thumbnail-gallery,
  .thumbnail-gallery > div,
  .thumbnail-gallery .thumbnail {
    display: block;
    width: 100%;
  }
}

Mengapa divs dan bukan tabel

Tabel berisi data tabular - penyajian tabel terkait erat dengan struktur tabel. Data tabular akan selalu harus dalam bentuk tabular di mana pun Anda meletakkan konten itu atau pada layar / perangkat apa yang Anda inginkan untuk ditampilkan.

Galeri thumbnail (atau banyak hal lainnya, seperti formulir pendaftaran, menu, dan lainnya) bukan data tabular. Mungkin disajikan seperti tabel dalam beberapa tata letak desain, tetapi dalam kasus lain, seperti layar ponsel sempit, Anda ingin menggunakan tata letak blok yang lebih tradisional. Atau mungkin Anda ingin menampilkan thumbnail di sidebar daripada di area konten utama.

Pilihan Anda sekarang adalah untuk menampilkan markup yang berbeda untuk konten layar lebar (tabel) dan konten sidebar atau layar sempit (div) - yang berarti skrip sisi server Anda harus mengetahui ke mana konten akan pergi jika Anda membuat ini secara terprogram - atau Anda memiliki skrip sisi server Anda menghasilkan markup yang sama (karena itu tidak peduli di mana Anda meletakkan ini) dan menggunakan aturan CSS yang berbeda untuk situasi yang berbeda.

Jadi, maka Anda memiliki pilihan untuk selalu menghasilkan tabel, dan kemudian mengesampingkan aturan tampilan tabel alami dengan blok (yang benar-benar harus menggiling beberapa roda gigi di kepala pengembang mana pun), atau menggunakan div yang diberi label dengan baik yang memungkinkan pendekatan styling yang lebih fleksibel.

Dan praktik terbaik selama beberapa tahun sekarang adalah menghindari tabel ketika tidak perlu menyajikan data tabel.

Di masa lalu, mesin render tabel " muncul " lebih lambat ketika Anda menggunakan persentase untuk lebar kolom. Mesin pada dasarnya harus mengunduh seluruh kumpulan data sebelum kemudian mulai mencari tahu seberapa besar segalanya untuk menggambarnya di layar.

Mesin DIV berbeda. Ketika peramban menemukan DIV, peramban akan maju dan meletakkannya dan mulai mengisi konten secara inline. Tentu saja, div mungkin melompat ketika data selesai dimuat. Karenanya mengapa saya muncul dalam kutipan di atas. Kerangka waktu untuk penyelesaian keduanya adalah sama, namun tabel tidak ditarik sampai akhir yang berarti pengguna tidak yakin apakah memuat atau tidak untuk satu atau dua detik.

Ini menjadi lebih buruk karena meja bersarang.

Ada kemudian (dan masih ada) cara untuk membuat rendering tabel JAUH lebih cepat. Pada dasarnya dengan memberikan petunjuk bahwa ukuran kolom tidak berubah, maka browser mulai merender data tabular dengan segera. Pada akhirnya ini berarti bahwa tabel sebenarnya dapat ditampilkan dalam posisi yang benar lebih cepat daripada div yang memberi mereka penampilan yang lebih baik.

Tapi itu bukan keseluruhan cerita. Selebihnya adalah kebanyakan dev tidak perlu belajar kerajinan mereka dengan cukup baik untuk mengetahui hal ini. Sebagai gantinya mereka melompat pada berbagai kereta musik dan pergi dengan kode apa pun yang dapat mereka salin / tempel. Bahkan hari ini saya menemukan bahwa sangat sedikit pengembang web yang mengetahui perbedaan dari satu jenis dokumen ke yang lain - dan itu adalah alasan nomor satu mengapa berbagai situs memiliki segala macam solusi untuk mencakup berbagai browser.

Jadi, +1 kepada Anda untuk mengajukan pertanyaan.

Jika saya bisa mendapatkan sedikit "meta" di sini, ini membawa dua masalah ke pikiran saya:

Satu: Seseorang mengusulkan aturan karena alasan yang baik, dan orang-orang benar-benar kehilangan titik dengan mengikuti surat teknis aturan sambil mengabaikan roh. Mereka menemukan beberapa cara untuk menyelesaikan semua hal-hal buruk yang berusaha dicegah oleh aturan tersebut, sementara secara teknis tetap mengikuti aturan tersebut sebagaimana dinyatakan.

Dua: Seseorang melihat masalah dan mengusulkan aturan untuk mencegahnya. Orang lain melihat nilai aturan ini. Kemudian mereka bersikeras pengabdian buta terhadap aturan ini tanpa memperhatikan masalah asli yang seharusnya diselesaikan dan / atau terlepas dari masalah apa yang diciptakannya. Saya telah melakukan banyak percakapan di mana seseorang berkata, "Anda harus melakukan X karena itulah aturannya", dan kemudian saya bertanya, "Tetapi mengapa kita harus melakukan X?", Dan mereka menatap saya dengan bingung dan putus asa dan berkata, "Tapi Aku baru saja memberitahumu! Karena itu aturannya! " Saya menjawab, "Tapi itu tampaknya menyebabkan lebih banyak masalah daripada menyelesaikannya. Saya pikir kita akan lebih baik melakukan Y." Dan kemudian orang itu berkata, "Tidak, lihat, akan saya tunjukkan. Lihat, ada di sini di buku ini. X adalah aturannya."

Dalam kasus ini, kami memiliki masalah: Tag tabel melakukan dua hal: Satu, ia mengontrol tata letak dokumen. Dua, itu menyampaikan gagasan bahwa data terlampir terdiri dari baris dan kolom angka atau data lainnya.

Begitu banyak orang yang mengusulkan solusinya: Jangan gunakan tag tabel untuk mengontrol tata letak hal-hal yang tidak secara logis "tabel". Gunakan CSS.

Tetapi ada masalah dengan solusi ini. Tag tabel dan subtaganya melakukan banyak fungsi tata letak yang sangat berguna yang tidak mudah dicapai dengan menggunakan CSS, dan ketika mereka dapat dicapai, kode yang diperlukan untuk melakukannya sering kali rumit - sulit dibaca dan sulit dipelihara. Mengapa kita harus melakukan hal-hal dengan cara yang canggung dan sulit ketika ada cara yang bersih dan mudah?

Secara pribadi, saya pikir kita akan lebih baik untuk hanya menyatakan, "Fakta bahwa ada sesuatu di dalam tag tabel tidak selalu berarti bahwa itu mewakili baris dan kolom angka." Ini tidak akan menjadi pernyataan keterlaluan. Saya belum pernah mendengar seseorang mengatakan bahwa tag "p" hanya dapat digunakan untuk hal-hal yang benar-benar merupakan paragraf dari kalimat bahasa Inggris yang benar secara tata bahasa, yang dibuat secara logis. Saya belum pernah mendengar seseorang mengatakan bahwa salah menggunakan tag "ul" untuk daftar yang memang masuk dalam urutan logis, hanya karena Anda menginginkan peluru dan bukan nomor urut. Dll

Sudah ada ton dari jawaban yang besar di sini. Tetapi saya ingin menambahkan bahwa tableelemen memiliki batasan render yang tidak ada untuk divelemen. Coba dan buat tabel yang melakukan pengguliran virtual (seperti: SlickGrid , DataTables , dan lainnya) dan Anda akan sangat kecewa. Itu tidak bekerja. Kebanyakan (Semua?) Grid Javascript modern menggunakan divs karena css memungkinkan rendering yang jauh lebih fleksibel.

Ada batasan lain juga. Aturan umum saya adalah bahwa jika saya akan melihat seluruh tabel pada satu layar, dan saya tidak ingin ada / banyak render kustom untuk itu saya menggunakan tableelemen, jika tidak saya akan menggunakan divs karena saya dapat mengontrol hasilnya jauh jauh lebih mudah.

HTML dan CSS telah mengembangkan tingkat fleksibilitas yang berarti bahwa bahkan elemen-elemen seperti "blok" secara konseptual <div>(bentuk konten blok tertua dan paling umum HTML) tidak perlu ditampilkan sebagai blok:

div { display: inline; }

Seperti yang Anda perhatikan, <div>dapat digunakan untuk meniru <table>dan sesama pelancong. Sebenarnya, kebanyakan tag bisa. Mengingat peran khusus mereka, saya yakin Anda bisa berguna remap tag makro seperti <html>, <head>, <body>, dan <script>, tapi tag "umum" seperti <div>, <p>, <b>, <em>, <span>, dan <pre>? Untuk diperebutkan. Buat blok inline tag, blok inline, aliran tag pra-format, yang stasioner mengambang. Gila, jika Anda suka!

Itu mungkin . Anda mungkin ingin berputar benang tentang bagaimana kita semua harus menggunakan "semantik markup" bla bla bla , atau percaya dengan Pythonistas bahwa "Harus ada satu - dan sebaiknya hanya satu - cara yang jelas untuk melakukannya." Namun Tim Toady adalah pria yang pintar dan ingin tahu. Diberi kebebasan, dia akan menjelajahi semuanya. Itu termasuk menggunakan fleksibilitas yang tersedia untuk melakukan pergantian. Beberapa bijaksana, beberapa akan terbukti sebaliknya. Tetapi percobaan, kesalahan, dan pengalaman adalah satu-satunya cara untuk mengetahuinya. Jadi ada cukup kondisi untuk substitusi.

Saya tidak berpikir terlalu berlebihan untuk mengatakan bahwa penggantian juga diperlukan. Minimal, ini sangat nyaman . Untuk waktu yang lama, HTML tidak memiliki <menu>, <section>atau <aside>elemen. Namun halaman web dan aplikasi di mana-mana memiliki menu, bagian, dan bilah sisi. Bagaimana? Karena elemen daftar HTML ( <ul>,, <ol>dan <li>) mudah digunakan kembali dan beberapa penggunaan diklasifikasikan kembali sebagai wadah menu dan bagian. <div>bisa berdiri di atas <article>, <section>, <aside>, <figure>, dan <summary>. HTML5 telah menyusul, dan menambahkan elemen khusus untuk beberapa kasus penggunaan yang sebelumnya tidak ditangani. Ini adalah pembaruan dan koreksi hebat untuk mengakomodasi penggunaan umum, dunia nyata.

Meski begitu, masih ada banyak idiom umum yang tidak memiliki tag atau model semantik . Hal-hal seperti halaman, catatan kaki, kutipan menarik, aliran komentar, avatar terkait, "suka," subjudul, dan subtitle yang saya dan banyak orang lain gunakan setiap hari. Apa yang harus kita lakukan? Apa yang kita bisa. Ulangi elemen "tutup tapi tidak eksak" dengan kelas dan id untuk berdiri dan mendukung pekerjaan kami selama lima atau sepuluh tahun ke depan atau sampai bertahun-tahun sampai HTML6 atau HTML7 menyusul. HTML / CSS "ya, ini sebuah X, secara teori, tapi kita akan menandainya dan bekerja dengannya sebagai Y" sangat nyaman. Sangat diperlukan, sungguh. Itu membuat konten Web fleksibel, dan tidak rapuh.

Lebih jauh lagi, "semantic markup" memiliki batasan yang tidak dapat direduksi . Itu berlaku untuk semua jenis struktur ketat yang dapat Anda bayangkan untuk konten.

Format standar tidak dapat mencakup seluruh kekayaan kebutuhan, keinginan, dan keragaman manusia. Mereka akan selalu "berada di belakang kurva" dari apa yang dilakukan orang sekarang . Bagaimana mereka berinovasi. Heck, HTML5 masih di belakang kurva pada catatan kaki, subjudul, dan inovasi pencetakan lainnya dari abad ke-17. Tidak memiliki fitur yang penting bagi banyak pekerja informasi dan pembuat konten. Jadi kami berimprovisasi.

Yang lebih tidak berubah adalah bahwa informasi tidak mematuhi satu set aturan. Tentu, ini dimulai sebagai sebuah tabel. Tapi mungkin Anda hanya menginginkan ringkasan - ucapkan judul untuk setiap baris, sebagai daftar. Mungkin itu memakan terlalu banyak ruang, dan Anda ingin itu sebagai daftar inline hemat-ruang. Mungkin Anda memiliki catatan yang hanya ingin judulnya, lalu jika Anda mengklik, Anda melihat detail yang mendasarinya. Atau Anda ingin item dalam daftar atau tabel kompleks dikelompokkan dan dikategorikan. Oh, sekarang Anda ingin mengubah dan mengategorikannya dengan cara yang berbeda. Atau nilai-nilai diplot sebagai bagan batang. Ini adalah hal-hal yang dilakukan setiap hari di aplikasi, spreadsheet, dan visualisasi data. Mereka adalah bagian tak terpisahkan dari lanskap informasi kita, dan apa yang kita inginkan dan perlu lakukan di web. Manusia terus-menerus mengatur ulang bentuk dan penyajian data kami. Bukan hanya satu hal, atau satu format / tata letak, atau satu konsep. Ini sepadan, dengan semantik tergantung pada keadaan dan pilihan yang dibuat pengguna secara interaktif. Ya, tandai teks sebagai "ditekankan" (<em>), tapi itu hanya sebuah konvensi. Saya telah mengerjakan dokumen dengan setidaknya setengah lusin jenis "penekanan." Kita harus dapat menyesuaikan dan memetakannya untuk penggunaan yang berbeda, interpretasi yang berbeda. Salah satu jenis penekanan HTML? Sangat reduksionistik. Membatasi. Rapuh. Hal yang sama berlaku untuk <table>, <p>, dll

Sangat menyenangkan memiliki tag / elemen yang membantu mengatur pemikiran seluruh komunitas tentang "apa yang terjadi di mana." Itu membantu membangun konvensi dan idiom, dan membuat kita secara kolektif lebih efisien. Tetapi kemampuan untuk memetakan hal-hal, untuk mendesain ulang dan menggunakan kembali struktur itu? Itulah bagian tak terpisahkan dari inklusifitas Web dan keberhasilannya.

Gunakan kasus penting. Ada perbedaan besar antara tata letak / presentasi di halaman konten dan aplikasi. Dalam konten, semantik sangat penting untuk SEO-awareness dan kegunaan. Dalam kasus ini, menggunakan tabel untuk menyajikan data tabular secara umum adalah hal yang benar untuk dilakukan. Seperti yang telah dicatat orang lain, mesin pencari akan menghukum Anda dan Anda bahkan dapat melanggar undang-undang kegunaan jika Anda diharuskan oleh undang-undang untuk mematuhi pedoman kegunaan pemerintah.

Dalam aplikasi web, pengembang dapat memilih untuk membuat tampilan yang sepenuhnya terpisah untuk tujuan SEO dan kegunaan. Desain responsif telah membuat orang membangun pandangan yang dapat menangani tata letak desktop dan seluler, dan div lebih baik daripada tabel dalam kasus penggunaan tersebut.

Ambil situs e-commerce, misalnya. Melihat daftar produk dalam penelusuran atau hasil pencarian menunjukkan, secara umum, daftar produk dalam format tabular, tetapi pandangan tersebut mungkin dihasilkan menggunakan divs (yang menyediakan tata letak dan opsi penataan gaya yang lebih umum dan fleksibel) daripada tabel. Amazon dan eBay adalah contoh bagus dari pendekatan ini. Periksa hasil pencarian di kedua situs dan Anda akan melihat satu set div yang sangat bersarang.