Ketemu sama aku lagi neehh....kali ini aku mau sharing cara membuat tabel di html. Tabel memang sangat penting, bukan hanya untuk merapikan laporan, tabel juga bisa untuk mensimplekan tampilan. Jadi yang tampilan amburadul, dengan tabel maka akan disulap menjadi sangat tertata rapi. Oke deh sebelum membuat tabel, kita harus tau tag untuk membuat tabel itu sendiri. Disini saya akan sedikit jelaskan tag untuk membuat tabel.
<table>..........</table> : Kode awal untuk membuat tabel
<th>.......</th> : Kode untuk membuat tabel dengan header. TH singkatan dari table header
<tr>.......</tr> : Kode untuk membuat baris baru dalam sebuah tabel, TR singkatan dari table rows
<td>.......</td> : Kode untuk membuat kolom baru dalam sebuah tabel, TD singkatan dari tabel data
setiap elemen dalam html tersusun secara sistematis. Setiap awalan harus ada akhiran, misalnya awalan <table>, harus ada akhiran </table> pula
Untuk penerapannya, kita coba buat sebuah tabel sederhana. Kodenya sebagai berikut
<table width="300" border="2">
<tr>
<td>Nama</td>
<td>Alamat</td>
<td>No. Telp </td>
<td>Umur</td>
</tr>
<tr>
<td>Afinzdi</td>
<td>Surabaya</td>
<td>081234567</td>
<td>21 th </td>
</tr>
<tr>
<td>Quin</td>
<td>Surabaya</td>
<td>081234567</td>
<td>20 th </td>
</tr>
</table>
dari kode diatas akan dihasilkan tabel seperti ini
| Nama | Alamat | No. Telp | Umur |
| Afinzdi | Surabaya | 081234567 | 21 th |
| Quin | Surabaya | 081234567 | 20 th |
Kalian bisa membuat tabel yang lebih menarik dengan menambahkan warna untuk background tabelnya, serta kalian juga bisa memberikan warna untuk bordernya.
Beberapa atribut tambahan dalam membuat tabel pada html
width : untuk mengatur lebar tabel
height : untuk mengatur tinggi tabel
border : untuk mengatur tebal border tabel
bgcolor: untuk mengatur warna background tabel
cellpadding : untuk mengatur jarak antara garis dengan objek yang ada didalam tabel
cellspacing : untuk mengatur jarak setiap cell tabel
rowspan : jumlah baris yang memotong beberapa baris
colspan : jumlah kolom yang memotong beberapa kolom
align : untuk mengatur posisi horizontal
valign : untuk mengatur posisi vertical
Sekarang coba kita buat tabel yang lebih menarik dengan menambahkan atribut tambahan seperti bgcolor
Berikut kodenya :
<table width="300" border="4" align="center" cellspacing="3">
<tr><td bgcolor="#0000FF"="#0000FF">Perusahaan</td>
<td bgcolor="#FF0000">Jenis Produk</td>
<td bgcolor="#3b5998">keterangan</td>
</tr>
<tr> <td bgcolor="#00FF66">Mayora</td>
<td bgcolor="#FF00FF">Better</td>
<td bgcolor="#00FFFF">Kue</td></tr>
</table>
hasil tabelnya seperti ini
Maaf karena template ga bisa nampilin tabel, jadi saya berikan gambar saja
Nah bagaimana, sudah bisa kan bikin tabelnya. Sekarang kalian coba buat tabel yang leebih atraktif sendiri. Silahkan mencoba dan semoga berhasil
Yoroshiku !!! ^^
sumber referensi :
http://www.mediabloger.com/2013/03/cara-membuat-tabel-dengan-html.html
Tata Cara Berkomentar yang Baik dan Benar :
1. Gunakan Bahasa yang Sopan.
2. Biasakanlah berkomentar sebelum meninggalkan.
3. Usahakan jangan menggunakan anonymous
4. Saya sangat berterima kasih atas komentar yang kalian berikan
5. Admin selalu berusaha melakukan yang terbaik untuk para pengunjung ConversionConversion EmoticonEmoticon