Cara membuat tabel dan Macam-macam Tabel Untuk postingan di web

Cara membuat tabel dalam postingan blog atau website , cara membuat tabel kolom dalam posting ini ada beberapa kolom berjajar kekanan dan kolom ke bawah.
silahkan disimak cara membuat tabel nya di bawah ini dalam perbedaan masing-masing tabel nya.

Untuk merubah warna tulisan atau warna beground nya silahkan anda tinggal mengganti kode warna html nya saja dan jika ingin melihat kode warna html yang lengkap silahkan kunjungi halaman kode warna html free

Cara membuat Tabel 4 kolom dan 4 baris

Judul Kolom 2	Judul Kolom 3	Judul Kolom 4

Baris 1 Kolom 2
Baris 1 Kolom 3
Baris 1 Kolom 4

Baris 2 Kolom 2
Baris 2 Kolom 3
Baris 1 Kolom 4

Baris 3 Kolom 2
Baris 3 Kolom 3
Baris 1 Kolom 4

kodenya di bawah ini

<table border="1" cellpadding="10" cellspacing="10" style="background: #fff;">
  <tbody>
<tr><th style="background: #0ABD0C; width: 50%;">Judul Kolom 1</th>
  <th style="background: #0ABD0C;">Judul Kolom 2</th>
  <th style="background: #0ABD0C;">Judul Kolom 3</th>
  <th style="background: #0ABD0C;">Judul Kolom 4</th>

 </tr>
<tr>
  <td><br /></td>
  <td>Baris 1 Kolom 2</td>
  <td>Baris 1 Kolom 3</td>
<td>Baris 1 Kolom 4</td>

 </tr>
<tr>
  <td><br /></td>
  <td>Baris 2 Kolom 2</td>
  <td>Baris 2 Kolom 3</td>
<td>Baris 1 Kolom 4</td>

 </tr>
<tr>
  <td><br /></td>
  <td>Baris 3 Kolom 2</td>
  <td>Baris 3 Kolom 3</td>
<td>Baris 1 Kolom 4</td>

 </tr>
</tbody></table>


Cara membuat tabel 3 kolom dan 4 baris , contohnya tabel yang di bawah ini

Pasaran	Hari/Tanggal	Hasil
Sit-Net	Selasa, 02 Okt 2018	6823
Sittoto	Senin, 01 Okt 2018	8206
Singapura	Senin, 01 Okt 2018	8682

kode tabel nya (tabel 3 kolom dan 4 baris)
<center>
<table border="1" cellpadding="5" cellspacing="5" style="background: #000;">
  <tbody>
<tr><th style="background: #000; width: 40%;"><span style="color: red;">Pasaran</span></th>
  <th style="background: #000;"><span style="color: red;">Hari/Tanggal</span></th>
  <th style="background: #000;"><span style="color: red;">Hasil</span></th>

 </tr>
<tr>
  <td><div style="text-align: left;">
<span style="color: white;"><a href="#">Sit-Net</a></span></div>
</td>
  <td><div style="text-align: center;">
<span style="color: white;">Selasa,</span><br />
<span style="color: white;">02 Okt 2018</span></div>
</td>
  <td><span style="color: white;">6823</span></td>


 </tr>
<tr>
  <td><div style="text-align: left;">
<span style="color: white;"><a href="#">Sittoto</a></span></div>
</td>
  <td><div style="text-align: center;">
<span style="color: white;">Senin,</span><br />
<span style="color: white;">01 Okt 2018</span></div>
</td>
  <td><span style="color: white;">8206</span></td>


 </tr>
<tr>
  <td><div style="text-align: left;">
<span style="color: white;"><a href="">Singapura</a></span></div>
</td><td><div style="text-align: center;">
<span style="color: white;">Senin,</span><br />
<span style="color: white;">01 Okt 2018</span></div>
</td>
  <td><span style="color: white;">8682</span></td>


 </tr>
</tbody></table>
<center>


<br />
<div class="p-1" style="box-sizing: border-box; color: #333333; font-family: lato, sans-serif; font-size: 14px; padding: 0.25rem;">
</div>
</center>
</center>


Cara membuat tabel postingan 3 kolom 10 baris , contohnya seperti di bawah ini

