-->







Iklan

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

10 September 2018, September 10, 2018 WIB Last Updated 2021-09-13T14:01:02Z
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.

cara membuat tabel di posting

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.
Komentar

Tampilkan

No comments:

Post a Comment

Terimakasih sudah mengunjungi jasa setting Website / Jasa Pembuatan Website , jasa setting website www.jasa-website.web.id - dan mau berkontribusi , semoga bermanfaat , kontak TLP / WA 081399167240

Komputer

+