» » Cara Membuat Tabel dalam Berbagai Macam dan Jenis

Cara Membuat Tabel dalam Berbagai Macam dan Jenis

Bookmark and Share
Belajar tentang Table pada Postingan di Blogger atau blogspot | Mengenal Table bahasa HTML | Tips Trik bikin Table banyak ragam Variasi. Langsung meluncur untuk belajar. Cara Membuat Tabel dalam Berbagai Macam dan Jenis

1.Tabel Biasa

 Contoh:
belajar membuat tabel

 Code:
<table width="300" border="1"><tr><td>belajar membuat tabel</td></tr></table>

2.Tabel Biasa dengan Huruf di posisi center / tengah

 Contoh:
belajar membuat tabel

 Code:
<table width="300" border="1"><tr><td align="center">belajar membuat tabel</td></tr></table>

3.Tabel Biasa dengan Huruf di posisi center / tengah serta border tebal

 Contoh:
belajar membuat tabel

 Code:
<table width="300" border="6"><tr><td align="center">belajar membuat tabel</td></tr></table>

 4.Tabel Biasa dengan 2 (dua) kolom / columns

 Contoh:
tabel kolom 1tabel kolom 2

 Code:
<table width="300" border="1"><tr><td>tabel kolom 1</td><td>tabel kolom 2</td></tr></table>

 5.Tabel Biasa dengan 2 (dua) kolom / columns serta border tebal dan Posisi huruf center / tengah
Contoh:
tabel kolom 1tabel kolom 2

 Code:
<table width="300" border="6"><tr><td align="center">tabel kolom 1</td><td align="center">tabel kolom 2</td></tr></table>

 6.Tabel Biasa dengan 2 (dua) kolom / columns dan dua baris

 Contoh:
kolom satukolom dua
baris keduabaris kedua

 Code:
<table width="300" border="1"><tr><td>kolom satu</td><td>kolom dua</td></tr><tr><td>baris kedua</td><td>baris kedua</td></tr></table>

 7.Tabel Biasa dengan 2 (dua) kolom / columns dan dua baris serta border tebal juga huruf posisi ceter / tengah

 Contoh:
kolom satukolom dua
baris keduabaris kedua

 Code:
<table width="300" border="6"><tr><td align="center">kolom satu</td><td align="center">kolom dua</td></tr><tr><td align="center">baris kedua</td><td align="center">baris kedua</td></tr></table>

 8.Tabel Biasa dengan 4 (empat) kolom / columns dan dua baris juga huruf posisi ceter / tengah

 Contoh:
kolom satukolom dua
baris keduabaris kedua
baris ketigabaris ketiga
baris keempatbaris keempat

 Code:
<table width="300" border="1"><tr><td align="center">kolom satu</td><td align="center">kolom dua</td></tr><tr><td align="center">baris kedua</td><td align="center">baris kedua</td></tr><tr><td align="center">baris ketiga</td><td align="center">baris ketiga</td></tr><tr><td align="center">baris keempat</td><td align="center">baris keempat</td></tr></table>

 9.Tabel dengan Background Warna-Warni dengan 4 (empat) kolom / columns dan dua baris juga huruf posisi ceter / tengah

 Contoh:
kolom satukolom dua
baris keduabaris kedua
baris ketigabaris ketiga
baris keempatbaris keempat

 Code:
<table width="300" border="1"><tr><td align="center" bgcolor="red">kolom satu</td><td align="center" bgcolor="blue">kolom dua</td></tr><tr><td align="center" bgcolor="yellow">baris kedua</td><td align="center" bgcolor="green">baris kedua</td></tr><tr><td align="center" bgcolor="#00FFFF">baris ketiga</td><td align="center" bgcolor="#FF7F50">baris ketiga</td></tr><tr><td align="center" bgcolor="#ADFF2F">baris keempat</td><td align="center" bgcolor="#FF1493">baris keempat</td></tr></table>

 10.Tabel yang terpisah.
Contoh:
satu
kolom satukolom dua
baris keduabaris kedua
dua
baris ketigabaris ketiga
baris keempatbaris keempat

 Code:
<table width="300" border="1"><th>satu</th><tr><td align="center" bgcolor="red">kolom satu</td><td align="center" bgcolor="blue">kolom dua</td></tr><tr><td align="center" bgcolor="yellow">baris kedua</td><td align="center" bgcolor="green">baris kedua</td></tr><th>dua</th><tr><td align="center" bgcolor="#00FFFF">baris ketiga</td><td align="center" bgcolor="#FF7F50">baris ketiga</td></tr><tr><td align="center" bgcolor="#ADFF2F">baris keempat</td><td align="center" bgcolor="#FF1493">baris keempat</td></tr></table>

11.Tabel Istimewa (halah!)
Contoh:
Tabel Istimewa
Daftar Gan
No.Name:
1.Nama Satu
2.Nama Dua
3.Nama Tiga

 Code:
<table align="center" border="1" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel Istimewa</b></caption><tr><th colspan="2">Daftar Gan</th></tr><tr><th>No.</th><th>Name:</th></tr><tr><td>1.</td><td>Nama Satu</td></tr><tr><td>2.</td><td>Nama Dua</td></tr><tr><td>3.</td><td>Nama Tiga</td></tr></table>

 Bagaimana saudaraku, apakah kalian sudah puas ? bila belum ini ada tambahan tutorial Variasi tabel HTML :

 Perataan text dalam tabel
Bila tabel tidak diatur tinggi dan lebarnya, maka secara default textnya berada di tengah kiri, bila ingin mengatur posisi textnya maka perintahnya sebagai berikut. Perhatikan text yang dicetak tebal.
<TABLE border="1" height="200" width="300">
<TR>
<TD VALIGN="top">IDE</TD><TD>KAMU</TD>
</TR>
<TR>
<TD>YANG</TD><TD><CENTER>INOVATIF</TD>
</TR>
</TABLE>
Hasilnya :


Berikut adalah beberapa variasi tabel yang lain, perhatikan text yang dicetak tebal.
A. Variasi garis tabel tipis
<TABLE STYLE="BORDER-COLLAPSE:COLLAPSE;" border="1">
<TR>
<TD>IDE</TD><TD>KAMU</TD>
</TR>
<TR>
<TD>YANG</TD><TD>INOVATIF</TD>
</TR>
</TABLE>
Hasilnya :

B. Garis tipis dan berwarna
<TABLE STYLE="BORDER-COLLAPSE:COLLAPSE;" bordercolor="red" border="1">
<TR>
<TD>IDE</TD><TD>KAMU</TD>
</TR>
<TR>
<TD>YANG</TD><TD>INOVATIF</TD>
</TR>
</TABLE>
Hasilnya :


Selamat belajar, bila masih bingung silahkan kontak via bebas, bila anda berhasil jangan lupa ucapkan alhamdulillah .... Sekian artikel ini ada dan anda telah membaca postingan tentang Cara Membuat Tabel dalam Berbagai Macam dan Jenis


Backlink here..

di 21.08 - Label: -

4 komentar:

  1. Rohis Facebook20 Juli 2013 pukul 22.20

    salam kenal mas, mf scrip/kodex gk kelihatan.. *smile

    BalasHapus
  2. fafan21 Juli 2013 pukul 16.52

    salam kenal juga , terimakasih . *smile

    BalasHapus
  3. SMK Panca Bhakti Bna24 Februari 2015 pukul 18.29

    Terimakasi telah berbagi artikel ini.Sangat membantu kami

    BalasHapus
    Balasan
    1. Unknown10 Maret 2015 pukul 14.01

      Aku juga senang. terimakasih kunjungannya.

      Hapus