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:
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).
contoh:
Output:
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.
Contoh:
Output:
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.
Output:
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.
contoh:
output:
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.
contoh:
Output:
enam, Penambahan cell span kolom pada tabel HTML: untuk menggabungkan lebih dari satu kolom menjadi satu kesatuan, maka digunakan atribut colspan. Contoh:
Output:
tujuh, Penambahan cell span baris pada tabel HTML: untuk menggabungkan lebih dari satu baris menjadi satu kesatuan maka digunakan atribut rowspan. contoh:
Output:
delapan, Penambahan caption pada tabel HTML: untuk menambahkan caption pada tabel, maka digunakan tag "caption".
contoh:
Output:
sembilan, Penambahan latar belakang berwarna pada tabel HTML: penambahan warna dapat dilakukan sebagai latar belakang pada tabel HTML menggunakan pilihan (option) "background-color".
contoh:
Output:
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:
Output:
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:
Output:
 |
| Gambar 18 nested tabel |
Tidak ada komentar:
Posting Komentar
Respon komentar 7 x 24 jam, so please be patient :D