Mengapa begitu banyak tabel HTML yang digunakan dalam markup halaman?

8

Saya mencoba masuk ke pengembangan web, jadi saya mulai belajar HTML, CSS, dan javascript. Saya telah datang dengan sangat baik dengan javascript, tapi saya masih tidak bisa membuat apa pun dengan HTML dan CSS untuk menyelamatkan hidup saya. Saya akan meminta beberapa tempat atau kiat untuk ditingkatkan, tetapi saya tahu pertanyaannya telah ditanyakan berkali-kali dan hanya akan dihapus, jadi saya pikir saya hanya akan melihat sumber situs web orang lain.

Apa yang terus saya lihat adalah tabel kiri dan kanan. Apakah ada alasan yang sah untuk menggunakan tabel?

html mowwwalker
sumber
giveupandusetables.com
MSalters
Salah satu alasan bagus mungkin karena Anda berada di tim yang benar-benar menyebalkan tetapi semua orang memiliki kekuatan politik lebih besar daripada Anda dan mereka semua benar-benar paranoid dari ide-ide baru yang akan menjelaskan mengapa mereka menyukai skema tata letak yang disukai tahun 1998.
Erik Reppen

Jawaban:

16

Untuk mengeluarkan data tabel.

Berikut adalah beberapa pertanyaan untuk diri Anda ketika memilih antara meja dan wadah css.

Tabel adalah untuk Data Tabular. Titik.

The <table>tag tidak jahat. Terlepas dari apa yang dipikirkan dan dikatakan sebagian orang, inti dari CSS bukanlah untuk tidak pernah menggunakannya. Namun, konsekuensi dari prinsip Semantic HTML adalah Anda tidak boleh menggunakan tabel untuk tata letak . Izinkan saya mengatakan itu lagi, sebagai paragrafnya sendiri, untuk penekanan:

Jangan pernah gunakan tabel untuk tata letak. Pernah.

Jika Anda tidak dapat memutuskan apakah sebuah tabel adalah pilihan yang tepat, tanyakan pada diri sendiri pertanyaan-pertanyaan ini:

  • "Apakah baris atau kolom informasi memiliki atribut yang sama?"
  • "Jika aku mengubah urutan baris atau kolom, apakah itu masih masuk akal?"
  • "Jika aku mengubah sumbu meja (membuat baris menjadi kolom dan sebaliknya) apakah itu masih masuk akal?"

Jika jawaban di atas umumnya adalah "Hrm ... kurasa tidak," maka Anda tidak harus menggunakan tabel.

Jika Anda perlu lebih meyakinkan, lihat "Mengapa Tabel Buruk (Untuk Layout) Dibandingkan dengan Semantic HTML + CSS" .

Demian Brecht
sumber
2
@WeekendWarrior: Tidak yakin saya setuju. Mengapa saya ingin meretas solusi CSS untuk menampilkan nkolom tabel dengan ngrid baris, seperti, katakanlah, statistik dalam game NFL? Itu persis di mana tabel harus digunakan. Mungkin tata letak kotak CSS akan menggantinya di beberapa titik (setelah didukung browser lintas, setidaknya untuk beberapa rilis masing-masing), tetapi belum ada di sana.
Demian Brecht
@ Demian Dia berkata "tabel untuk tata letak". Saya cukup yakin dia tidak bermaksud memasukkan data tabular.
Rein Henrichs
Akankah sebuah tabel cocok untuk misalnya opera libretto terjemahan berdampingan [menggunakan satu baris tabel per baris]? Hal seperti itu tidak akan menjadi "data tabular", tetapi menggunakan tabel akan menjaga hubungan antara garis-garis dalam bahasa asli dan terjemahan bahkan jika teks diperbesar cukup untuk menyebabkan beberapa baris membungkus.
supercat
9

Anggap Anda maksud tabel yang digunakan sebagai tata letak halaman daripada hanya untuk data tabular ...

Anda melihat tabel karena CSS membuat frustrasi untuk digunakan (diakui sekarang kurang dari beberapa tahun yang lalu). Pada titik tertentu seseorang harus menyelesaikan pekerjaan. Untuk melakukannya "benar" menggunakan CSS membutuhkan keributan dan eksperimen yang tak ada habisnya. Meja, di sisi lain, dapat dipahami secara intuitif.

Jika Anda ingin melakukannya dengan benar (dengan menggunakan CSS) dan Anda tidak ingin menyia-nyiakan hidup Anda dengan CSS, kompromi terbaik adalah menyelesaikan beberapa tata letak yang berbeda dan merapikan beberapa CSS dari situs web templat. Gunakan templat sebagai titik awal. Mulai dari awal dengan CSS adalah resep untuk frustrasi.

