Cara Membuat Tabel Menggunakan HTML
Cara Membuat Tabel Menggunakan HTML - Hi Blogger Lovers !! kali ini saya akan memberikan tutorial bagaimana Cara Membuat Tabel Menggunakan HTML. Tabel merupakan elemen penting ketika kita ingin membangun daftar terdiri dari kolom dan baris, dengan adanya tabel tampilan daftar menjadi tertata rapih dan enak untuk dilihat.
Cara Membuat Tabel Menggunakan HTML
OK langsung saja kita mulai tutorialnya, pertama-tama sobat siapkan text editornya untuk membuat file htmlnya, lalu sobat copy paste kode berikut atau tulis manual pada editor yang sobat gunakan supaya terbiasa.
<table border='1' cellpadding='5' cellspacing='0'> <tr> <th>Kolom satu</th> <th>Kolom dua</th> <th>Kolom tiga</th> <th>Kolom empat</th> </tr>
<tr> <td>Baris satu Kolom satu</td> <td>Baris satu Kolom dua</td> <td>Baris satu Kolom tiga</td> <td>Baris satu Kolom empat</td> </tr>
<tr> <td>Baris dua Kolom satu</td> <td>Baris dua Kolom dua</td> <td>Baris dua Kolom tiga</td> <td>Baris dua Kolom empat</td> </tr>
<tr> <td>Bariss tiga Kolom satu</td> <td>Baris tiga Kolom dua</td> <td>Baris tiga Kolom tiga</td> <td>Baris tiga Kolom empat</td> </tr>
<tr> <td>Baris empat Kolom satu</td> <td>Baris empat Kolom dua</td> <td>Baris empat Kolom tiga</td> <td>Baris empat Kolom empat</td> </tr></table>
Simpan file tersebut dengan nama tabel.html, lalu bukalah menggunakan browser kesayangan sobat. Hasilnya kurang lebih seperti gambar di atas.
Penjelasan
<table> - tag awal untuk membuat tabel, pada tag ini TutorialZR juga menambahkan beberapa atribut yaitu border dengan nilai 1 untuk memberikan garis tabel dengan ketebalan 1 px, cellpadding dengan nilai 5 untuk memberikan jarak antara text dengan border tabel, dan cellspacing dengan nilai 0 untuk menghilangkan spasi antara kolom/baris satu dengan kolom/baris lainnya.
<tr> - tag html untuk mengawali suatu baris
<th> - tag html untuk membuat heading tabel
<td> - tag html untuk mengisi data pada baris/kolom tabel
Atribut pada Tabel
Berikut ini beberapa atribut yang sering digunakan dalam tag tabel :
align - untuk mengatur perataan text jika digunakan pada tag <td> atau <th>, sedangkan jika digunakan pada tag <table> akan mengatur penempatan posisi tabel dengan nilai left untuk posisi/perataan kiri, right untuk posisi/perataan kanan dan center untuk posisi/perataan tengah.
valign - vertical align, untuk mengatur perataan text secara vertikal, digunakan pada tag <td> atau <th> dengan nilai top untuk posisi/perataan atas, bottom untuk posisi/perataan bawah dan middle untuk posisi/perataan tengah.
border - untuk memberikan garis/batas pada tabel
bgcolor - untuk memberikan background pada tabel
cellpadding - untuk memberikan jarak antara text dengan border tabel
cellpadding - untuk menghilangkan spasi antara kolom/baris satu dengan kolom/baris lainnya
colspan - untuk menggabungkan kolom, misal : penggunakan colspan = '2' pada <th> yang akan menggabungkan tabel heading kolom 1 dengan kolom 2.
rowspan - untuk menggabungkan baris
width - untuk mengatur lebar dari tabel dengan nilai berupa px atau %
Sekarang, mari kita modifikasi kode html diatas dengan menambahkan beberapa atribut sehingga kodenya menjadi seperti berikut :
<table border='1' cellpadding='5' cellspacing='0'> <tr> <th colspan='2' bgcolor='yellow'>Kolom satu</th> <th rowspan ='2' bgcolor='yellow'>Kolom dua</th> <th rowspan ='2' bgcolor='yellow'>Kolom tiga</th> </tr>
<tr> <td bgcolor='yellow'>Baris satu Kolom satu</td> <td bgcolor='yellow'>Baris satu Kolom dua</td> </tr>
<tr> <td>Baris dua Kolom satu</td> <td>Baris dua Kolom dua</td> <td>Baris dua Kolom tiga</td> <td>Baris dua Kolom empat</td> </tr>
<tr> <td>Bariss tiga Kolom satu</td> <td>Baris tiga Kolom dua</td> <td>Baris tiga Kolom tiga</td> <td>Baris tiga Kolom empat</td> </tr>
<tr> <td>Baris empat Kolom satu</td> <td>Baris empat Kolom dua</td> <td>Baris empat Kolom tiga</td> <td>Baris empat Kolom empat</td> </tr></table>
Maka hasilnya kurang lebih akan menjadi seperti berikut :
Demikianlah "Cara Membuat Tabel Menggunakan HTML"
Komentar
Posting Komentar