Hari/Tgl	Periode	Hasil
Selasa, 02 Oktober  2018	SN-1090	- - - -
Jumat, 28 September 2018	SN-1089	6 8 2 3
Selasa, 25 September 2018	SN-1088	4 9 7 3
Jumat, 21 September 2018	SN-1087	4 3 9 1
Selasa, 18 September 2018	SN-1086	9 2 8 6
Jumat, 14 September 2018	SN-1085	8 9 5 4
Selasa, 11 September 2018	SN-1084	6 5 9 8
Jumat, 07 September 2018	SN-1083	7 0 6 2
Selasa, 04 September 2018	SN-1082	3 8 1 5
Jumat, 31 Agustus 2018	SN-1081	8 6 2 0

jika pilihan anda membuat tabel 3 kolom dan 10 baris kaya di atas silahkan salin kode nya di bawah ini

<center>
<table border="1" cellpadding="5" cellspacing="5" style="background: #fff;">
  <tbody>
<tr><th style="background: #000; width: 35%;"><span style="color: red;">Hari/Tgl</span></th>
  <th style="background: #000;"><span style="color: red;">Periode</span></th>
  <th style="background: #000;"><span style="color: red;">Hasil</span></th>


 </tr>
<tr>
  <td>Selasa, 02 Oktober&nbsp; 2018</td>
  <td>SN-1090</td>
  <td>&nbsp;- - - -&nbsp;</td>

 </tr>
<tr>
  <td>Jumat, 28 September 2018</td>
  <td>SN-1089</td>
  <td>6 8 2 3</td>

 </tr>
<tr>
  <td>Selasa, 25 September 2018</td>
  <td>SN-1088</td>
  <td>4 9 7 3</td>


</tr>
<tr>
  <td>Jumat, 21 September 2018</td>
  <td>SN-1087</td>
  <td>4 3 9 1</td></tr>
<tr><td>Selasa, 18 September 2018</td>
  <td>SN-1086</td>
  <td>9 2 8 6</td>

</tr>
<tr>

 <td>Jumat, 14 September 2018</td>
  <td>SN-1085</td>
  <td>8 9 5 4</td>


</tr>
<tr>
<td>Selasa, 11 September 2018</td>
  <td>SN-1084</td>
  <td>6 5 9 8</td>


</tr>
<tr>

<td>Jumat, 07 September 2018</td>
  <td>SN-1083</td>
  <td>7 0 6 2</td>

</tr>
<tr>
<td>Selasa, 04 September 2018</td>
  <td>SN-1082</td>
  <td>3 8 1 5</td>

</tr>
<tr>
<td>Jumat, 31 Agustus 2018</td>
  <td>SN-1081</td>
  <td>8 6 2 0</td>




 </tr>
</tbody></table>
</center>
<br />


Tabel 3 kolom kekiri dan 4 kolom kebawah

kodenya di bawah ini

<style>
table {background:#ffe599;width:100%;border:1px solid black}
th,td {height:10px;padding:5px;border:1px solid white}
th {background:black;color:white}
</style>

<br />
<table>
<tbody>
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Pekerjaan</th>
</tr>
<tr>
<td>ketut</td>
<td>19 th</td>
<td>pedagang</td>
</tr>
<tr>
<td>blogger wonogiri</td>
<td>22 th</td>
<td>jual template</td>
</tr>
<tr>
<td>bege</td>
<td>20 th</td>
<td>jasa beli domain</td>
</tr>
<tr>
<td>Tarmodji asg</td>
<td>23 th</td>
<td>jasa website</td>
</tr>
</tbody>
</table>

Hasilnya seperti di bawah ini

Nama	Umur	Pekerjaan
ketut	19 th	pedagang
blogger wonogiri	22 th	jual template
bege	20 th	jasa beli domain
Tarmodji asg	23 th	jasa website

Contoh Tabel ke 5

ini kode tabel nya

<table>

    <tbody>

        <tr>

            <th>Baris 1, kolom 1</th>

            <th colspan='2'>Baris 1, kolom 2-3</th>

        </tr>

        <tr>

            <td>Baris 2, kolom 1</td>

            <td>Baris 2, kolom 2</td>

            <td>Baris 2, kolom 3</td>

        </tr>

        <tr>

            <td>Baris 3, kolom 1</td>

            <td>Baris 3, kolom 2</td>

            <td>Baris 2, kolom 3</td>

        </tr>

    </tbody>

</table>

Dan ini Hasilnya

Baris 1, kolom 1	Baris 1, kolom 2-3
Baris 2, kolom 1	Baris 2, kolom 2	Baris 2, kolom 3
Baris 3, kolom 1	Baris 3, kolom 2	Baris 2, kolom 3

dalam panduan membuat tabel di postingan sementara di sajikan beberapa contoh di atas namun jika ada waktu lagi nanti saya akan tambah untuk pembuatan tabel dengan berbagai jenis kolom.