Angelo
sumber
4
+1 untuk "menyelesaikan pekerjaan". Saya seorang pengembang, bukan desainer ui. Saya dapat dengan pasti mendesain ui fungsional, agak menarik, tetapi itu akan membawa saya JAUH lebih lama daripada yang akan desainer UI. Apa yang akan saya berikan untuk seorang pria di tim saya yang baru saja mendesain templat dan gaya sehingga saya tidak perlu khawatir tentang itu.
AJC
1
Saya tidak dapat membantu tetapi berpikir bahwa CSS bisa menjadi jauh lebih sederhana. IMHO kompleksitas yang tidak perlu ini dan kurangnya implementasi referensi "pixel sempurna" telah menyebabkan implementasi miskin / tidak konsisten oleh vendor browser, yang mengarah ke seluruh generasi pengembang web "tidak mendapatkannya".
Angelo
1
Dulu ada "interpretasi" dari model kotak di mana tabel adalah satu-satunya cara. Misalnya elemen FORMULIR tidak dapat ditata tetapi masih menghasilkan kotak (dengan margin / padding default) di IE. Satu-satunya cara untuk menyingkirkan ruang ekstra adalah dengan menekan FORM antara TABLE dan TR. Benar-benar bertentangan dengan standar, tetapi satu-satunya cara yang berhasil.
SF.
@ Angelo: Masalahnya bukan hanya bahwa CSS "frustasi"; secara historis tidak mampu melakukan banyak hal yang cukup mudah dengan tabel. Sesuatu yang sederhana seperti tata letak sidebar-teks-plus-sidebar, di mana sidebar akan menjadi 10% dari lebar yang tersedia, tetapi setidaknya 140px lebar (lebar grafik logo tertentu), akan mudah dengan tabel [IIRC, set lebar tabel menjadi 100%, biarkan lebar kolom utama tidak ditentukan dan atur lebar kolom sidebar menjadi 10%; lebar kolom akan melampaui 10% jika diperlukan untuk mengakomodasi grafik 140px]). Kapan pertama kali CSS melakukan itu?
supercat
8

Layout berbasis tabel dalam beberapa hal, lebih mudah dipelajari daripada layout CSS murni untuk orang yang baru mulai belajar HTML. Juga, di masa lalu, Anda tidak dapat menggunakan CSS dengan andal dan membuatnya berfungsi di semua browser. Jadi sebenarnya semua tutorial HTML hingga 2000 atau lebih digunakan tabel secara eksklusif untuk tata letak. Banyak kode HTML yang dilewatkan ke situs lain (melalui Sumber View) dan banyak orang belajar dari tutorial itu dan tidak repot-repot belajar tata letak CSS.

Saya akan menawarkan diri untuk dinyalakan di sini dan mengatakan bahwa Anda akan baik-baik saja jika Anda mulai melakukan tata letak di tabel sebelum mempelajari CSS. Perbedaan pada tingkat pemula kecil di terbaik. Anda tidak akan dapat membuat tata letak yang sangat rumit di BAIK sampai Anda memiliki pengalaman satu atau dua tahun, jadi tidak ada banyak perbedaan. Mulailah dengan tabel untuk mendapatkan beberapa hal di layar dan untuk menjaga minat Anda, dan perlahan-lahan terus membaca tentang CSS (yang jelas lebih unggul dalam jangka panjang). Saya dulunya adalah seorang CSS-Zelot pada zaman "Merancang dengan Standar Web" tetapi itu hanya karena menyenangkan menjadi self-rituous dan superior.

Graham
sumber
6
Saya tidak setuju, meskipun saya tidak akan memecat Anda. Belajar tata letak dengan tabel tidak selalu lebih mudah (bukan untuk saya). Lebih penting lagi, transisi dari "tabel cara" ke cara CSS lebih sulit daripada hanya mempelajarinya dengan benar pertama kali.
MattBelanger
1

Browser adalah masalahnya. Terlepas dari apa yang merupakan praktik terbaik dan apa yang disetujui semua orang, terlalu sulit untuk membuat situs web terlihat bagus secara konsisten di peramban tanpa tabel, meskipun kode salah. Ini ada hubungannya dengan semantik. Itulah hal yang paling penting untuk dipelajari dengan HTML, adalah makna semantik dari tag. Tempat terbaik untuk belajar itu adalah dalam lima atau lebih video pertama yang Educator.com miliki dalam video HTML-nya, semuanya dilakukan dengan memikirkan HTML5 dan menjelaskan apa itu semantik dan mengapa itu penting.

Phillip James
sumber
Saya lupa menyebutkan, browser sudah menyusul. Tidak ada yang menggunakan IE6 lagi, jadi sekarang tabel lebih merepotkan daripada nilainya, sebenarnya lebih mudah untuk melakukan hal-hal dengan cara yang benar sekarang. Jadi lupakan tabel kecuali jika Anda bekerja dengan "data tabular." Lihat video yang saya sebutkan jika Anda tidak mengerti apa yang saya maksud dengan "data tabular."
Phillip James
Sayangnya di dunia korporat dan perawatan kesehatan ada sejumlah besar orang yang masih menggunakan IE6
CdMnky
"Hal terpenting untuk dipelajari dengan HTML" agak subyektif. Saya di dunia pengembangan webapp, jadi semantik HTML sebenarnya tidak berarti bagi saya untuk sebagian besar. Tidak demikian halnya jika saya membangun situs yang membutuhkan fitur SEO.
Graham