Belajar HTML Bag. 8 ( Table )
Saturday, August 28, 2010
Labels:
Windows dan Linux
Langsung aja ya...Untuk membuat table di HTML anda memerlukan beberapa kombinasi tag, berikut adalah daftar tag-tag tersebut.
Nama Tag | Fungsi |
| <table> | Digunakan untuk mendeklerasikan sebuah table |
| <th> | Digunakan untuk mendeklerasikan sebuah table header |
| <tr> | Digunakan untuk mendeklerasikan sebuah table row / baris |
| <td> | Digunakan untuk mendeklerasikan sebuah table detail / field |
| <tbody> | Digunakan untuk mendeklerasikan sebuah table body / tubuh dari table |
| <tfooter> | Digunakan untuk mendeklerasikan sebuah table footer |
| <caption> | Digunakan untuk mendeklerasikan sebuah table caption / judul tabel |
Cukup jelas kan ? kegunaan tag-tag tersebut dengan membaca tabel diatas. Ok selanjutnya kita akan mencobanya kedalam kode html berikut supaya lebih jelas kegunaan dan fungsinya :
Code :
<html>
<head>
<title>
CobaLihatSaja Tutorial
</title>
</head>
<body>
<table border="1">
<caption>Situs Favorite</caption>
<tr>
<th>Nama Situs</th>
<th>Keterangan</th>
</tr>
<tr>
<td>http://www.4-mall.com</td>
<td>Toko Online</td>
</tr>
<tr>
<td>http://awansusanto.4-mall.com</td>
<td>Blog Gadget</td>
</tr>
<tr>
<td>http://www.cobalihatsaja.com</td>
<td>Blog Komputer & Gadget</td>
</tr>
</table></body>
</html>
Hasil :
Untuk contoh diatas kita membuat sebuah table yang simple, hanya menggunakan tag <table>, <caption>, <th>, <tr> dan <td>. Untuk mencoba seluruh tag yang ada berikut kita buat code sbb :
Code :
<html>
<head>
<title>
CobaLihatSaja Tutorial
</title>
</head>
<body>
<table border="1">
<caption>Situs Favorite</caption>
<thead>
<th>Nama Situs</th>
<th>Keterangan</th>
</thead>
<tbody>
<tr>
<td>http://www.4-mall.com</td>
<td>Toko Online</td>
</tr>
<tr>
<td>http://awansusanto.4-mall.com</td>
<td>Blog Gadget</td>
</tr>
<tr>
<td>http://www.cobalihatsaja.com</td>
<td>Blog Komputer & Gadget</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Jumlah Situs</td>
<td>3</td>
</tr>
</tfoot>
</table>
</body>
</html>
Hasil :
Tampilan yang dihasilkan dengan kode sebelumnya tidak jauh berbeda bukan? Hanya saya untuk kali ini pada bagian judul border lebih tebal dari paba row table, dan juga ada tambahan pada bagian footer. Sekalipun perbedaan yang dibuat tidak terlalu signifikan, sangat disarankan kita menggunakan susunan pada contoh yang kedua, sehingga kode yang kita buat lebih terstruktur dan rapih, yang sangat akan berguna jika kita bekerja dalam project HTML yang kompleks.
Ok, saya rasa cukup sampai disini pembahasan mengenai table di HTML.
Selamat Belajar dan tetap Semangat...
Terima Kasih Sudah Mampir, Salam Persahabatan...
0 comments:
Post a Comment