[ HTML ] [ Java ] [ Bahasa C ]


Jumat, Agustus 30, 2019

HTML tabel

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:
menggunakan tag table untuk membuat tabel pada laman html
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).

cara penggunaan css untuk mengatur style tabel
Gambar 2 pengaturan style tabel 

contoh:
Output:
penggunaan css untuk pengatur style pada tabel html
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.

pengaturan collapse border style pada tabel html
Gambar 4 border-collapse pada tabel html

Contoh:
Output:
style collapse border pada tabel html
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.
cell padding pada tabel html
Gambar 6 cell padding

Output:
penggunaan cell padding pada tabel html
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.

text align untuk mengubah arah rataan teks tabel pada html
Gambar 8 text align untuk mengatur rataan teks tabel pada html

contoh:
output:
teks html rata kiri tabel
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.

penggunaan border spasi pada tabel html
Gambar 10 border spasi pada tabel html

contoh:
Output:
penggunaan border spasi pada tabel html
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:
penggabungan dua kolom menjadi satu pada tabel html menggunakan colspan
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:
penggunaan rowspan untuk menggabungkan dua baris pada tabel html
Gambar 13 menggabungkan tabel menggunakan rowspan 

delapan, Penambahan caption pada tabel HTML: untuk menambahkan caption pada tabel, maka digunakan tag "caption".

penggunaan tag caption pada tabel html
Gambar 14 caption tabel pada html

contoh:
Output:
penggunaan caption pada tabel html
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".

background color digunakan untuk mengatur atau mengubah warna latar belakang tabel pada laman html
Gambar 16 penggunaan background color untuk mengubah warna latar belakang tabel html

contoh:
Output:
penggunaan background color untuk mengganti warna latar belakang tabel pada html
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:
pembuatan tabel bersarang atau tabel di dalam tabel (nested table)
Gambar 18 nested tabel





Tidak ada komentar:

Posting Komentar

Respon komentar 7 x 24 jam, so please be patient :D