Penggunakan Tabel dan Spanning di HTML - Praktikum 5

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.

Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data dalam tabel, maka kita perlu menggunakan tag <table> </table>. Elemen tabel ada property <tr> (table row) dan didalamnya ada <th> (table heading) dan <td> (table data). Untuk lebih jelasnya Anda bisa lihat di tutorialnya berikut ini :
Pengenalan Tag Tabel

Nah diatas merupakan contoh penggunaan tag <table>, jadi tag <tr> itu baris ke pinggir. Jadi saat pengcodingan tabel kita harus fokus ke pinggir bukan ke bawah. Lalu gunanya border itu untuk garis pinggir/pemisah antar sel di tabel. cellspacing untuk spasi antar sel, cellpading untuk spasi didalam sel. Di dalam table juga kita bisa menggunkan bgcolor untuk mengatur warna tabel tersebut.
Tabel dengan colspan dan rowspan

Nah, diatas kita menggunakan atribute colspan (menggabungkan sel ke pinggir), rowspan (menggabungkan sel ke bawah), dan align (untuk meratakan tulisan di sel pada table). Jadi maksud dari colspan="3" itu adalah untuk menggabungkan 3 sel ke pinggir(jika di excel kita pakai merge & center).
Contoh Berikutnya :

Nah diatas merupakan contoh untuk mengatur ukuran/panjang sel yaitu dengan cara menggunakan width jadi untuk sel yang lebih panjang maka persentasenya pun harus lebih besar dari yang lainnya.
contohnya seperti diatas untuk membuat sel Usia dan bawahnya lebih panjang dibanding sel Nama.
Contoh Berikutnya :

Nah contoh diatas menggunakan atribute height(untuk tinggi tabel) dan cellpading. Jadi contoh diatas formatnya sama dengan contoh sebelumnya hanya beda penyajian saja.
Contoh Tabel Absensi :

Nah contoh diatas juga sama menggunakan atribute - atribute yang sudah dicontohkan sebelumnya. Oh, iya untuk kalian yang mencari tanda centang (✔) anda bisa mendapatkannya di character map --> font Arial Unique Ms --> lalu find dengan kata kunci check --> lalu kalian pilih dan copy.
Contoh Berikutnya :

Nah mungkin kalian penasaran apa fungsi dari scope="col"
Ketika sebuah tabel di ubah menjadi suara atau Braille, sangatlah berguna untuk dapat mengidentifikasi header apa yang mendeskripsikan tiap cell. Sebagai contoh, sebuah browser suara memungkinkan anda untuk bergerak keatas dan kebawah atau ke kiri dan kenan dari cell ke cell yang lain, yang cocok dengan header yang sesuai diucapkan sebelum tiap cell.
Untuk mendukung hal ini anda harus membubuhi keterangan pada header tersebut dan atau cell data. Cara termudah untuk hal ini adalah dengan menambahkan atribut scope pada cell header. Hal tersebut dapat digunakan dengan nilai nilai berikut:

row: Cell yang aktif memiliki informasi header untuk sisa dari baris tempat cell tersebut berada.
col: Cell yang aktif memiliki informasi header untuk sisa dari kolom tempat cell tersebut berada

Contoh Berikutnya :

Nah ini juga sama dengan contoh sebelumnya hanya saja beda penempatan/penyajian tabelnya. Oh iya disini kita juga menggunakan <sup></sup> untuk membuat pangkat.
Contoh Tabel Benua dengan dua tampilan yang berbeda :
Tampilan ke-1

Tampilan ke-2 :

Nah, lagi lagi tabel ini menggunakan atribute - atribute yang sudah digunakan sebelumnya.
Contoh Berikutnya :

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.