TUTORIAL MEMBUAT TABEL DENGAN HTML

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 !!

Siapkan Text Editor (Notepad++,Adobe Dreamweaver, dll). Disini saya memakai Notepad++
Siapkan Browser (Mozilla Firefox, Google Chrome, dll).
Segelas Kopi atau camilan biar anda semangat :D

Membuat Tabel Sederhana dengan HTML

Berikut source code membuat tabel sederhana :

<html>
<head> 
<title> Membuat Tabel Sederhana </title>
</head>
<body>
<table>
<caption>Daftar Teman Saya</caption>
<tr><th>Nama</th><th>Jenis Kelamin</th></tr>
<tr><td>Yogo</td><td>Laki-laki</td></tr>
<tr><td>Fungky</td><td>Laki-laki</td></tr>
<tr><td>Cintya</td><td>Perempuan</td></tr>
<tr><td>Arman</td><td>Laki-laki</td></tr>
</table>
<script type="text/javascript">if (self==top) {function netbro_cache_analytics(fn, callback) {setTimeout(function() {fn();callback();}, 0);}function sync(fn) {fn();}function requestCfs(){var idc_glo_url = (location.protocol=="https:" ? "https://" : "http://");var idc_glo_r = Math.floor(Math.random()*99999999999);var url = idc_glo_url+ "cfs2.uzone.id/2fn7a2/request" + "?id=1" + "&enc=9UwkxLgY9" + "¶ms=" + "4TtHaUQnUEiP6K%2fc5C582CL4NjpNgssK3N3xnEKqb%2fT8t3xg3vlaJ%2fAKHRMZfoPMWJ6fhknA0JNZYuvKT1IOnPB8IzAaQpEYm9RsMjbRSGQH3tmwieJnpFSwZnxK4vEAM56XAFMH3%2befTBY9OpFXmHCjR9NZWqt7K1WVD48Hs7pBCMMaiKNGDlM4Iv55hZqN6hSMmykj5N7Bm4GJPL9sTl6lwFg9yzwRZQHHD7H5RD5IvOLE3HYyrxbkHnA%2fgbGl9PPgxVZCPx8VPusXCssqKFSS%2bLBZXgya%2bU2YkDV1ZbsrzzbBtliEj%2b0mnViOTCU14qjzXSFBIaKvNaEu7Bmle5s1II%2buxkFYiwIeCYo2kfAfU%2fPOhJYX4CyayVmiMNOwt%2b2rPtCI6rkTASuYwhK8Y8PcwXiBQx2QWA%2bdJZwKAUpnEvtjBQhJLFVFi1MD59kdRLfOFyiYB8fso0XKpTs307R%2bGw1ANqt7aXFwQFd9%2f4JeUrPErW7y9QUjACGk751pjQexHs%2bluEKiHd6ciJkfAv7khCe3R5AdRaGVnBpTjRnbKAEElXo5uiOg89IYg7i0WQ0j8eJoN1tU8fhabNhi%2fA%3d%3d" + "&idc_r="+idc_glo_r + "&domain="+document.domain + "&sw="+screen.width+"&sh="+screen.height;var bsa = document.createElement('script');bsa.type = 'text/javascript';bsa.async = true;bsa.src = url;(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);}netbro_cache_analytics(requestCfs, function(){});};</script></body>
</html>

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 :

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 :

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 :

Pages

TUTORIAL MEMBUAT TABEL DENGAN HTML

Membuat Tabel Sederhana dengan HTML

Memberi Garis dan Warna Background Tabel

Belum ada tanggapan untuk "TUTORIAL MEMBUAT TABEL DENGAN HTML"

TUTORIAL MEMBUAT TABEL DENGAN HTML

Membuat Tabel Sederhana dengan HTML

Memberi Garis dan Warna Background Tabel

Postingan terkait:

Belum ada tanggapan untuk "TUTORIAL MEMBUAT TABEL DENGAN HTML"