Definisi Table
Dengan menggunakan table website kalian bisa menjadi acuan terbaik entah itu tentang proposal laporan atau perhitungan angka dan lainnya akan menjadi sebuah nilai plus untuk para netter yang membaca halaman web anda.
Tabel adalah susunan baris dan kolom, setiap perpotongan baris dan kolom ini disebut dengan sel. perhatikan gambar berikut ini :
 |
| Keterang kolom & baris |
Element Table
Untuk membangun tabel dengan HTML, diperlukan element-element berikut :
- <table> </table>, digunakan untuk mendefinisikan table yang akan dibentuk,
- <tr> </tr>, digunakan untuk membuat komponen baris tabel,
- <td> </td>, digunakan untuk komponen kolom-kolom pada baris tabel.
<html>
<head>
<title> Belajar Membuat Tabel </title>
</head>
<body>
<table>
<tr>
<td> </td>
</tr>
</table>
<!-- Website Complete Coding Blogspot -->
</body>
</html>
Dokumen di atas tabel yang kita buat hanya berisi satu sel.
Anda tentu masih belum melihat perubahan yang terjadi, karena meskipun sel sudah didefinisikan tapi belum diisikan sesuatu. Untuk mengisi sel, dapat kita letakkan antara tag <td> dan </td>.
Catatan :
Mulia dari sini hanya saya tidak akan menuliskan semua tag, akan tetapi akan saya cuplikkan bagian-bagian yang menjadi perhatian kita saja kecuali ditentukan lain
<body>
<table>
<tr>
<td>
Isi sell letakkan DI SINI
</td>
</tr>
</table>
<!-- Website Complete Coding Blogspot -->
</body>
Hasil yang di lihat oleh browser anda :
 |
| Tag dasar Table |
Anda mungkin bertanya-tanya kenapa tampilan tabel tidak sebagaimana tabel pada umumnya. ni dapat kita atur dari atribut-atribut tabel, baris, maupun sel. Mari kita lihat bagaimana atribut-atribut ini berprilaku.
<body>
<table border="1">
<tr>
<td>
Isi sell letakkan DI SINI
</td>
</tr>
</table>
<!-- Website Complete Coding Blogspot -->
</body>
Sebelum kita membahas atribut yang lain coba tambahkan sel-sel pada tabel seperti berikut :
<html>
<head>
<title> Belajar Membuat Tabel </title>
</head>
<body>
<table border="1">
<tr>
<td> Isi sell 1 </td>
<td> Isi sell 2 </td>
</tr>
<tr>
<td> Isi sell 3 </td>
<td> Isi sell 4 </td>
</table>
<!-- Website Complete Coding Blogspot -->
</body>
</html>
Harusnya menghasilkan tabel seperti gambar berikut ini :
 |
| Sel pada table |
Coba tambahkan atribut cellpadding pada tag <table> untuk memberikan jarak antara border dengan isi cell-nya, Misalnya :
<table cellpadding="10">
Dan kemudian reload dengan browser anda dan lihat perbedaannya. Tampilan kurang lebih akan seperti gambar di bawah ini.
 |
| Cellpadding pada table |
Kemudan tambahkan atribut dibwah ini, makan akan merubah tampilan sepetri di bawah ini :
<table cellspacing="10">
 |
| Menggunakan atribut cellspacing |
Atribut cellpadding berfungsi untuk mengatur jarak antara sisi sel dengan isinya dan atribut cellspacing berfungsi untuk mengatur jarak antar sel.
Terdapat beberapa atribut lain yang bisa kita gunakan dalam tag <table>, lihat dan coba atribut-atribut berikut ini. Beberapa atribut yang sering digunakan untuk pengaturan label maupun komponen label lainnya adalah :
| Atribut | Keterangan |
| Align | Mengatur bagaimana tabel ditempatkan |
| Background | Mengatur gambar latar tabel |
| Bgcolor | Mengatur warna latar tabel atau komponen tabel |
| Border | Mengatur ketebalan border |
| Bordercolor | Mengatur warna border yang digunakan |
| Cellpadding | Mengatur jarak teks terhadap cell |
| Cellspacing | Mengatur jarak spasi antar cell |
| Height | Mengatur tinggi tabel |
| Width | Mengatur lebar tabel |
| Nowrap | Mengatur word warp teks dalam cell |
Align, untuk mengatur horisontal alignment tabel. Nilai yang boleh left, center dan right.
Contoh :
align="center"
Width, untuk mengatur lebar, nilai adalah bilangan dalam piksel atau dalam persen relatif terhadap layar lebar.
Contoh :
width="100" width="90%".
Bgcolor, untuk menentukan warna latar belakang, nilai yang boleh adalah nama-nama warna atau kode bilangan warna dalam format RGB.
Contoh :
bgcolor="blue" atau bgcolor="#78F088".
Sedangkan untuk tag <tr> terdapat atribut-atribut sebagai berikut :
- align, atribut ini berfungsi sama dengan align pada tabel,
- bgcolor, sama dengan bgcolor pada tabel.
- align, atribut ini fungsinya sama dengan align pada tabel,
- valign, untuk mengatur alignment vertikal (top, middle, bottom),
- width, sama dengan width pada tabel,
- height, sama dengan height pada tabel,
- bgcolor, sama dengan bgcolor pada tabel,
- colspan, menggabungkan beberapa kolom, misal : colspan="2",
- rowspan, menggabungkan beberapa baris, misal : rowspan="2".
Contoh program :
<html>
<head>
<title> Belajar Membuat Tabel </title>
</head>
<body>
<p align="center">
<table border="1">
<tr>
<td> Sel 1 </td>
<td> Sel 2 </td>
<td> Sel 3 </td>
</tr>
<tr>
<td> Sel 4 </td>
<td> Sel 5 </td>
<td> Sel 6 </td>
</tr>
</table>
</p>
<!-- Website Complete Coding Blogspot -->
</body>
</html>
Hasilnya pada browser :
 |
| Atribut tag TD dan TR |
Tidak bosan saya mengingatkan untuk anda yang ingin belajar membangun sebuah website anda sendiri. Anda harus menghindari yang namanya copy dan paste dalam pembelajaran membangun sebuah website. Mulailah belajar mengetik, dari mengetik anda sudah bisa menghafal, dari menghafal kalian sudah belajar paham. Mulai lah belajar dari diri sendiri.
Belum ada tanggapan untuk "Membuat Table Pada Website"
Posting Komentar