Cara Lengkap Menciptakan Tabel Di Blog

Membuat tabel di blog - Tabel merupakan suatu denah berisi data-data untuk mengelompokkan data berdasar jenis maupun kategori. Nah keberadaan tabel di blog merupakan hal yang penting selain memudahkan para pembaca blog dalam memahami isi dari artikel blog yang anda publikasikan. Lalu bagaimana cara menciptakan tabel dengan baik dan benar? Akan aku jelaskan disini secara lengkap dan detail:

Secara fundamental Table di blogger mempunyai isyarat menyerupai berikut:
<table>
<tr>
<td></td>
</tr>
</table>

Table : Merupakan denah dari tabel itu sendiri sanggup anda hias dengan warna garis, panjang tabel, style border dan lain sebgainya.
Tr : Merupakan baris tabel
Td : Merupakan kolom pada Tabel

Sebagai pola berikut:
 Tabel merupakan suatu denah berisi data Cara Lengkap Membuat Tabel di Blog

Penjelasannya sebagai berikut:

tb  Merupakan Keseluruhan Tabel atau <table>
tb  Merupakan baris atau <tr>
tb  Merupakan kolom atau <td>

Contoh Cara penulisan di dalam artikel blog:

1.Tabel Biasa

Belajar Membuat Tabel

Kode yang ditulis:
<table width="620" border="1"><tr><td>Belajar Membuat Tabel</td></tr></table>

2.Tabel Biasa dengan Huruf di posisi center / tengah

Belajar Membuat Tabel

Kode yang ditulis:
<table width="620" border="1"><tr><td align="center">Belajar Membuat Tabel</td></tr></table>

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

Belajar Membuat Tabel

Kode yang ditulis:
<table width="620" border="6"><tr><td align="center">Belajar Membuat Tabel</td></tr></table>

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

Tabel kolom 1Tabel kolom 2

Kode yang ditulis:
<table width="620" 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 abjad center / tengah

Tabel kolom 1Tabel kolom 2

Kode yang ditulis:
<table width="620" 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

Kolom satuKolom dua
Baris keduaBaris kedua

Kode yang ditulis:
<table width="620" 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 abjad posisi center / tengah

Kolom satuKolom dua
Baris keduaBaris kedua

Kode yang ditulis:
<table width="620" 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 abjad posisi center / tengah

Kolom satuKolom dua
Baris keduaBaris kedua
Baris ketigaBaris ketiga
Baris keempatBaris keempat

Kode yang ditulis:
<table width="620" 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 abjad posisi center / tengah

Kolom satuKolom dua
Baris keduaBaris kedua
Baris ketigaBaris ketiga
Baris keempatBaris keempat

Kode yang ditulis:
<table width="620" 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.

satu
Kolom satuKolom dua
Baris keduaBaris kedua
dua
Baris ketigaBaris ketiga
Baris keempatBaris keempat

Kode yang ditulis:
<table width="620" 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 Terpisah 1 & 2 Kolom

Tabel Terpisah 1 & 2 Kolom
Daftar Blogger
No.Name:
1.Nama Satu
2.Nama Dua
3.Nama Tiga

Kode yang ditulis:
<table align="center" border="1" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel Terpisah 1 & 2 Kolom</b></caption><tr><th colspan="2">Daftar Blogger</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>

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.

BELAJARMEMBUAT
TABEL
BLOG

<table border="1" height="200" width="620">
<TR>
<td valign="top">BELAJAR</td><td>MEMBUAT</td>
</tr>
<tr>
<td>TABEL</td><td><center>BLOG</center></td>
</tr>
</table>

Berikut ialah beberapa variasi tabel yang lain, perhatikan text yang dicetak tebal.
A. Variasi garis tabel tipis
<TABLE WIDTH="620" STYLE="BORDER-COLLAPSE:COLLAPSE;" border="1">
<TR>
<TD>BELAJAR</TD><TD>MEMBUAT</TD>
</TR>
<TR>
<TD>TABEL</TD><TD>BLOG</TD>
</TR>
</TABLE>
Hasilnya :
BELAJARMEMBUAT
TABELBLOG

B. Garis tipis dan berwarna
<TABLE WIDTH="620" 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:
IDEKAMU
YANGINOVATIF

Mungkin itu dulu yang sanggup aku share kalau ada yang mau menambahi silahkan share di komentar yang telah disediakan. Terima kasih.

0 Response to "Cara Lengkap Menciptakan Tabel Di Blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel