Tabel adalah gabungan dari baris dan kolom. Baris adalah bagian yang vertikal (atas-bawah) dari table dan kolom adalah bagian yang horisontal (kiri-kanan) dari table. Lebih mudahnya silahkan lihat gambar di bawah ini.
Dari gambar di atas dapat kita lihat contoh dari sebuah tabel menu makanan. Sekarang kita akan coba membuat tabel yang sama seperti gambar di atas dengan menggunakan HTML. Perhatikan coding di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Table HTML</title>
</head>
<body>
<table border="1">
<tr>
<th >No</th>
<th >Makanan</th>
<th >Harga</th>
</tr>
<tr>
<td>1</td>
<td>Soto</td>
<td>Rp. 7.000</td>
</tr>
<tr>
<td>2</td>
<td>Mie Goreng</td>
<td>Rp. 5.000</td>
</tr>
<tr>
<td>3</td>
<td>Bakso</td>
<td>Rp. 10.000</td>
</tr>
<tr>
<td>4</td>
<td>Mie Ayam</td>
<td>Rp. 8.000</td>
</tr>
<tr>
<td>5</td>
<td>Nasi Pecel</td>
<td>Rp. 7.000</td>
</tr>
<tr>
<td>6</td>
<td>Rawon</td>
<td>Rp. 11.000</td>
</tr>
</table>
</body>
</html>Penjelasan:
- <table>...</table> berfungsi untuk membuat table.
- <tr>...</tr> singkatan dari table row, berfungsi untuk membuat baris dalam tabel.
- <th>...</th> singkatan dari table head, berfungsi untuk membuat kolom dengan tulisan yang tebal (text dalam kolom). Digunakan untuk membuat bagian atas kolom / baris pertama / nama kolom.
- <td>...</td> funsinya sama seperti tag <th>, yaitu membuat kolom, namun tulisan yang di hasilkan tidak tebal.
Sekarang kita tambahkan css untuk memberikan warna di baris pertama agar terlihat sama. Bagi yang belum tau apa itu css dan bagaimana cara penggunaannya silahkan baca dulu penjelasan saya tentang css. Kita tambahkan coding css seperti di bawah ini di bawah tag <title>..</title>
<style type="text/css">
#kolom1{
background: green;
}
#kolom2{
background: yellow;
}
#kolom3{
background: blue;
}
</style>Kemudian rubah di tag <tr> pertama, menjadi seperti berikut.
<tr>
<th id="kolom1">No</th>
<th id="kolom2">Makanan</th>
<th id="kolom3">Harga</th>
</tr>Pada baris pertama (<tr> pertama) kita tambahkan id pada setiap tag <th>, untuk id tidak di perbolehkan menggunakan nama yang sama, misalnya kita gunakan id kolom1,kolom2,dan kolom3. Kemudian kita buat cssnya di atas, kita hubungkan menggunakan selector id. Dalam selector kita isi baground dengan warna yang kita inginkan misalnya warna hijau, kuning, dan biru. Hasil yang di dapat seperti gambar berikut.
<style type="text/css">
#kolom1{
background: green;
}
#kolom2{
background: yellow;
}
#kolom3{
background: blue;
}
/*Tambahkan ini*/
.no{
text-align: center;
}
</style>Tambahkan class="no" seperti di bawah ini.
<tr>
<td class="no">1</td>
<td>Soto</td>
<td>Rp. 7.000</td>
</tr>
<tr>
<td class="no">2</td>
<td>Mie Goreng</td>
<td>Rp. 5.000</td>
</tr>
<tr>
<td class="no">3</td>
<td>Bakso</td>
<td>Rp. 10.000</td>
</tr>
<tr>
<td class="no">4</td>
<td>Mie Ayam</td>
<td>Rp. 8.000</td>
</tr>
<tr>
<td class="no">5</td>
<td>Nasi Pecel</td>
<td>Rp. 7.000</td>
</tr>
<tr>
<td class="no">6</td>
<td>Rawon</td>
<td>Rp. 11.000</td>
</tr>Jika kita lihat masih ada perbedaan antara gambar tabel manual dengan tabel yang kita buat, ya bentuk tabelnya agak berbeda. Untuk itu tambahkan coding css di bawah.
table{
border-collapse:collapse;
}Bila di rasa ukuran kolom terlalu kecil bisa kita atur sesuka hati kita. Ada beberapa cara dalam mengatur lebar kolom, tapi saya pakai lewat css saja. Ubah coding css tadi menjadi seprti ini.
#kolom1{
background: green;
width: 200 px;
}Coding Lengkapnya seperti ini.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Table HTML</title>
<!-- ------------------------ Tambahkan ini -->
<style type="text/css">
#kolom1{
background: green;
width: 200 px;
}
#kolom2{
background: yellow;
}
#kolom3{
background: blue;
}
table{
border-collapse:collapse;
}
/*Tambahkan ini*/
.no{
text-align: center;
}
</style>
<!-- -------------------------- -->
</head>
<body>
<table border="1">
<tr>
<th id="kolom1">No</th>
<th id="kolom2">Makanan</th>
<th id="kolom3">Harga</th>
</tr>
<tr>
<td class="no">1</td>
<td>Soto</td>
<td>Rp. 7.000</td>
</tr>
<tr>
<td class="no">2</td>
<td>Mie Goreng</td>
<td>Rp. 5.000</td>
</tr>
<tr>
<td class="no">3</td>
<td>Bakso</td>
<td>Rp. 10.000</td>
</tr>
<tr>
<td class="no">4</td>
<td>Mie Ayam</td>
<td>Rp. 8.000</td>
</tr>
<tr>
<td class="no">5</td>
<td>Nasi Pecel</td>
<td>Rp. 7.000</td>
</tr>
<tr>
<td class="no">6</td>
<td>Rawon</td>
<td>Rp. 11.000</td>
</tr>
</table>
</body>
</html>Saya rasa untuk tutorial kali ini cukup sampai disini. Temen-temen bisa mencoba mengutak-atik coding yang saja jelaskan. Bila ada yang kurang jelas atau ingin mengubah tampilannya dan mengalami kesulitan silahkan tanyakan di komentar. Pengalaman saya sendiri dalam belajar coding, kalo coding tidak di autak-atik maka kita tidak akan tahu apa fungsi dari coding yang kita buat apa lagi kalo copy paste. Oke semangat belajar, bila blog ini menurut temen-temen bermanfaat silahkan kunjungi terus belajarpemrograman-web.blogspot.co.id.
Tidak ada komentar:
Posting Komentar