Apakah DIV di dalam TD adalah ide yang buruk?

Sepertinya saya mendengar / membaca di suatu tempat bahwa bagian <div>dalam a <td>adalah tidak-tidak. Bukannya itu tidak akan berfungsi, hanya sesuatu tentang mereka yang tidak benar-benar kompatibel berdasarkan jenis tampilan mereka. Tidak dapat menemukan bukti untuk mendukung firasat saya, jadi saya mungkin benar-benar salah.

Menggunakan divinstide a tdtidak lebih buruk daripada cara lain menggunakan tabel untuk tata letak. (Beberapa orang tidak pernah menggunakan tabel untuk tata letak, dan saya kebetulan salah satunya.)

Namun, jika Anda menggunakan huruf diva, tdAnda akan mendapatkan situasi di mana mungkin sulit untuk memprediksi bagaimana elemen akan diukur. Default untuk div adalah untuk menentukan lebarnya dari induknya, dan default untuk sel tabel adalah untuk menentukan ukurannya tergantung pada ukuran kontennya.

Aturan untuk bagaimana ukuran divharus didefinisikan dengan baik dalam standar, tetapi aturan untuk bagaimana ukuran tdharus tidak didefinisikan dengan baik, sehingga browser yang berbeda menggunakan algoritma yang sedikit berbeda.

Setelah memeriksa XHTML DTD saya menemukan bahwa elemen <TD> diizinkan mengandung elemen blok seperti heading, daftar dan juga elemen <DIV>. Jadi, menggunakan elemen <DIV> di dalam elemen <TD> tidak melanggar standar XHTML. Saya cukup yakin bahwa variasi HTML modern lainnya memiliki model konten yang setara untuk elemen <TD>.

Berikut adalah aturan DTD yang relevan:

<!ELEMENT td %Flow;>
<!-- %Flow; mixes block and inline and is used for list items etc. -->
<!ENTITY %Flow "(#PCDATA | %block; | form | %inline; | %misc;>
<!ENTITY %block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">

Tidak. Tidak harus.

Jika Anda perlu menempatkan DIV di dalam TD, pastikan Anda menggunakan TD dengan benar. Jika Anda tidak peduli dengan data tabular, dan semantik, maka Anda pada akhirnya tidak akan peduli dengan DIV dalam TD. Saya tidak berpikir ada masalah - jika Anda harus melakukannya, Anda baik-baik saja.

Menurut Spesifikasi HTML

A <div>dapat ditempatkan di tempat konten aliran diharapkan ¹ , yang merupakan <td>model konten ² .

Sebuah tabel-sel dapat secara sah mengandung elemen tingkat blok sehingga tidak, pada dasarnya, palsu. Implikasi browser, tentu saja, meninggalkan posisi spekulatif-teoretis. Ini dapat menyebabkan masalah tata letak dan bug.

Meskipun seperti tabel yang digunakan untuk tata letak - dan kadang-kadang masih - saya membayangkan bahwa sebagian besar browser akan membuat konten dengan benar. Bahkan IE.

Jika Anda ingin menggunakan posisi: absolut; pada div dengan position: relative;pada td Anda akan mengalami masalah. FF, safari, dan chrome (mac, bukan PC) tidak akan memposisikan div relatif terhadap td (seperti yang Anda harapkan) ini juga berlaku untuk divs dengan display: table-whatever;jadi jika Anda ingin melakukan itu Anda memerlukan dua divs, satu untuk wadah width: 100%; height: 100%;dan tanpa batas sehingga mengisi td tanpa dampak visual. dan kemudian yang absolut.

selain itu mengapa tidak membelah sel saja?

Saya menghadapi masalah dengan menempatkan bagian <div>dalam <td>.

Saya tidak dapat mengidentifikasi div menggunakan document.getElementById()jika saya menempatkannya di dalam td. Tetapi di luar, itu bekerja dengan baik.

Seperti yang disebutkan semua orang, ini mungkin bukan ide yang bagus untuk keperluan tata letak. Saya sampai pada pertanyaan ini karena saya bertanya-tanya sama dan saya hanya ingin tahu apakah itu kode yang valid.

Karena ini valid, Anda dapat menggunakannya untuk tujuan lain. Misalnya, apa yang akan saya gunakan adalah untuk meletakkan beberapa div "CSSed" yang mewah di dalam baris tabel dan kemudian menggunakan fungsi jQuery cepat untuk memungkinkan pengguna untuk mengurutkan informasi berdasarkan harga, nama, dll. Dengan cara ini, hanya tabel tata letak yang akan memberi saya "urutan vertikal", tetapi saya akan mengontrol lebar, tinggi, latar belakang, dll div dengan CSS.

Dua cara mengatasinya

1. menempatkan divdi dalam tbodytag
2. menempatkan divdi dalam trtag

Kedua pendekatan ini valid, jika Anda melihat fitur: https://stackoverflow.com/a/23440419/2305243

Itu merusak semantik , itu saja. Ini berfungsi dengan baik, tetapi mungkin ada pembaca layar atau sesuatu di jalan yang tidak akan menikmati memproses HTML Anda jika Anda "memecahkan semantik".