Halo! Ini saya sudah belajar tentang sesuatu nih, namanya tables. Sebenarnya materi ini sudah lama sekali. Tapi selain itu, mesti penasaran, apa itu tables dan bagaimana bisa buat biodata yang seperti yang digambar dengannya?
Caranya adalah dengan menggunakan elemen <table>. Table itu terdiri atas baris dan kolom, sama seperti excel. Terus, table ini bisa diisi dengan data, seperti teks atau gambar.
Kan sudah membuat elemen <table> nih, terus bagaimana bisa buat seperti itu? Caranya dengan menambahkan baris dalam table dengan elemen <tr> yang berarti table row. Seterusnya, dalam baris itu bisa ditambahkan elemen <td> (table data) atau <th> (table header).
Lantas, apa perbedaan elemen <td> dengan elemen <th>? Table data itu teksnya tidak ditebalkan dan alignment teksnya di kiri. Sedangkan table header itu teksnya ditebalkan dan alignment teksnya di tengah. Table header itu digunakan ketika ingin membuat judul atau header, contohnya "NAMA". Table data itu digunakan untuk isi table itu, contohnya "John". Kalau ingin memasukkan gambar, tinggal tambahkan elemen <img> ke dalam table data atau table headernya.
Seterusnya, kalau ingin menggabungkan dua atau lebih baris bisa menggunakan rowspan. Caranya dengan menulis atribut rowspan tersebut pada table row, kemudian dengan menulis berapa barisan yang ingin digabungkan. Cara menggabungkan kolom table hampir sama dengan cara menggabungkan table row, yakni dengan menggunakan atribut colspan dan menulisnya pada table data atau table header.
Table kalian sudah jadi nih, tapi warnanya hitam-putih. Untuk mengganti warnanya bisa menggunakan CSS. Ada banyak modifikasi yang bisa dilakukan untuk table dengan CSS, salah satu contohnya adalah background color, yang mengganti warna latar belakangnya.
Sampai itu saja untuk materi tables. Sampai jumpa lagi di blog materi selanjutnya!
Comments
Post a Comment