Jin Toples Programming

Membuat Tabel Pada HTML - Untuk membuat table pada halaman HTML kita harus menggunakan tag <table>…</table>. Elemen pada table berisi properti <tr>…</tr> untuk menentukan baris (table row) atau membuat baris baru yang di dalamnya terdapat property <td>…</td> untuk menampilkan data pada setiap sel table (table data) atau untuk membuat kolom baru.

Baca juga : Membuat Form Pada HTML

Sebagai contoh struktur elemen table adalah sebagai berikut :

<html>
 <head>
  <title>Struktur Table</title>
 </head>
 <body>
  <table border="1">
   <tr>
    <td>data baris 1 kolom 1</td>
    <td>data baris 1 kolom 2</td>
   </tr>
   <tr>
    <td>data baris 2 kolom 1</td>
    <td>data baris 2 kolom 2</td>
            </tr>
   <tr>
    <td>data baris 3 kolom 1</td>
    <td>data baris 3 kolom 2</td>
   </tr>
  </table>
 </body>
</html>

Maka akan terlihat seperti ini strukturnya :

Sekarang saya akan menjelaskan atribut yang terdapat dalam tag <table>.

Atribut elemen table :

Width = Lebar tabel
Height = tinggi table
Border = tebal garis table
Cellspacing = spasi antar sel
Cellpadding = spasi di dalam sel
Align = [left | center | right] perataan table
Bgcolor = warna latar belakang table

Atribut table row
Align = [left | center | right] perataan sebaris sel secara horizontal
Valign = [top | middle | bottom] perataan sebaris sel secara vertical
Bgcolor = warna latar belakang baris

Atribut table data :
Rowspan = menggabungkan baris
Colspan = menggabungkan kolom
Align = [left | center | right] perataan horizontal
Valign = [top | middle | bottom] perataan horizontal
Width = lebar sel
Height = tinggi sel
Bgcolor = warna latar belakang sel

<html>
 <head>
  <title>Tabel</title>
 </head>
 <body>
  Berikut ini contoh table dengan rowspan dan colspan
  <table width=80% border=2 cellspacing=0 cellpading=0>
   <tr>
    <td>baris 1 kolom 1</td>
    <td>baris 1 kolom 2</td>
   </tr>
   <tr>
    <td colspan=2>baris 2 kolom 1</td>
   </tr>
   <tr>
    <td rowspan=2>baris 3 kolom 1</td>
    <td>baris 3 kolom 2</td>
   </tr>
   <tr>
    <td>baris 4 kolom 2</td>
            </tr>
  </table>
 </body>
</html>

Ketikan script HTML atas pada note pad lalu simpan dengan ekstensi .HTML lalu jalankan untuk mencobanya.

Tabel Pada HTML anda sekarang sudah selesai, baca juga tutorial HTML lainnya.

Terima Kasih Telah Mengunjungi Blog Sederhana Ini.

Di Mohon Apabila Anda Ingin Mengcopas Artikel Pada Blog ini Cantumkan URL Sumber.

Sebagai Pengunjung Yang Baik Anda Dapat Meninggalkan Komentar di Blog Sederhana Ini.

Share this post

10 komentar

AnonymousOctober 23, 2012 at 2:25 AM
thanks ya atas sharingnya :)
keep posting , still sharing what you got :)
AnonymousNovember 11, 2012 at 6:31 PM
terima kasih infonya
[H] - HadesDecember 26, 2012 at 11:48 PM
makasih tips nya .
ditunggu kunjungan ke http://hades-exploit.blogspot.com
:)
ISyamsunJanuary 25, 2013 at 7:14 AM
makasih kode-kodenya sob.
jika berkenan mangga di tengok punya ane http://kumpulankoleksi2013.blogspot.com/
Jin ToplesJanuary 25, 2013 at 7:22 AM
sama - sama gan...
gemscoolFebruary 19, 2013 at 8:08 AM
sy lagi gugling apa itu li trus nyasar kesini ternyata disini malah banyak banget info tentang html bahkan lebih banyak dr yg saya cari ... mantep, lengkap dgn penjelasan row, tr, td .. thx ya sob ..
jilyMarch 6, 2013 at 8:59 AM
tanks gan...
Makcum KampretOctober 10, 2013 at 3:32 AM
kalo untuk menampilkan banyak tabel menggunakan perulangan, banyaknya tabel perulangan yang di tampilkan berdasarkan jumlah nilai yang di tentukan, perulangannya melalui javascript.

gimana tu sob?
UnknownAugust 22, 2015 at 11:34 AM
Thanks tambahan infonya gan...

Bagi agan yang berminat belajar membuat web bisa dilihat di situs berikut ini Kursus Web di Bali