Cara Membuat Tabel Responsive Di Postingan Blogspot - Fezarzone

Cara membuat tabel responsive di postingan blogspot itu mudah sekali kalau anda mendengarkanlangkah - langkahnya berikut ini.

Sebagai media informasi, halaman blog bisa menyajikan informasi apapun kepada pembaca, baik itu dalam teks, audio, dan video. Dalam hal format teks, kita juga bisa menciptakan tabel di artikel blogspot atau pun wordpress. Terkadang untuk menghidangkan isu yang terang kita memang perlu menambahkan tabel.

Bagaimana ya cara menciptakan tabel di blog ... pada ketika kita membuat blog dan ingin membuat artikel di blogspot, pada teks editor memang tidak bisa kita dapatkan tombol untuk pembuatan tabel, artinya kita harus menjadikannya sendiri dengan arahan HTML. Namun anda tidak perlu khawatir, menciptakan tabel di blogger dengan isyarat HTML itu gampang seperti pada teladan di bawah.


CARA MEMBUAT TABEL DI BLOG

Perlu anda pahami, untuk menuliskan arahan HTML dalam pengerjaan tabel di artikel plogspot, kita harus beralih dahulu dari mode "compose" ke mode "HTML" , anda cukup mengklik tombolnya yang letaknya pada bab sudut kiri atas, tepat di atas tombol editor.

Cara menciptakan di postingan blog bekerjsama sederhana saja, berikut ini yakni arahan HTML yang ialah format dasar dalam pembuatan tabel :

dan ,  dan ,  dan

Dari format dasar di atas, kita mampu kembangkan dalam menciptakan tabel seperti acuan berikut ini :

1. Cara menciptakan tabel 2 kolom kesamping dan 1 baris kebawah, maka kita cukup menuliskan isyarat html berikut pada postingan blogger :

Kolom 1

Kolom 2

akibatnya akan tampil mirip gambar tebel berikut :

Kolom 1

Kolom 2

2. Jika ingin merubahnya menjadi 3 kolom kesamping dan 1 baris kebawah anda cukup menyertakan arahan Kolom 3 saja sebelum arahan dan kesannya akan terlihat seperti ini :

Cara menciptakan tabel 2 kolom kesamping dan 2 baris kebawah, maka kita cukup menuliskan isyarat html berikut pada artikel di blog :

Kolom 1 A	Kolom 1 B
Kolom 2 A	Kolom 2 B

alhasil akan tampil seperti gambar tabel berikut ini :

Kolom 1 A	Kolom 1 B
Kolom 2 A	Kolom 2 B

CATATAN : bab table width .... itu yakni untuk mengendalikan lebar tabel, anda mampu membuat eksperimen sendiri.


3. Jika ingin merubahnya menjadi 3 kolom kesamping dan 2 kolom kebawah anda cukup menyertakan arahan Kolom 3 A dan 3 B di antara dan pertama dan kedua

Kolom 1 A	Kolom 2 A	Kolom 3 A
Kolom 1 B	Kolom 2 B	Kolom 3 B

kesudahannya akan tampil seperti gambar tabel berikut ini :

Kolom 1 A	Kolom 2 A	Kolom 3 A
Kolom 1 B	Kolom 2 B	Kolom 3 B

4. Cara menciptakan tabel 3 kolom kesamping dan 3 kolom kebawah. kalau ingin membuat tabel 3 kolom kesamping dan kebawah maka anda cukup menyertakan instruksi ini sebelum arahan

Kolom 1 A	Kolom 1 B	Kolom 1 C
Kolom 2 A	Kolom 2 B	Kolom 2 C
Kolom 3 A	Kolom 3 B	Kolom 3 C

kesannya akan tampil seperti gambar tabel berikut ini :

Kolom 1 A	Kolom 1 B	Kolom 1 C
Kolom 2 A	Kolom 2 B	Kolom 2 C
Kolom 3 A	Kolom 3 B	Kolom 3 C

Namun jika sehabis aba-aba tersebut anda pasang dan balasannya tidak sama dengan teladan tabel di blog ini anda jangan heran, itu permasalahannya hanya di CSS nya saja, karena setiap template beda dan tidak semua template blogger ada CSS untuk tabel.

Solusinya ialah dengan menyertakan isyarat CSS sendiri di template blog anda, anda bisa menggunakan kode CSS ini :

th, td margin:0;padding: 5px; border:1px solid #ccc; text-align:center;

Cara membuat tabel responsive di blogspot juga sederhana saja, cukup mengedit kode HTML menyertakan kode tertentu mirip langkah berikut ini.

Berikut ini cara menciptakan tabel responsive di artikel blogspot :

1. Login ke Dashboard blogspot Anda
2. Pilih Theme lalu klik Edit HTML
3. Cari instruksi ]]>  .Caranya, tekan Ctrl+F, masukkan instruksi ]]> ke kolom pencarian, kemudian tekan "enter". anda akan ditunjukkan instruksi tersebut dengan highlight warna kuning.
4. Letakkan kode dibawah ini sempurna di atas kode ]]>

/* CSS Post Table */ .post-body table td,.post-body table captionborder: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 captionborder:none;font-style:italic; .post-body table .post-body td, .post-body thvertical-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:#0082d8; .post-body thbackground:#bcdbfe;font-weight:bold;text-transform:uppercase;font-size:14px .post-body th:hoverbackground:#fdfdfd; .post-body td acolor:#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[sasaran="_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 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-cellborder-left:none table.section-columnsborder:none;table-layout:fixed;width:100%;position:relative table.columns-2 td.columns-cellwidth:50% table.columns-3 td.columns-cellwidth:33.33% table.columns-4 td.columns-cellwidth:25% table.section-columns td.columns-cellvertical-align:top table.tr-caption-containerpadding:4px;margin-bottom:.5em td.tr-captionfont-size:80% .widget ul padding:0;

5. Terakhir, klik Simpan Tema