Merupakan Blog Guru TIK yang berisi informasi tentang Ilmu Komputer, Sistem Informasi, Metodologi Penelitian, dan Informasi Seputar Dunia Pendidikan dan Birokrasi, serta materi-materi TIK SMA.
Tabel adalah sekumpulan data yang disusun secara sistematis terhadap baris dan kolom, atau struktur lainnya yang lebih komplek. Tabel secara luas digunakan dalam dunia komunikasi, riset, dan analsis data. satu, Tabel berguna untuk berbagai tugas seperti informasi presentasi teks dan data numerik. dua, Tabel dapat digunakan untuk membandingkan dua atau lebih item pada form tabulasi. tiga, Tabel digunakan untuk membuat database.
Definisi tabel pada HTML
Tabel pada HTML didefinisikan menggunakan tag "table". Setiap baris tabel didefinisikan dengan tag "tr" (table row). Header tabel didefinisikan dengan tag "th" (header table). Secara otomatis, heading tabel akan menampilkan teks dengan ukuran bold (tebal) dan centered (terletak ditengah-tengah kolom). Sebuah tabel data atau cell didefinisikan dengan tag "td" (table data). Contoh:
Output:
Gambar 1 membuat tabel pada html
Pilihan penting tabel pada HTML: satu,Menambahkan sebuah border pada tabel HTML: Border tabel diatur menggunakan CSS border properti. Jika tidak dilakukan spesifikasi border pada tabel, maka tabel akan ditampilkan tanpa menggunakan border (garis batas).
Gambar 2 pengaturan style tabel
contoh: Output:
Gambar 3 penggunaan css untuk mengatur style tabel
dua,Penambahan collapsed border pada tabel HTML: berfungsi untuk menggabungkan dua batas garis menjadi satu kesatuan batas garis, tambahkan properti berder-collapse pada CSS seperti berikut ini.
Gambar 4 border-collapse pada tabel html
Contoh: Output:
Tabel 5 collapse border pada tabel html
tiga,Penambahan cell padding pada tabel HTML:cell padding membedakan jarak antar ruang antara konten cell dan border-nya. Jika tidak ditambahkan padding pada tabel, maka tabel cell akan ditampilkan tanpa menggunakan padding.
Gambar 6 cell padding
Output:
Gambar 7 cell padding pada html
empat,Penambahan heading yang menjorok ke kiri pada tabel HTML: secara otomatis heading tabel akan menampilkan tulisan ditengah dengan bentuk bold. Untuk dapat mengarahkan tulisan heading tabel ke arah kiri maka dilakukan pengubahan properti align pada CSS.
Gambar 8 text align untuk mengatur rataan teks tabel pada html
contoh: output:
Gambar 9 teks rata kiri tabel html
lima, Penambahan border spasi pada tabel HTML:border spasi berfungsi menambah ruang antar cell tabel. Untuk mengatur border spasi pada tabel html, maka digunakan properti border-spacing pada CSS.
Gambar 10 border spasi pada tabel html
contoh: Output:
Gambar 11 border spasi pada tabel html
enam,Penambahan cell span kolom pada tabel HTML: untuk menggabungkan lebih dari satu kolom menjadi satu kesatuan, maka digunakan atribut colspan. Contoh:
Output:
Gambar 12 colspan pada tabel html
tujuh,Penambahan cell span baris pada tabel HTML: untuk menggabungkan lebih dari satu baris menjadi satu kesatuan maka digunakan atribut rowspan. contoh:
Output:
Gambar 13 menggabungkan tabel menggunakan rowspan
delapan,Penambahan caption pada tabel HTML: untuk menambahkan caption pada tabel, maka digunakan tag "caption".
Gambar 14 caption tabel pada html
contoh: Output:
Gambar 15 penggunaan caption pada tabel html
sembilan,Penambahan latar belakang berwarna pada tabel HTML: penambahan warna dapat dilakukan sebagai latar belakang pada tabel HTML menggunakan pilihan (option) "background-color".
Gambar 16 penggunaan background color untuk mengubah warna latar belakang tabel html
contoh: Output:
Gambar 17 mengganti warna latar belakang
sepuluh,pembuatan tabel bersarang pada HTML (tabel di dalam tabel):nested tabel atau tabel bersarang secara sederhana artinya adalah membuat tabel di dalam tabel yang lain. Tabel bersarang akan mengarah pada pembuatan tabel yang lebih komplek, dimana secara tampilan akan terlihat lebih menarik namun berpotensi untuk menciptakan error pada saat proses pembuatan. Contoh: