Tag: Table
Photo by Jackson Sophat on Unsplash
Table sering kita gunakan untuk membuat suatu list data. misal Data Siswa, Data Mahasiswa, Data Karyawan, dll. jadi elemen table akan sering kita jumpai dan wajib kita kuasai bagaimana cara membuatnya.
| Gel. | SPP | Reguler | karyawan | International Program | ||
|---|---|---|---|---|---|---|
| Diploma (D3) | Sarjana (S1) | Diploma (D3) | Sarjana (S1) | |||
| I | Rp 800.000,- | Rp 1.920.000,- (Per Semester) |
Rp 2.280.000,- (Per Semester) |
Rp 2.420.000,- (Per Semester) |
Rp 2.780.000,- (Per Semester) |
USD 1.600,-/Semester *Jaminan Kuliah + Magang di Inggris dan Singapore |
| II | Rp 1.200.000,- | |||||
| III | Rp 1.700.000,- | |||||
| IV | Rp 2.200.000,- | |||||
Untuk membuat table seperti contoh diatas, perhatikan penjelasan dibawah ini.
- Table di mulai dengan menggunakan tag <table>.
- Table terdiri dari head table dan body table. header di gunakan untuk menspesifikasikan nama kolom yang akan kita buat, sedangkan body table digunakan untuk mengisi datanya.
- Untuk membuat header table, gunakan struktur <thead><tr><td> atau <tr><th>, sedangkan untuk membuat body table kita bisa menggunakan struktur <tbody><tr><td> atau cukup <tr> <td> saja.
- Tiap baris dalam sebuah table di mulai dengan menggunakan tag <tr>.
- Jumlah kolom dalam setiap barisĀ harus sama, dan didefinisikan dengan menggunakan tag <td>.
- penggabungan cell dapat dilakukan dengan 2 cara :
- penggabungan baris dengan menggunakan rowspan=”n”
- Penggabungan kolom dengan menggunakan colspan=”n”
- n adalah jumlah cell yang akan digabungkan
- table memiliki attribut khusus width, border, cellpadding, cellspacing, dll.
Contoh Table Sederhana
Contoh Table dengan penggabungan baris dan kolom
Catatan
- Semua baris meskipun berada di tengah-tengah dianggap sebagai barisĀ baru dan dimulai dengan tag <tr>.
- Untuk membuat table yang terdiri dari beberapa penggabungan cell dan baris kita cukup menghitung jumlah kolomnya terlebih dahulu, kemudian buatlah tag <td>.
- Jika dalam kolom tersebut terdapat penggabungan baris gunakan rowspan=”(sesuaikan dengan jumlah barisnya)”.
- sedangkan untuk peggabungan kolom gunakan colspan=”(sesuaikan dengan jumlah kolomnya)”.
Contoh Table dengan warna rows yang berbeda-beda
Demikian penjelasan mengenai pembuatan table pada HTML. mudah-mudahan bermanfaat buat kita semua
Keep Learning ^_^
Semangat