Menggunakan div
instide a td
tidak 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 div
a, td
Anda 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 div
harus didefinisikan dengan baik dalam standar, tetapi aturan untuk bagaimana ukuran td
harus tidak didefinisikan dengan baik, sehingga browser yang berbeda menggunakan algoritma yang sedikit berbeda.
table-layout:fixed
CSS bukan seperti yang Anda pikirkan. Ini mengurangi jumlah yang dilakukan browser saat merender tabel dengan hanya menghitung ukuran baris pertama.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:
sumber
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 1 , yang merupakan<td>
model konten 2 .sumber
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.
sumber
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 dengandisplay: table-whatever;
jadi jika Anda ingin melakukan itu Anda memerlukan dua divs, satu untuk wadahwidth: 100%;
height: 100%;
dan tanpa batas sehingga mengisi td tanpa dampak visual. dan kemudian yang absolut.selain itu mengapa tidak membelah sel saja?
sumber
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.sumber
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.
sumber
Dua cara mengatasinya
div
di dalamtbody
tagdiv
di dalamtr
tagKedua pendekatan ini valid, jika Anda melihat fitur: https://stackoverflow.com/a/23440419/2305243
sumber
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".
sumber