Cara Membuat Tabel Postingan Dengan Mudah Di Blog Amp

Cara Membuat Tabel Postingan Dengan Mudah Di Blog Amp-Banyak blogger apa lagi yang pemula merasa kesulitan membuat tabel pada postingan blog, apalagi tabel tersebut cukup rumit seperti ada baris atau kolom yang digabung, tebal garisnya berbeda, atau ada warnanya. Bagi mereka yang sudah paham betul kode html hal akan lebih memilih untuk mengetikan kode-kodenya sendiri, tapi bagaimana jika kita tidak paham kode-kode tersebut.

Nah buat sobat yang ingin belajar dan membuat tabel untuk postingan sobat bisa baca artikel yang sudah di jelaskan oleh Mas Adhy cara mudah membuat tabel untuk postingan. Disana dijelaskan tentang caranya membuat tabel tersebut valid html 5. Untuk blog dengan template yang sudah valid amp tentu akan sedikit bingung Karena di blog amp menggunakan style css custom. Buat sobat yang memakai blog dengan template yang sudah valid amp silahkan ikuti langkah langkah di bawah ini :

Cara Membuat Tabel Postingan Dengan Mudah Di Blog Amp

Silahkan tambah CSS di bawah ini di sesudah style css custom postingan.

table,caption,tbody{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
table{border-collapse:collapse;border-spacing:0;}
.post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table tr th {border:1px solid #457fdf;font-weight:bold;color:#fff;padding:15px 10px;text-align:left;vertical-align:top;font-size:14px}
.post-body table th {background: #2e9fff;}
.post-body table.tr-caption-container {border:1px solid #f1f1f1;}
.post-body table caption{border:none;font-style:italic;}
.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) > td {background-color:#f9f9f9;}
.post-body table tr:nth-child(even) > td:hover {background-color:#fbfbfb;}
.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="_blank"]: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 {color:#666;font-size:80%;padding:0px 8px 8px ;}
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}

Apabila sobat sudah memasang CSS tabel di postingan blog amp silahkan ikuti langkah berikut:

Buat terlebih dahulu tabelnya, terserah bisa di Word atau Excel. Setelah selesai silahkan blok semua tabel yang telah di buat tadi kemudian copy.

Setelah itu sobat Silahkan kunjungi halaman berikut DISINI

Klik File, kemudian pilih Paste Table Data. Pastekan data yang telah kamu copy ke kotak yang muncul. Kemudian klik Load. Akan muncul tabel yang telah kamu paste seperti di bawah ini:



Hasilnya sepert di bawah ini :

No	Nama Barang	Volume		Harga @ (Rp)		Jumlah (Rp)
1	Penggerukan	10	Ha	Rp	15,000,000		Rp	150,000,000
2	Pupuk Urea	320	Sak	Rp	100,000		Rp	32,000,000
3	Obat Suprasit	200	Botol	Rp	70,000		Rp	14,000,000
4	Obat Pengasus	200	Botol	Rp	70,000		Rp	14,000,000
5	Bibit Udang	500,000	Bibit	Rp	40		Rp	20,000,000
6	Pakan Udang	120	Sak	Rp	150,000		Rp	18,000,000
7	Fiber 200L	100	Unit	Rp	700,000		Rp	70,000,000
8	Kincir Air Olimpia 750 Watt	40	Unit	Rp	5,000,000		Rp	200,000,000
9	Pintu Air (TAKA)	10	Unit	Rp	7,300,000		Rp	73,000,000
10	Ginset Merk Yamaha	5	Unit	Rp	4,500,000		Rp	22,500,000
11	Wayer	5	Gulung	Rp	700,000		Rp	3,500,000
12	Wayer	5	Gulung	Rp	700,000		Rp	3,500,000

Perhatikan kode di bawah tabel yang seperti ini:

</style> <table class="tg"> ... </table>

Silahkan copy kode yang berada di bawah

</style> mulai dari <table class="tg"> hingga </table>

Kemudian pastekan di postingan dengan versi html. Dan selesai, bagaimana, mdah bukan ??

Apabila sobat ingin mengantikan tampilan tabel silahkan edit css nya