.post-body { line-height:1.8em; letter-spacing: 0.1px; }

Senin, 17 Oktober 2016

Layout Halaman dengan Nested Table

Seringkali kita dihadapkan pada kebutuhan layout halaman web yang tidak sederhana lagi, yaitu berkaitan dengan pengaturan sel-sel tabel. Kesulitan ini bisa diselesaikan dengan elemen Layer tetapi elemen ini seringkali tidak kompatibel dengan beberapa browser. Nested Table (tabel didalam tabel) menjadi satu pilihan yang tepat, karena tabel lebih kompatibel bagi kebanyakan browser.
Mari kita mulai dengan membuat sebuah tabel sederhana dan memilih sesuai options yang kita inginkan. Setting tabel yang kita gunakan seperti ada di bawah ini.
table setting
Gambar 1 - Inserted table settings.
  • Inisial settings ini tidak begitu penting  dan pasti ada pada layout yang sedang kita coba ini.
  • Anda bisa menggunakan ukuran percentage ataur pixel setting untuk width tabel. 
  • Kita gunakan saja setting 1 baris [row] dan 2 kolom [columns].
  • Hal yang terpenting disini adalah meyakinkan bahwa cursor ada pada tempat INSIDE dalam sel yang akan kitainsert tabel baru.
  • Dengan kursor yang ada di sel pertama, klik insert table lagi dan gunakan setting berikut ini.
    • Rows : 2
    • Columns : 1
    • Width : 100% 
    • Border : 0
    • Cell Padding : 0
    • Cell Spacing : 0
Ini akan memberikan anda sebuah kumpulan tabel seperti yang ditampilkan dalam Gambar 2 di bawah. Ini juga sebagai awal daripada apa yang akan anda lakukan dengan nested tables. Anda tidak dibatasi dengan tabel yang sederhana seperti pada contoh pertama.
nested table
Gambar 2 - Nested table didalam sel pertama.
Gambar 2 menunjukkan sebuah contoh sederhana dari nested table, didalamnya kita bisa insert text dan/atau imageske dalam layout ini dengan mudah.
Catatan : Sebaiknya, jumlah nested table dalms sebuah halaman tidak lebih dari tiga hirarki karena semakin dalm nested table akan semakin kompleks dan memperlambat kecepatan download.
Selamat Belajar

Tidak ada komentar:

Posting Komentar