Ada teknik tersendiri menggunakan div
dalam table
meskipun kedua tag ini memiliki perbedaan tertentu untuk div
dan table
, tetapi keduanya dapat dipakai bersamaan jika diperlukan.
Karena kemampuannya menggunakan pemusatan vertikal dalam table, ini merupakan teknik yang agak populer menggunakan table dalam satu sel baik pemusatan secara horizontal maupun pemusatan secara vertikal yang secara mutlak memusatkan halaman konten Anda pada jendela browser.
Satu hal penting yang perlu diingat, pada saat menempatkan div dalam table
adalah div
membutuhkan div
berada di dalam sel table tertentu, berarti ditempatkan dalam elemen td
yang ada di dalam elemen tr
atau th
.
Agar Anda lebih paham lagi, silahkan lihat pada table di bawah ini:
<table border=1 width=200 cellpadding=10> <tr> <td> <p>Teks dalam sel.</p> </td> <td> <p>Teks dalam sel.</p> </td> <td> <p>Teks dalam sel.</p> </td> </tr> <tr> <td> <p>Teks dalam sel.</p> </td> <td> <p>Teks dalam sel.</p> </td> <td> <p>Teks dalam sel.</p> </td> </tr> </table>
Tampilan di browser akan terlihat seperti ini:
Sekarang Anda coba tambahkan baris kode pada table ini dan tempatkan div
di dalamnya, silahkan Anda bisa lakukan seperti ini:
<table border=1 width=200 cellpadding=10> <tr> <td> <p>Teks dalam sel.</p> </td> <td> <p>Teks dalam sel.</p> </td> <td> <p>Teks dalam sel.</p> </td> </tr> <tr> <td> <p>Teks dalam sel.</p> </td> <td> <p>Teks dalam sel.</p> </td> <td> <p>Teks dalam sel.</p> </td> </tr> <tr> <div id="box"> <p>Teks dalam div.</p> </div> </tr> </table>
Apa yang terlihat? Ternyata penambahan baris baru dengan kode div
di atas terdapat di atas table
, bukannya di dalam sebuah sel atau kotak. Hasilnya seperti gambar di bawah ini:
Agar bisa tampil di browser, yang Anda butuhkan adalah memastikan div
berada dalam sel table
aktual, elemen td
atau th
, jadi lakukan seperti ini:
<tr> <td colspan=3> <div id="box"> <p>Teks dalam div.</p> </div> </td> </tr>
Jadi, Anda harus mendapatkan apa yang Anda harapkan, penempatan div
dengan style yang bisa sepenuhnya dalam tabel:
Leave a Reply