Tabel - HTML

Tabel merupakan kumpulan baris dan kolom. Tabel didefinisikan dengan tag dan ditutup dengan tag
. Sebuah tabel terdiri dari beberapa baris ( dengan tag ... ), dan setiap baris terdiri dari sel-sel data ( dengan tag ... ). TR singkatan dari "Table Row" sedangkan TD singkatan dari "Table Data" dan sebagai isi data di dalam sel tabel. Sebuah tag dapat berisi teks, link, gambar, daftar, form, tabel lain, dll.


Atribut elemen table:
width = pixel dan % (lebar tabel)
height = pixel dan % (tinggi tabel)
border = pixel (tebal garis tepi tabel)
bordercolor = warna (warna tebal garis tepi tabel)
background = lokasi dan nama file (latar belakang image tabel)
bgcolor = warna (warna latar belakang tabel)
align = left, center, right (perataan tabel)
Atribut elemen row:
align = left, center, right (perataan sebaris sel secara horizontal)
valign = top, middle, bottom (perataan sebaris sel secara vertikal)
bgcolor = warna (warna latar belakang baris)

Atribut elemen colom:
align = left, center, right (perataan sekolom sel secara horizontal)
valign = top, middle, bottom (perataan sekolom sel secara vertikal)
bgcolor = warna (warna latar belakang kolom)

Atribut elemen data dalam tabel (sel):
rowspan = angka (baris yang di-span oleh sel, untuk merge baris)
colspan = angka (kolom yang di-span oleh sel, untuk merge kolom)
align = left, center, right (perataan horizontal)
valign = baseline, top, middle, bottom (perataan vertikal)
width = pixel dan % (lebar sel)
height = pixel dan % (tinggi sel)
bgcolor = warna (warna latar belakang sel)
Anda juga bisa menambahkan attribut cellspacing (untuk memberi spasi antar sel) dan cellpadding (untuk spasi dari border ke teks dalam sel). Tabel dengan atribut border, bertujuan untuk menampilkan tabel dengan adanya garis batas, jika tidak menentukan border bisa saja tabel tampil tanpa adanya garis batas.


Contoh : tabel.htm
       Belajar membuat tabel       
  
   baris 1, sel 1   baris 1, sel 2  
  
   baris 2, sel 1   baris 2, sel 2
HTML Table
tabel.htm

Contoh : rowspan.htm
        Rowspan di dalam tabel       
    
   Persediaan Voucher Pulsa di Koperasi Candi   
   
     Persediaan     Nominal     Harga     Jenis Pulsa   
    
     5     5000     6500     IM3   
    
     AS   
    
     16     10000     11000     Simpati   
    
     Mentari   
    
     Starone   
    
     7     8000     9000     IM3   
    
     3     15000     16000     AS   
    
     IM3   
    
     4     20000     20500     XL   
    
     Mentari   
    
     Simpati
HTML Table
rowspan.htm


Contoh : colspan.htm
        Colspan di dalam tabel       
    
    Gaji Karyawan   
    
    Nama Karyawan     Jabatan     Gaji   
    
     Pokok     Lembur     Potongan     Total   
    
     Susanti     Personalia     2.500.000     575.000     10.000     3.065.000   
    
     Harianto     Manager     2.000.000     320.000     15.000     2.305.000   
    
     Edy Sucipto      Assembly     950.000     250.000     30.000     1.175.000   
    
     Bambang     Assembly     950.000     250.000     30.000     1.175.000   
    
     Sri Wahyuni     Assembly     950.000     250.000     30.000     1.175.000
HTML Table
colspan.htm

Contoh : data.htm
        Data dalam bentuk tabel       
Cicilan Piutang
 
    
     Tanggal Bayar      Angsuransi Ke     Total Pinjaman      Cara Pembayaran    
    
     Bunga     Angsuransi     Jumlah   
    
     02/05/2009     1     2750000     10%     687500     687500   
    
     03/06/2009     2     3250000     10%     812500     812500   
    
     04/07/2009     3     1650000     10%     412500     412500   
    
     04/08/2009     4     2075000     10%     518750     518750
HTML Table

Tentang Kami

Langgan artikel Via Email

Langgan artikel Via Email

© 2011 - Tutorial blog dan belajar SEO blogger