Sekarang kita membuat tabel dengan tag <table>...</table> di ikuti dengan menyisipkan diantara tag tabel tersebut dengan membuat baris dengan tag <tr>...</tr> kemudian di ikuti dengan membuat kolom yang disisipkan diantara tag baris tersebut dengan tag <td>...</td>.
Informasi sederhana mengenai atribut pada tabel bisa dilihat pada tabel dibawah ini
Nah sekarang kita coba buat contoh menggunakan tabel.
Silahkan Anda tulis kode skrip dibawah ini.
Informasi sederhana mengenai atribut pada tabel bisa dilihat pada tabel dibawah ini
| Tags | Atribut |
| table | width
height border cellspacing cellpadding style class id |
| tr | style class id |
| td | width
height cellspacing cellpadding colspan rowspan style class id |
Silahkan Anda tulis kode skrip dibawah ini.
Maka hasil dari kode skrip diatas akan terlihat pada gambar di bawah.<!DOCTYPE html> <html> <head> <title>Pembelajaran HTML dasar</title> </head> <body> <table width="100%"> <tr> <td> Ini adalah baris pertama kolom pertama </td> <td> Ini adalah baris pertama kolom kedua </td> <td> Ini adalah baris pertama kolom ketiga </td> </tr> <tr> <td> Ini adalah baris kedua kolom pertama </td> <td> Ini adalah baris kedua kolom kedua </td> <td> Ini adalah baris kedua kolom ketiga </td> </tr> </table>
Gambar 7 (Klik pada gambar untuk memperbesar)
Jika Anda ingin memberikan background pada pada setiap kolom Anda bisa tambahkan atribut bgcolor="blue" jika Anda ingin merubahnya dengan warna biru pada tag <td> maka penambahan atributnya akan jadi seperti ini <td bgcolor="blue"> begitu juga sama jika Anda ingin mengatur panjang dan tingginya sebuah kolom yaitu dengan menggunakan atribut width untuk panjang dan height untuk tinggi juga untuk mengatur tulisan untuk tataletaknya dikiri, kanan, tengah atau meratakan semua tulisan dengan kata lain Anda menggunakan left, rigth, center dan justify untuk mengatur tata letaknya dengan menggunakan atribut align="center" dan untuk mengatur posisi tulisan atas = "top", tengah = "center" dan bawah = "bottom" menggunakan atribut valign="top".
Sekarang bagai mana jika pada baris pertama terdapat 2 kolom dan pada baris kedua terdapat 3 kolom?
Untuk membuat seperti itu Anda bisa gunakan atribut colspan yaitu menggabungkan beberapa kolom kesamping menjadi satu dan rowspan yaitu menggabungkan beberapa kolom kebawah menjadi satu.
Contoh menggunakan rowspan dan colspan.
Maka dari kode skrip diatas kan terlihat hasilnya seperti gambar dibawah ini.<!DOCTYPE html> <html> <head> <title>Pembelajaran HTML dasar</title> </head> <body> <table width="100%"> <tr> <td rowspan="2" bgcolor="yellow" valign="top"> Ini adalah kolom yang menggunaka rowspan dengan background
kuning </td> <td align="left"> Ini adalah biasa </td> <td align="right"> Ini adalah biasa </td> </tr> <tr> <td colspan="2" bgcolor="red"> Ini adalah kolom yang menggunakan colspan dengan background
merah </td> </tr> </table>
Gambar 7 (Klik pada gambar untuk memperbesar)
Dan ada juga atribut cellspacing dan cellpadding.
Cellspacing adalah jarak antara dua kolom.
Cellpadding adalah jarak antara tepi kolom dan tulisan.
atribut ini hanya digunakan pada tag <table> jadi penulisannya akan seperti ini <table cellspacing="5" cellpadding="5">.
Nah saya kira untuk tabel cukup dan Anda silahkan melanjutkan kembali tutorialnya.
Cellspacing adalah jarak antara dua kolom.
Cellpadding adalah jarak antara tepi kolom dan tulisan.
atribut ini hanya digunakan pada tag <table> jadi penulisannya akan seperti ini <table cellspacing="5" cellpadding="5">.
Nah saya kira untuk tabel cukup dan Anda silahkan melanjutkan kembali tutorialnya.
No comments:
Post a Comment