Cara Menciptakan Tabel Dalam Postingan Blog Lengkap

Cara Membuat Tabel dalam Postingan Blog Lengkap - Tabel yakni sejumlah barisan data yang berisikan isu umum, baik itu berupa keterangan, poin-poin, rincian maupun angka yang pada umumnya tabel tersebut lebar dan memanjang ke bawah, atau melebar ke samping.

Sama halnya tabel pada umumnya di dalam blog, tabel mempunyai banyak fungsi, ibarat untuk menciptakan keterangan bisnis online, menciptakan tabel harga, menciptakan tabel rincian atau menciptakan detail dan spesifikasi untuk barang-barang elektronik misalnya, bahkan dalam dunia pendidikan biasanya dipakai untuk menciptakan tabel pengumuman nama secara online misalnya.

Tabel mempunyai aneka macam kegunaan, oleh sebab itu saya akan membahas tutorial cara menciptakan tabel dalam postingan blog secara lengkap ini biar para pembaca sanggup dengan gampang melakukannya. Sebenarnya banyak cara untuk menciptakan tabel di postingan blog, contohnya saja memakai situs orang ketiga atau membuatnya dalam bentuk excel dan menempatkannya di dalam postingan blog.

Namun Pada kesempatan kali ini saya akan saya akan membagikan cara menciptakan tabel melalui HTML blog, alasan saya menciptakan melalui HTML sebab berdasarkan saya lebih gampang digunakan, responsive, gampang di atur ukuran dan di ubah warna sesuka hati, tampilannya lebih menarik, gampang ditambahkan baris tabel lain dan berdasarkan saya terlihat lebih profesional. Pada kesempatan ini juga saya akan membagikan lengkap cara menciptakan tabel 2 kolom dan 3 kolom, serta bagaimana cara menambahkan baris tabel atau menghapus tabel yang berlebih.

Cara menciptakan Tabel dalam Postingan Blog Lengkap

1. Pertama buka blog anda > pilih Tema > pilih Edit HTML

2. Tambahkan arahan berikut ini sempurna diatas ]]></b:skin> atau </style>

/* Post Table */ .post-body table td,.post-body table caption{border:0;padding:10px 15px;text-align:left;vertical-align:top;color:#57606f;font-size:.9rem}.post-body table td:first-child{border-right:0} .post-body table th{background:#747d8c;color:#fff;border:0;padding:10px 15px;text-align:left;vertical-align:top;font-size:15px} .post-body table.tr-caption-container{border:0;margin:0} .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;border:0} .post-body td a{background:#fff;color:#57606f;padding:3px 8px;font-size:70%;float:right;display:inline-block;border-radius:3px;text-transform:uppercase;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)} .post-body td a:hover{box-shadow:0 5px 11px rgba(0,0,0,0.15),0 3px 3px rgba(0,0,0,0.12)} .post-body td a[target="_blank"]:after{margin-left:5px} .post-body table.tr-caption-container td{border:0;padding:0;background:#fff;line-height:17px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:#57606f}.post-body table .tr-caption-container,.post-body table .tr-caption-container img,.post-body img{max-width:100%;height:auto}.post-body table tr:nth-of-type(even) td{background-color:#f6f8f9} .post-body table tr:nth-of-type(odd) td{background-color:#ecf0f1} .post-body table tr td:nth-of-type(even){border-left:1px solid rgba(0,0,0,0.03)} .post-body table tr th:nth-of-type(even){border-left:1px solid rgba(255,255,255,0.03)} .post-body li{list-style-type:circle} .post-body td.tr-caption{background:#465158!important;color:#fff!important;font-size:85%;padding:10px!important}

3. Pilih Simpan Tema

4. Untuk menciptakan tabel dalam postingan anda pilih Menu Postingan > Pilih sajian HTML (Bukan Compose) kemudian letakkan arahan ini di dalamnya (Untuk Tabel 2 Kolom)

<div dir="ltr" style="text-align: left;" trbidi="on"> <table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody> <tr><th>Kode</th><th>Keterangan</th></tr> <tr><td>Blogger terbaru dan terupdate</td><td>AnalisYuki yakni seorang blogger pemula</td></tr> <tr><td>Blogger</td><td>AnalisYuki</td></tr> <tr><td>Blogger</td><td>AnalisYuki</td></tr> <tr><td>Blogger</td><td>AnalisYuki</td></tr> <tr><td>Blogger</td><td>AnalisYuki</td></tr> <tr><td>Blogger</td><td>AnalisYuki</td></tr> <tr><td>Blogger</td><td>AnalisYuki</td></tr> <tr><td>KODE</td><td>KODE</td></tr> <tr><td>KODE</td><td>KODE</td></tr> <tr><td>KODE</td><td>KODE</td></tr> </tbody></table> </div>

Maka kesannya ibarat dibawah ini:

Jika ingin menambahkan tabel di bawahnya atau menghapusnya silahkan tambahkan atau hapus arahan ini di dalamnya

<tr><td>KODE</td><td>KODE</td></tr>

Jika ingin memakai Tabel 3 Kolom pada blog gunakan arahan di bawah ini :

<div dir="ltr" style="text-align: left;" trbidi="on"> <table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody> <tr><th>Nomor</th><th>Nama Siswa</th><th>Keterangan Nilai</th></tr> <tr><td>1</td><td></td><td>99,9 (Lulus)</td></tr> <tr><td>2</td><td>AnalisYuki</td><td>AnalisYuki</td></tr> <tr><td>3</td><td>AnalisYuki</td><td>AnalisYuki</td></tr> <tr><td>KODE</td><td>KODE</td><td>KODE</td></tr> <tr><td>KODE</td><td>KODE</td><td>KODE</td></tr> </tbody></table> </div>

Maka Hasilnya akan ibarat ini:

Tambahkan atau hapus arahan di bawah ini jikalau ingin menghapus atau ingin menambahkan tabel di dalamnya

<tr><td>KODE</td><td>KODE</td><td>KODE</td></tr>

Catatan: Kode tabel yang saya bagikan di atas yakni tabel yang lebarnya sanggup diatur dengan cara menambahkan Spasi di dalamnya

Sekian dari saya Cara Menambahkan Tabel 2 Kolom dan 3 Kolom pada Postingan Blog, jikalau ada sesuatu yang kurang dipahami sanggup menuju kolom komentar, Terimakasih.
Sumber https://www.analisyuki.com/

Bagikan Artikel ini