Membuat Tabel di HTML

Posted by Yogo Prestiyanto on Monday, November 19, 2012

Pernahkah anda melihat sebuah halaman web yang didalamnya terdapat sebuah tabel. Bagaimana cara membuatnya? Kali ini saya ingin mempraktekkan dan memberikan pengertian tentang tag yang berfungsi dalam pembuatan tabel. Fungsi dari tabel sendiri adalah untuk mengatur agar informasi dari halaman web dapat disajikan dengan tampilan yang baik untuk dibaca.

Berikut yang harus anda pahami tag yang berfungsi untuk pembuatan sebuah tabel:

Tag
Fungsi
<table>...</table> Tag harus ditulis yang berguna sebagai pembuka dan penutup sebuah tabel
<caption>...</caption>Membuat judul tabel
<th>...</th>Membuat judul kolom
<tr>...</tr>Menentukan sebuah baris dalam tabel
<td>...</td>Membuat sel data

Setelah anda mengerti tag diatas, langsung saja yukk kita praktekkan !!
  1. Siapkan Text Editor (Notepad++,Adobe Dreamweaver, dll). Disini saya memakai Notepad++
  2. Siapkan Browser (Mozilla Firefox, Google Chrome, dll). 
  3. Segelas Kopi atau camilan biar anda semangat :D

Membuat Tabel Sederhana dengan HTML

Berikut source code membuat tabel sederhana :



Setelah anda mengetik source code diatas, kemudian simpan dengan nama file membuattabel.html.
Jalankan file membuattabel.html klik 2x file tersebut.

Maka untuk tampilan adalah berikut ini :

Membuat Tabel di HTML














Memberi Garis dan Warna Background Tabel

Dari contoh diatas yang sudah saya praktekkan tabel belum memiliki garis. Untuk membuat sebuah garis anda bisa menggunakan atribut border pada tag <table>, contoh sebagai berikut :
<table border="bilangan untuk border">
Masih menggunakan file index.html yang telah dibuat tadi. Kemudian disini saya akan setting garis dengan angka 1, maka yang harus dilakukan hanya menambahkan pada tag <table> menjadi seperti berikut :
<table border="1">



Setelah anda edit kemudian save kembali pekerjaanya. Jalankan kembali file membuattabel.html ke web browser anda. Maka tampilan akan menjadi seperti ini :

Membuat Tabel di HTML













Mudah bukan? Setelah anda mampu membuat sebuah garis di tabel. Ilmu selanjutnya adalah pemberian warna latar belakang di tabel. Caranya hanya menambahkan atribut bgcolor pada tag <table>.
<table border="1" bgcolor="yellow">
Masih menggunakan file membuattabel.html yang telah dibuat tadi. Tambahkan atribut bgcolor pada tag <table> seperti diatas. 



Simpan dan jalankan file membuattabel.html di web browser anda. Jadilah untuk tampilan setelah diberi warna latar belakang adalah sebagai berikut :

Membuat Tabel di HTML














Mudah bukan dalam membuat tabel dalam HTML? Mudah-mudahan apa yang telah saya berikan kali ini bermanfaat bagi pembaca. Terima kasih !!

   

2 comments: