Cara Membuat Table Di Website Dengan Html

■Putra Figur - Boy Paskand 5.9.21
Membuat Kolom kotak Atau Thabel ini bisa Kita Gunakan di Halaman Blogweb maupun di layuot yang bisa kita letakan di bawah header Sebagai Latar Menu Navigasi. Bisa Juga Di Postingan terbaru, Bisa Juga Di manfaatkan Untuk Menyusun Foto berjajar Horizontal Dan Vertikal agar keliahatan Rapi...


Pernahkah Anda Di pusingkan Bagaimana Cara Bikin table di widget blog atau di postingan Blog ?. Bagi Yang Paham coding Html ini akan sangat mudah mengerjakannya, Namun bagi pemula tentu akan sedikit repot.

Promo 
Buku Bacaan Islami Dan Al-Qur'an  ➡️

Saya akan bagikan script membikin tabel yang mudah di blog, baik di postingan maupun di beranda blog yang di selipkan pada widget Html di pengaturan louyut blogger.

Baca Juga:

☆ Apa Beda Website Dan Blog ?

☆ Sang Penemu HTML

☆ Game ' High Domino Island' Dan Fenomenanya. 

☆ Menjadikan Hobi Sebagai Penghasilan Tambahan


Untuk pertama-tama kita tanam dulu CSS nya. Buka Edit themplate, Cari kode ]]></b:skin>  taroh CSS di bawah pas di atas kode tersebut:

 /* CSS Post Table */ .post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:5px 10px;text-align:left;vertical-align:top;} .post-body table th {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;} .post-body table.tr-caption-container {border:1px solid #e9e9e9;} .post-body table caption{border:none;font-style:italic;} .post-body table{} .post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;} .post-body table tr:nth-child(even) &gt; td {background-color:#f9f9f9;} .post-body table tr:nth-child(even) &gt; td:hover {background-color:#0082d8;} .post-body th{background:#bcdbfe;font-weight:bold;text-transform:uppercase;font-size:14px} .post-body th:hover{background:#fdfdfd;} .post-body td a{color:#768187;padding:0 6px;font-size:85%;float:right;display:inline-block;border-radius:3px} .post-body td a:hover {color:#7f9bdf;border-color:#adbce0;} .post-body td a[target=&quot;_blank&quot;]:after {margin-left:5px;} .post-body table.tr-caption-container td {border:none;padding:8px;} .post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;} .post-body td.tr-caption {font-size:80%;padding:0px 8px 8px !important;} .post-body li {list-style-type:square;} img {max-width:100%;height:auto;border:none;} table {max-width:100%;width:100%;margin:1.5em auto;} table.section-columns td.first.columns-cell{border-left:none} table.section-columns{border:none;table-layout:fixed;width:100%;position:relative} table.columns-2 td.columns-cell{width:50%} table.columns-3 td.columns-cell{width:33.33%} table.columns-4 td.columns-cell{width:25%} table.section-columns td.columns-cell{vertical-align:top} table.tr-caption-container{padding:4px;margin-bottom:.5em} td.tr-caption{font-size:80%} .widget ul {padding:0;}
Kemudian Simpan / Save.

Langkah berikutnya Silahkan Masuk kepostingan Terbaru atau tambah widget html di louyut blogger. Copy kan script di bawah dan pastekan.

Kemudian tambahkan di loyout html bukan Kompose:

 <table width="500" border="1">
<tr>
<td>Kolom 1 A </td>
<td>Kolom 1 B </td>
<td>Kolom 1 C </td>
</tr>
<tr>
<td>Kolom 2 A </td>
<td>Kolom 2 B </td>
<td>Kolom 2 C </td>
</tr>
<tr>
<td>Kolom 3 A </td>
<td>Kolom 3 B </td>
<td>Kolom 3 C </td>
</tr>
</table>

Promo Terlaris Bulan Ini :
   

Kolom 1 A sampai 3 C adalah Kotak table yang bisa anda isi dengan teks. Table di atas adalah kolom berisi 3 baris horizontal, dan tiga baris vertikal.

Sangat mudahkan ?, Sekian dulu penjelasan singkatnya, Wassallam..

Tags