Apa itu Tabel?
Saya kutip dari id.wikipedia.org, Tabel merupakan susunan data dalam baris dan kolom, atau mungkin dalam struktur yang lebih kompleks. Tabel banyak digunakan dalam komunikasi, penelitian, dan analisis data. Tabel sering muncul muncul di media cetak, tulisan, perangkat lunak komputer, arsitektur hiasan, rambu lalu lintas, dan lain-lain. Isi dan terminologi untuk menggambarkan sebuah tabel bergantung pada konteks dari data yang akan disajikan. Lebih lanjut, tabel secara signifikan dapat memuat informasi yang berbeda dalam jenis, struktur, fleksibilitas, notasi, representasi dan penggunaan.
Untuk menampilkan data yang terstruktur atau tampilan data dari dari database, kita biasanya akan membuatnya dalam bentuk tabel. HTML menyediakan fasilitas untuk membuat tabel dengan Tag table <table></table>.
Cara Membuat Tabel HTML
Tabel HTML dibuat menggunakan tag <table> kemudian didalamnya terdapat tag <tr>, di mana tag <tr> digunakan untuk membuat baris tabel, sedangkan di dalam tag <tr> terdapat tag <td> yang digunakan untuk membuat sel data.
Contoh kode HTML untuk membuat tabel.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title>Belajar Membuat tabel HTML Bersama SolusiLain.Com</title> </head> <body> <h3>Daftar Peserta Kursus HTML</h3> <table border="1"> <tr> <td>1</td> <td>Alexander Paijo</td> <td>Bengkulu</td> </tr> <tr> <td>2</td> <td>Carolina Roberta</td> <td>Medan</td> </tr> </table> </body> </html> |
Jika dijalankan, maha tampilan hasil kode HTML Table di atas akna terlihat seperti berikut ini.
Atribut border=”1″ yang ditambahkan pada tag pembuka, dimaksudnya untuk memberikan garis/border table. Karena secara default garis tabel HTML tidak terlihat.
Membuat Judul Kolom Tabel HTML
Jika diperhatikan lebih detail tampilan tabel yang dibuat tidak memiliki judul kolom. Judul kolom tabel dapat didefinisikan menggunakan tag <th> (table heading). Tag ini digunakan untuk menggantikan tag <td>, yang digunakan untuk mewakili sel data. Namanya judul kolom tabel, maka kita akan menempatkan tag <th> pada baris teratas.
Contoh Penggunaan Tag <th>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <title>Belajar Membuat tabel HTML Bersama SolusiLain.Com</title> </head> <body> <h3>Daftar Peserta Kursus HTML</h3> <table border="1"> <tr> <th>No</th> <th>Nama Lengkap</th> <th>Alamat</th> </tr> <tr> <td>1</td> <td>Alexander Paijo</td> <td>Bengkulu</td> </tr> <tr> <td>2</td> <td>Carolina Roberta</td> <td>Medan</td> </tr> </table> </body> </html> |
Hasil dari penambahan tag <th> terlihat pada gambar berikut ini.
Menggunakan Atribut Width, Cell Padding, Cell Spacing pada Tabel HTML
Kalian dapat mengatur lebar tabel dengan ukuran pixel (px) atau persen (%). Selain itu kalian juga dapat menggunakan atribut cellpading untuk mengatur jarak tepi sel dengan isi sel dan cellspacing untuk mengatur jarak antar sel pada tabel HTML.
Contoh penggunaan atribut width, cellpadding dan cellspacing pada tabel HTML
1 |
<table border="1" width="600px" cellpadding="10px" cellspacing="0px"> |
Dengan menambahkan atribut seperti contoh kode HTML di atas, maka tampilan tabel menjadi seperti gambar di bawah ini.
Untuk membuat ukuran full screen sesuai dengan lebar browser maka kalian tinggal mengubah nilai atribut width dengan angka 100%, sehingga menjadi width=”100%”.
Berikut ini adalah Membuat Tabel Pada HTML Dengan Tag Table Dasar, insya Allah pembuatan tabel yang lebih kompleks akan dibahas di tutorial berikutnya.