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
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
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
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 2018</td>
<td>SN-1090</td>
<td> - - - - </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
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 2018</td>
<td>SN-1090</td>
<td> - - - - </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
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.