Belajar HTML Dasar: #5 Membuat Tabel
Belajar HTML Dasar: #5 Membuat Tabel - Selamat datang di codekami. Pada artikel kita kali ini kita akan melanjutkan serial tutorial belajar HTML. Kali ini kita akan belajar membuat tabel. Udah siap teman-teman?.. Oke langsung saja.
1. Baris
2. Kolom
3. Sel
4. Garis
Ada beberapa tag yang perlu teman-teman ingat dalam membuat suatu tabel, diantaranya:
1. <table> tag ini berfungsi untuk memuat tabel.
2. <thead> tag ini berfungsi untuk membungkus bagian atas tabel.
3. <tbody> tag ini berfungsi untuk membungkus isi dari tabel.
4. <tr> atau (tabel row) berfungsi membuat garis.
5. <th> atau (tabel head) berfungsi untuk memberikan judul pada kolom-kolom <thead>.
6. <td> atau (tabel data) berfungsi untuk membuat sel.
Akan tetapi dalam membuat tabel tag <thead> dan <tbody> bersifat opsional atau tidak wajib digunakan. Yang wajib teman-teman ingat yaitu tag <table>, <tr>, <th>, <td>.
Berikut contoh singkatnya:
Hasilnya akan seperti ini:
Perlu diperhatikan dalam tag <th> dan tag <td> hasil yang ditampilkan berbeda. Isi dalam tag <th> bercetak lebih tebal, ini menandakan kalau isinya akan menjadi header dalam sel-sel tabelnya dibawahnya. Dan dalam contoh diatas kita tidak menggunakan tag <thead> dan <tbody> tetap bisa muncul. Nah yang jadi pertanyaanya sekarang adalah kenapa tidak ada garis dalam tabelnya?
Baca juga: Belajar pemrograman php dari dasar.
Jadi untuk membuat garis dalam tabel kita harus memberikan suatu attribut border dalam tag <table>. Seperti berikut:
Cara Pembuatan Tabel dalam HTML
Dalam membuat tabel di HTML perlu memperhatika 4 unsur-unsur berikut:1. Baris
2. Kolom
3. Sel
4. Garis
Ada beberapa tag yang perlu teman-teman ingat dalam membuat suatu tabel, diantaranya:
1. <table> tag ini berfungsi untuk memuat tabel.
2. <thead> tag ini berfungsi untuk membungkus bagian atas tabel.
3. <tbody> tag ini berfungsi untuk membungkus isi dari tabel.
4. <tr> atau (tabel row) berfungsi membuat garis.
5. <th> atau (tabel head) berfungsi untuk memberikan judul pada kolom-kolom <thead>.
6. <td> atau (tabel data) berfungsi untuk membuat sel.
Akan tetapi dalam membuat tabel tag <thead> dan <tbody> bersifat opsional atau tidak wajib digunakan. Yang wajib teman-teman ingat yaitu tag <table>, <tr>, <th>, <td>.
Berikut contoh singkatnya:
Hasilnya akan seperti ini:
Perlu diperhatikan dalam tag <th> dan tag <td> hasil yang ditampilkan berbeda. Isi dalam tag <th> bercetak lebih tebal, ini menandakan kalau isinya akan menjadi header dalam sel-sel tabelnya dibawahnya. Dan dalam contoh diatas kita tidak menggunakan tag <thead> dan <tbody> tetap bisa muncul. Nah yang jadi pertanyaanya sekarang adalah kenapa tidak ada garis dalam tabelnya?
Baca juga: Belajar pemrograman php dari dasar.
Jadi untuk membuat garis dalam tabel kita harus memberikan suatu attribut border dalam tag <table>. Seperti berikut:
Maka akan muncul output seperti ini:
Pada attribut border berisi angka yang merupakan ukuran dari garisnya. Semakin besar angka yang diberikan maka semakin besar ukuran garisnya. Akan tetapi isi sel dalam tabelnya masih mepet dengan garisnya, bagaimana cara memberikan jarak dengan garisnya?Dengan menambahkan attribut cellpading maka isi sel nanti akan memiliki jarak dengan garis tabelnya. Misalnya :
Hasilnya seperti ini:
Untuk mempercantik tampilanya biasanya kita akan memberikan warna. Dalam tabel ada attribut bgcolor yang akan memberikan warna tanpa menggunakan CSS. Misalnya :
Hasilnya:
Cara Menggabungkan Sel Tabel
Untuk menggabungkan sel dalam tabel kita bisa menggunakan dua attribut, diantaranya:1. colspan, untuk menggabungkan garis.
2. rowspan, untuk menggabungkan kolom.
Attribut ini nantinya bisa kita gunakan dalam tag <th> dan tag <td>. Misalnya:
Hasilnya:
Gimana nih teman-teman? sulit gak? mudah lah ya.. hehe..
Pada artikel kali ini kita sudah banya belajar mengenai table. Menurut saya bagian yang tersulit adalah pada menggabungkan kolom dan baris karena disina ketelitian kita akan diuji,, hehe.. Cukup sekian untuk artikel kali ini, berikutnya kita akan belajar membuat form dengan HTML. Semoga bermanfaat..
0 Response to "Belajar HTML Dasar: #5 Membuat Tabel"
Post a Comment