Cara menciptakan tabel responsive di artikel blogspot itu gampang sekali jikalau anda mendengarkanlangkah - langkahnya berikut ini.
Sebagai media berita, halaman blog bisa menyuguhkan isu apapun kepada pembaca, baik itu dalam teks, audio, dan video. Dalam hal format teks, kita juga bisa menciptakan tabel di postingan blogspot atau pun wordpress. Terkadang untuk menyajikan gosip yang terperinci kita memang perlu menyertakan tabel.
Bagaimana ya cara membuat tabel di blog ... pada ketika kita menciptakan blog dan ingin menciptakan artikel di blogspot, pada teks editor memang tidak mampu kita dapatkan tombol untuk pembuatan tabel, artinya kita mesti membuatnya sendiri dengan isyarat HTML. Namun anda tidak perlu khawatir, membuat tabel di blogger dengan arahan HTML itu gampang seperti pada teladan di bawah.
CARA MEMBUAT TABEL DI BLOG
Perlu anda ketahui, untuk menuliskan aba-aba HTML dalam pengerjaan tabel di artikel plogspot, kita mesti beralih dahulu dari mode "compose" ke mode "HTML" , anda cukup mengklik tombolnya yang letaknya pada bab sudut kiri atas, sempurna di atas tombol editor.
Cara menciptakan di postingan blog bantu-membantu sederhana saja, berikut ini adalah aba-aba HTML yang ialah format dasar dalam pembuatan tabel :
Dari format dasar di atas, kita mampu kembangkan dalam menciptakan tabel mirip teladan berikut ini :dan
,dan ,dan
1. Cara membuat tabel 2 kolom kesamping dan 1 baris kebawah, maka kita cukup menuliskan arahan html berikut pada postingan blogger :
akhirnya akan tampil seperti gambar tebel berikut :
Kolom 1 Kolom 2
| Kolom 1 | Kolom 2 |
2. Jika ingin merubahnya menjadi 3 kolom kesamping dan 1 baris kebawah anda cukup menyertakan aba-aba
Cara menciptakan tabel 2 kolom kesamping dan 2 baris kebawah, maka kita cukup menuliskan aba-aba html berikut pada artikel di blog :
risikonya akan tampil mirip gambar tabel berikut ini :
Kolom 1 A Kolom 1 B Kolom 2 A Kolom 2 B
| Kolom 1 A | Kolom 1 B |
| Kolom 2 A | Kolom 2 B |
CATATAN : bab table width .... itu ialah untuk mengatur lebar tabel, anda mampu membuat eksperimen sendiri.
3. Jika ingin merubahnya menjadi 3 kolom kesamping dan 2 kolom kebawah anda cukup menyertakan aba-aba
akhirnya 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
| 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. jikalau ingin menciptakan tabel 3 kolom kesamping dan kebawah maka anda cukup menyertakan kode ini sebelum aba-aba
kesudahannya 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
| 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 jikalau setelah instruksi tersebut anda pasang dan hasilnya tidak sama dengan teladan tabel di blog ini anda jangan heran, itu permasalahannya cuma di CSS nya saja, karena setiap template beda dan tidak semua template blogger ada CSS untuk tabel.
Solusinya ialah dengan menyertakan instruksi CSS sendiri di template blog anda, anda mampu memakai instruksi CSS ini :
th, td margin:0;padding: 5px; border:1px solid #ccc; text-align:center;
AGAR TABEL DI POSTINGAN BLOG TAMPIL RESPONSIVE
Saat ini internet juga bisa diakses menggunakan media HP, masalahnya ... hal ini akan menciptakan tampilan halaman blog menjadi terpotong bila tidak dibentuk dengan responsive. Begitu juga dengan tabel yang anda buat, anda perlu mengantisipasi tampilan pada ponsel pintar dengan membuat tabel yang responsive.
Cara menciptakan tabel responsive di blogspot juga sederhana saja, cukup mengedit isyarat HTML menambahkan isyarat tertentu seperti langkah berikut ini.
Berikut ini cara menciptakan tabel responsive di postingan blogspot :
1. Login ke Dashboard blogspot Anda
2. Pilih Theme lalu klik Edit HTML
3. Cari arahan ]]> .Caranya, tekan Ctrl+F, masukkan kode ]]> ke kolom penelusuran, lalu tekan "enter". anda akan ditunjukkan instruksi tersebut dengan highlight warna kuning.
4. Letakkan kode dibawah ini sempurna di atas instruksi ]]>
/* 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[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 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 Sumber https://carakumudahblogging.blogspot.com
EmoticonEmoticon