Cara Buat Tabel Responsive di Blog Menggunakan Microsoft Word dan CSS

Ngeblog sungguh mengasyikkan. Walaupun tak sedikit juga kita mengalami berbagai kendala, misalnya ketika kita ingin posting sebuah artikel. Apalagi kalau baru belajar, kita pasti mengalami berbagai kendala dan kendala tersebut bisa saja mengurungkan niat untuk posting artikel. Tetapi saya yakin jika terus belajar maka semua kendala tersebut bisa diatasi dan diminimalisir.

Saat pertama kalinya posting artikel, saya mengalami kesulitan ketika hendak posting artikel yang ada tabel. Awalnya saya memang kesusahan karena editornya tidak menyediakan pembuatan tabel, tetapi setelah saya cari referensi diinternet akhirnya saya dapatkan solusinya. Salah satu caranya adalah cara buat tabel di blog menggunakan Microsoft Word dan CSS.

Cara Mudah Buat Tabel Responsive di Blog Dengan Word

Program word, saya rasa sudah pada kenal karena kita sudah terbiasa menggunakannya. Untuk lebih jelasnya cara membuat tabel responsive pada postingan blog menggunakan Microsoft Word, silahkan ikuti langkah-langkah berikut:

1. Bukalah aplikasi Microsoft Word 2007 / 2010 / 2013 / 2016.


2. Buatlah sebuah tabel sesuka hati sobat, kemudian desainlah tabelnya seperti mengatur warna baris judul tabel, lebar kolom, tinggi baris, dsb. Saya yakin membuat tabel di Microsoft Word sudah pada bisa.
   
   

   

   Cara membuat tabel di blog dengan Microsoft Word
   



3. Jika sudah selesai membuat tabel, sekarang simpan dokumen word dengan format "Web Page, Filtered (*.htm;*.html)" difolder yang mudah sobat cari.
   
   

   

   Menyimpan dokumen word fengan format html
   



4. Usai sobat simpan, tutuplah aplikasi Microsoft Word-nya.


5. Sekarang cari lokasi penyimpanan dokumen. Kemudian buka file / dokumen dengan cara klik kanan lalu gunakan aplikasi notepad atau notepad++. Saya menggunakan notepad++ dan tampilannya seperti berikut:
   
   

   

   Membuka file html dengan aplikasi notepad++
   



6. Lalu buka dashboar blog sobat. Kemudian klik POSTINGAN BARU, lalu akan muncul tempat penulisan artikel. Copy (salin) semua kode tabel dinotepad++ kemudian paste-kan pada postingan dibagian HTML, bukan Compose.
   
   

   

   Melekatkan (paste) kode html tabel ke artikel blog
   



7. Bila sudah selesai, silahkan publikasikan artikel dan lihat hasilnya. Sudah bisa kan?? Sekarang bentuk tabel yang tampil di artikel blog sama dengan pengaturan tabel di word.

Saya akui bahwa cara diatas memang terlihat jadul. Saat ini, tabel yang dipasang diblog biasanya sudah responsive dan berwarna.

Cara yang biasa digunakan dan efisien adalah dengan memakai kode css yang ditempatkan di template blog. Kita cukup memanggil kodenya di artikel blog saat kita mau menggunakannya.

Kelebihan bila pakai kode css yaitu tabel bisa digeser ke sebelah kanan bila kemungkinan lebar tabelnya cukup panjang dan tidak muat dalam postingan blog. Ukurannya pun dinamis dengan gaya tampilan yang minimalis. Langsung saja berikut kode css tabel dan cara memasangnya.

Cara Mudah Buat Tabel Responsive di Blog

1. Bukalah dashboar blog sobat. Lalu klik Tema, lalu pilih Edit HTML

2. Kemudian copy kode berikut lalu tempatkan sebelum atau tepat diatas </head>

<style type='text/css'>
/* Table emanmendrofa.blogspot.com*/
.table-container {overflow: auto;}
table {margin: auto;font-family: &quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, &quot;Segoe Ui&quot;;font-size: 12px;}
.eman-table {border-collapse: collapse;font-size: 13px;}
.eman-table th, 
.eman-table td {border-bottom: 1px solid #e1edff;border-left: 1px solid #e1edff;padding: 7px 17px;}
.eman-table th, .eman-table tr, .eman-table td:last-child {border-right: 1px solid #e1edff;border-top: 1px solid #e1edff;}
.eman-table td:first-child {border-top: 1px solid #e1edff;}
.eman-table td:last-child{border-bottom: 1px solid #e1edff;}
caption {caption-side: top;margin-bottom: 10px;}
/* Table Header */
.eman-table thead th {background-color: #508abb;color: #FFFFFF;border-color: #6ea1cc !important;text-transform: uppercase;}
/* Table Body */
.eman-table tbody td {color: #353535;}
.eman-table tbody tr:nth-child(odd) td {background-color: #f4fbff;}
.eman-table tbody tr:hover th,
.eman-table tbody tr:hover td {background-color: #ffffa2;border-color: #ffff0f;transition: all .2s;}
</style>

3. Simpanlah perubahan tema blog

4. Sekarang klik POSTINGAN BARU untuk memulai menulis artikel. Kemudian gunakan kode berikut untuk memanggil kode tabel responsive di atas:

<div class="table-container">
<table class="eman-table responsive" >
		<thead>
			<tr>
				<th scope="col" align="center">No</th>
				<th scope="col" align="center">Nama</th>
				<th scope="col" align="center">Alamat</th>
				<th scope="col" align="center">Keterangan</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td align="center">1.</td>
				<td align="center">Andres Emaran N. Mendrofa</td>
				<td align="center">Desa Lolowua, Kec. Hiliserangkai, Kab. Nias</td>
				<td align="center">-</td>
			</tr>
            <tr>
				<td align="center">2.</td>
				<td align="center">Prislia Andrini Waruwu</td>
				<td align="center">Desa Onozalukhu You, Kec. Moro'o, Kab. Nias Barat</td>
				<td align="center">-</td>
			</tr>
		</tbody>
</table>
</div>

5. Hasilnya seperti berikut:

No	Nama	Alamat	Keterangan
1.	Andres Emaran N. Mendrofa	Desa Lolowua, Kec. Hiliserangkai, Kab. Nias	-
2.	Prislia Andrini Waruwu	Desa Onozalukhu You, Kec. Moro'o, Kab. Nias Barat	-

6. Bila ingin tambah baris salin kode berikut kemudian pastekan di atas </tbody>

<tr>
				<td align="center">x</td>
				<td align="center">x</td>
				<td align="center">x</td>
				<td align="center">x</td>
</tr>

Isi teks/kalimat pada tabel dengan mengetiknya dibagian yang ada huruf x. Jangan lupa klik publikasi bila sudah selesai membuat tabel dan mengetik isi artikel.

Demikianlah cara buat tabel responsive di blog, semoga bermanfaat.