Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / KOMPUTER / WEBSITE

Cara Membuat Tabel di HTML - Website Pemula 3

Author - Ivank Panzoel Zeve
Cara Membuat Tabel di HTML - Website Pemula 3
Membuat Tabel
Membuat Tabel - Tabel mempunyai peranan penting di dalam suatu tampilan website, dengan menggunakan tabel kita dapat dengan mudah meletakan suatu objek, attribut di dalam tabel cukup banyak, berikut ini beberapa atribut di dalam tabel :
Daftar Attribut di dalam Tabel
AttributKeterangan
widthUntuk mengatur lebar tabel
heightUntuk mengatur tinggi tabel
borderUntuk menentukan bingkai tabel
cellpaddingUntuk menentukan jarak padding antar cell
cellspacingUntuk menentukan jarak spacing antar cell
nameUntuk menentukan nama tabel
bgcolorUntuk mengatur warna background
backgroundUntuk menampilkan gambar sebagai background
alignUntuk menentukan teks secara horizontal (rata kiri, tengah dan kanan)
valignUntuk menentukan teks secara vertical (rata kiri, tengah dan kanan)
styleUntuk CSS
bordercolorUntuk mengatur warna bingkai
Jika hanya menggunakan attribut tabel saja maka tabel tidak akan terbentuk karena belum memiliki baris dan kolom, untuk membuat baris gunakan tag "<tr></tr>" dan untuk menggunakan kolom menggunakan tag "<td></td>"  terdapat juga tag "<th></th>" untuk mengatur header tabel.
Daftar Attribut tag tr, td dan th
AttributKeterangan
bgcolorUntuk mengatur warna background
heightUntuk mengatur tinggi
backgroundUntuk menjadikan gambar sebagai background
alignUntuk mengatur letak teks
valignUntuk mengatur letak teks secara vertikal
colspanUntuk menghilangkan sejumlah kolom
rowspanUntuk menghilangkan sejumlah baris
Contoh cara membuat tabel di bawah ini :
<html>
<head>
<title>Membuat tabel</title>
</head>
<body>
<h2>Daftar Harga Barang</h2>
<table border="1" style="border-collapse : collapse"width="100%">
   <tr bgcolor="#cccccc">
         <th>Nama barang</th><th>Harga satuan</th><th>Jumlah</th><th>Total</th>
   </tr>
   <tr align="center">
         <td>Jeruk</td><td>2000</td><td>2</td><td>4000</td>
   </tr>
 <tr align="center">
         <td>Buah</td><td>4000</td><td>5</td><td>20000</td>
   </tr> <tr align="center">
      <td colspan="3">TOTAL</td><td><b>24000</b></td>
 </tr>
</table>
</body>
</html>
Simpan dengan nama tabel.html. Jika anda jalankan pada internet explore maka hasilnya seperti ini
Cara Membuat Tabel di HTML - Website Pemula 3
Cara Membuat Tabel di HTML

Baca juga :Jenis tag HTML dan fungsinya - Website Pemula 1
Cara manipulasi font dan link - Website Pemula 2