Sekarang, bagaimana cara menampilkan data di situs web dalam bentuk tabel seperti di word processor atau spreadsheet. Caranya tak lain dan tak bukan menggunakan tag table di html. Bagaimana tag nya? Langsung saja....
Membuat tabel dengan html itu gampang-gampang susah, karena tag tabel tidak hanya tag pembuka dan penutup saja. Didalam tag itu ada tag lain untuk membuat kolom dan baris pada tabel.
Untuk membuat tabel dengan satu baris dan satu kolom inilah kode html nya.
-----------------mulai kode html----------------------
<html>
<head><title>Membuat Tabel</title></head>
<body>
<table>
<tr>
<td>isi dari tabel ditulis di sini</td>
</tr>
</table>
</body>
</html>
-----------------akhir kode html----------------------
seperti yang anda lihat, untuk membuat satu tabel dengan satu baris dan kolom diperlukan tiga pasang tag. Yaitu tag <table> dengan penutupnya </table>, <tr> dengan </tr> dan <td> dengan </td>.
Apa sih guna tag-tag tersebut??? Ok, Saya jelaskan.
Tag yang harus ada di awal untuk membuat satu tabel adalah tag <table>. Untuk penutupnya gunakan tag </table>.
Untuk membuat satu baris pada tabel gunakan tag <tr> dan penutupnya </tr> diantara tag <table> </table>.
Untuk membuat satu kolom pada satu baris yang ada pada tabel gunakan tag <td> dan penutupnya </td>, diantara tag <tr> </tr>.
Biar lebih gampang saya beri contoh membuat satu tabel dengan satu baris dan dua kolom.
-----------------mulai kode html----------------------
<html>
<head><title>Membuat Tabel Dengan Satu Baris dan Dua Kolom</title></head>
<body>
<table>
<tr>
<td>isi dari kolom pertama ditulis di sini</td>
<td>isi dari kolom kedua ditulis di sini</td>
</tr>
</table>
</body>
</html>
-----------------akhir kode html----------------------
Dari contoh di atas dapat anda lihat jika ingin menambah kolom pada baris cukup tambahkan tag <td></td> diantara tag <tr></tr>.
Jika ingin menambah baris bagaimana? Lihat kode di bawah.
-----------------mulai kode html----------------------
<html>
<head><title>Membuat Tabel Dengan Dua Baris dan Tiga Kolom</title></head>
<body>
<table>
<tr>
<td>baris pertama, kolom pertama ditulis di sini</td>
<td>baris pertama, kolom kedua ditulis di sini</td>
<td>baris pertama, kolom ketiga ditulis di sini</td>
</tr>
<tr>
<td>baris kedua, kolom pertama ditulis di sini</td>
<td>baris kedua, kolom kedua ditulis di sini</td>
<td>baris kedua, kolom ketiga ditulis di sini</td>
</tr>
</table>
</body>
</html>
-----------------akhir kode html----------------------
Ingat, jumlah tag kolom <td></td> jumlahnya harus sama pada tiap baris. Jika tidak bentuk tabel akan berantakan.
Tapi mungkin anda pernah melihat ada tabel yang kolomnya mengambil lebih dari satu baris. Jadi, kolom tersebut berada di baris pertama sampai baris ketiga misalnya. Atau, pada satu tabel ada baris yang memiliki cuma dua kolom, sementara baris yang di bawahnya memiliki tiga kolom.
Bagaimana cara membuatnya?? Tunggu artikel berikutnya: Membuat Tabel Dengan HTML 2
Kamis, 06 Mei 2010
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar