Apakah DIV di dalam TD adalah ide yang buruk?

143

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.

jcollum
sumber

Jawaban:

144

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.

Guffa
sumber
Saya menduga dari sinilah firasat saya berasal. Terima kasih sudah membereskannya.
jcollum
9
Jika kolom Anda memiliki lebar yang ditentukan sebelumnya, itu seharusnya tidak menjadi masalah. Hanya ingat untuk mengatur tata letak tabel: tetap di atas meja agar peramban tidak menimpa lebar Anda (berpotensi menyebabkan masalah)
Jens Roland
6
Dia tidak pernah mengatakan dia menggunakan meja untuk tata letak.
texelate
@texelate table-layout:fixedCSS bukan seperti yang Anda pikirkan. Ini mengurangi jumlah yang dilakukan browser saat merender tabel dengan hanya menghitung ukuran baris pertama.
SteveB
73

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">
Martin Liversage
sumber
1
Ini adalah jawaban spesifik yang saya cari. Jadi terima kasih. Saya membayangkan saya akan tidur sedikit lebih baik malam ini.
3Dom
Satu-satunya jawaban yang didukung oleh Pec.
peterchaula
Silakan berbagi dengan kami di mana dalam DTD itu menjelaskan hal ini. Ini bukan dokumen yang mudah dibaca. Terima kasih!
Wangi
1
@redolent: Saya menambahkan aturan DTD yang relevan ke jawaban saya.
Martin Liversage
Bagaimana dengan spec HTML5 yang bukan XHTML?
naksir
38

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 .

Sampson
sumber
2
Saya selalu ingin menjawab pertanyaan dengan ya atau tidak;)
Jani Hartikainen
+1 - benar-benar ingin menjawab dengan sesuatu yang lebih lucu, tetapi gagal.
karim79
Meskipun ini mendapat lebih upvotes saya berpikir bahwa Guffa dibesarkan titik yang tidak ditangani di sini (dan mungkin menjadi sumber firasat saya)
jcollum
14

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.

David mengatakan mengembalikan Monica
sumber
Saya menduga implementasi browser adalah tempat saya mendapatkan "tunggu, itu ide yang buruk" dari.
jcollum
13

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?

zeel
sumber
6
Satu-satunya jawaban praktis dan non-suci
Antony Hatchkins
2

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.

Himaja
sumber
1

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.

Juan Ignacio
sumber
0

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

Alan Dong
sumber
-4

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".

Greg
sumber
13
@ Greg, mengapa itu merusak semantik? Sebuah div hanyalah divisi level blok, atau sub-divisi, dari konten halaman. Karena itu pada dasarnya tidak anti-semantik untuk menempatkannya di dalam sel tabel.
David mengatakan mengembalikan Monica
2
Saya mencoba menulis beberapa tanggapan kepada Anda yang membenarkan jawaban saya, tetapi saya terus turun ke pendapat pribadi. : / Saya kira tanggapan terbaik saya adalah bahwa apa pun yang ada di sel Anda mungkin bisa lebih baik diwakili oleh tag HTML lain. Jika Anda benar-benar membagi sel-sel Anda menjadi komponen-komponen, maka Anda mungkin seharusnya tidak menggunakan tabel untuk memulai, Anda harus menata serangkaian DIV untuk tata letak Anda. Tidak yakin mengapa saya tidak bisa memasukkan ini ke dalam kata-kata yang lebih baik ... tuliskan itu ke IMHO, saya kira.
Greg
Hmm, maksud Anda, TD secara semantik sama dengan DIV, jadi mengapa harus dua sekaligus?
jcollum
2
@ jcollum: Tidak, saya tidak akan mengatakan mereka secara semantik sama. TD jelas merupakan sel dalam sebuah tabel; itu adalah bagian dari struktur yang diketahui: tabel memiliki baris, baris memiliki sel, sel berisi data. DIV hanyalah sebuah wadah ... ia dapat mewakili apa saja kapan saja di mana saja dalam dokumen - Anda harus menerapkan gaya padanya untuk mendapatkan semantik apa pun darinya dalam hal tujuan dalam markup.
Greg
7
DIV secara semantik tidak berarti, jadi saya tidak melihat bagaimana itu bisa salah.
Rex M