Hallo, Brother and Sister,
Pada kesempatan kali ini saya akan membagikan tutorial(sekaligus tugas sekolah) yang masih berlabel Teknologi. Postingan ini merupakan lanjutan dari post sebelumnya yaitu mengenai Tag - tag di HTML.
Nah, kali ini masih membahas seputar Tabel pada HTML, hanya saja sekarang kita akan membahas halaman web dengan Layout menggunakan tabel. Ada 4 jenis yang akan saya bahas yaitu :
Nah, diatas sama seperti post sebelumnya saya menggunakan beberapa atribut seperti width, height align, border, dll. Semua atribute itu pernah saya bahas di post sebelumnya. Mungkin, atribut barunya yaitu border color="" yaitu untuk mengatur warna dari border/garis pinggir pada tabel yang kita buat.
2. Bottom Index
Bottom Index ini adalah sebuah layout/tampilan web(dengan menggunakan Tabel) yang memiliki daftar isi yang berada di bawah content. Untuk lebih jelasnya berikut codingan dan hasilnya :
Sama seperti codingan yang pertama, codingan ini juga menggunakan atribut - atribut yang sudah digunakan sebelumnya. Bedanya codingan ini menggunakan tag <tr> sebanyak 3 buah, jika yang di codingan pertama menggunakan sebanyak 4 buah.
3. Left Index
Left Index ini adalah sebuah layout/tampilan web(dengan menggunakan Tabel) yang memiliki daftar isi yang berada di sebelah kanan & kiri content. Untuk lebih jelasnya berikut codingan dan hasilnya :
Sama seperti codingan yang sebelumnya, codingan ini juga menggunakan atribut - atribut yang sudah digunakan sebelumnya. Nah, jadi daftar isi diatas berada di sebelah kiri. Oh iya, pada font size disini saya mengisi +2, jadi anda bisa mengisi/menggantinya menjadi angka saja atau angka+(semisal +5, 5, 5+). Di Left Index ini menggunakan rowspan, dan valign juga.
4. Layout Split
Layout Split ini adalah sebuah layout/tampilan web(dengan menggunakan Tabel) yang memiliki daftar isi yang berada di sebelah kiri content. Untuk lebih jelasnya berikut codingan dan hasilnya :
Sama seperti codingan yang sebelumnya, codingan ini juga menggunakan atribut - atribut yang sudah digunakan sebelumnya. Dan disini juga saya menggunakan colspan dan rowspan juga. Jadi intinya Layout Split ini menggunakan daftar isi yang mengapit content/body.
Agar lebih jelasnya disini saya kan membagikan/menampilkan layout weeb yang saya buat(hasil dari Left Index). Berikut codingan dan hasilnya :
Sama seperti codingan yang sebelumnya, codingan ini juga menggunakan atribut - atribut yang sudah digunakan sebelumnya. Disini juga saya menggunaka tag <a> untuk menyisipkan link pada suatu text(ceritanya). Agar tampilannya lebih bangus jadi border saya hapus.
Oke segitu saja postingan dari saya untuk kali ini. Mohon maaf bila ada kesalahan, semoga bermanfaat untuk anda. Apabila ada komentar / masukan bisa diisi di kolom komentar. Sampai jumpa di postingan berikutnya dan jika menurut anda Postingan ini bermanfaat bisa diShare ke teman - teman anda.
Pada kesempatan kali ini saya akan membagikan tutorial(sekaligus tugas sekolah) yang masih berlabel Teknologi. Postingan ini merupakan lanjutan dari post sebelumnya yaitu mengenai Tag - tag di HTML.
Nah, kali ini masih membahas seputar Tabel pada HTML, hanya saja sekarang kita akan membahas halaman web dengan Layout menggunakan tabel. Ada 4 jenis yang akan saya bahas yaitu :
- Top Index
Top Index ini adalah sebuah layout/tampilan web(dengan menggunakan Tabel) yang memiliki daftar isi yang berada di atas content. Untuk lebih jelasnya berikut codingan dan hasilnya :
Nah, diatas sama seperti post sebelumnya saya menggunakan beberapa atribut seperti width, height align, border, dll. Semua atribute itu pernah saya bahas di post sebelumnya. Mungkin, atribut barunya yaitu border color="" yaitu untuk mengatur warna dari border/garis pinggir pada tabel yang kita buat.
2. Bottom Index
Bottom Index ini adalah sebuah layout/tampilan web(dengan menggunakan Tabel) yang memiliki daftar isi yang berada di bawah content. Untuk lebih jelasnya berikut codingan dan hasilnya :
Sama seperti codingan yang pertama, codingan ini juga menggunakan atribut - atribut yang sudah digunakan sebelumnya. Bedanya codingan ini menggunakan tag <tr> sebanyak 3 buah, jika yang di codingan pertama menggunakan sebanyak 4 buah.
3. Left Index
Left Index ini adalah sebuah layout/tampilan web(dengan menggunakan Tabel) yang memiliki daftar isi yang berada di sebelah kanan & kiri content. Untuk lebih jelasnya berikut codingan dan hasilnya :
Sama seperti codingan yang sebelumnya, codingan ini juga menggunakan atribut - atribut yang sudah digunakan sebelumnya. Nah, jadi daftar isi diatas berada di sebelah kiri. Oh iya, pada font size disini saya mengisi +2, jadi anda bisa mengisi/menggantinya menjadi angka saja atau angka+(semisal +5, 5, 5+). Di Left Index ini menggunakan rowspan, dan valign juga.
4. Layout Split
Layout Split ini adalah sebuah layout/tampilan web(dengan menggunakan Tabel) yang memiliki daftar isi yang berada di sebelah kiri content. Untuk lebih jelasnya berikut codingan dan hasilnya :
Sama seperti codingan yang sebelumnya, codingan ini juga menggunakan atribut - atribut yang sudah digunakan sebelumnya. Dan disini juga saya menggunakan colspan dan rowspan juga. Jadi intinya Layout Split ini menggunakan daftar isi yang mengapit content/body.
Agar lebih jelasnya disini saya kan membagikan/menampilkan layout weeb yang saya buat(hasil dari Left Index). Berikut codingan dan hasilnya :
Sama seperti codingan yang sebelumnya, codingan ini juga menggunakan atribut - atribut yang sudah digunakan sebelumnya. Disini juga saya menggunaka tag <a> untuk menyisipkan link pada suatu text(ceritanya). Agar tampilannya lebih bangus jadi border saya hapus.
Oke segitu saja postingan dari saya untuk kali ini. Mohon maaf bila ada kesalahan, semoga bermanfaat untuk anda. Apabila ada komentar / masukan bisa diisi di kolom komentar. Sampai jumpa di postingan berikutnya dan jika menurut anda Postingan ini bermanfaat bisa diShare ke teman - teman anda.
😃Selamat Bercoding
Layout Web dengan Tabel HTMML - Praktikum 6
4/
5
Oleh
Aip Ariyadi
