Membuat Tabel Pada Postingan Blog

Membuat sebuah tabel pada postingan sebenarnya tidak ada option di tools pembuatan postingan namun ada trik dengan cara langsung mengarah ke bagian Tab HTML kemudian masukan beberapa kode yang telah dibuat sebelumnya nanti anda hanya tinggal memasukan kode tersebut dibagian mana yang anda mau.

Lalu cara membuatnya menurut saya cukup lumayan mudah-mudah sulit juga sih karena jika harus secara signifikan ingin seperti sama persis itu susah. Misalnya saja saya membuat sebuah tabel didalam aplikasi Microsoft Excel (Pengola Data) lalu sesudah didesain sedimikian rupa lalu anda ingin sebuah tabel tersebut dipindahkan ke dalam sebuah artikel postingan blog anda tapi anda ingin persis mirip seperti itu dan saya telah coba hasilnya nihil alias tidak bisa sama persis.

Entah saya belum mengetahui caranya atau bagaimana, yang jelas yang saya tahu saya belum bisa membuat sebuah tabel untuk sebuah artikel postingan mirip secara keseluruhan. Jika ada yang tahu silahkan sharing juga pengalamannya disini.

Membuat sebuah tabel pada postingan blog saya akan memberikan cara mudahnya dengan hasil yang lumayan baik dan menarik.

Dibawah ini adalah sebagai contoh saja (model responsive).

Jadwal Kegiatan
Nama Kegiatan	Jam	Keterangan
Bangun Tidur	04:00 Wib	Membersihkan tempat tidur
Shalat Shubuh	04:30 Wib	Pergi Ke Mesjid Terdekat
Ngaji	05:00 Wib	Bersama Ustad Sekitar

Kodenya :

<table cellpadding="0" cellspacing="0" style="text-align: left;">
    <tbody>
<tr>
            <th colspan="3"><div style="text-align: center;"><span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;">Jadwal Kegiatan&nbsp;</span></div>
</th>
<tr>
            <th><div style="text-align: center;">
<span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;">Nama Kegiatan&nbsp;</span></div>
</th>
            <th><div style="text-align: center;">
<span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;">Jam</span></div>
</th>
            <th><div style="text-align: center;">
<span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;">Keterangan</span></div>
</th>
        </tr>
<tr>
            <td><div style="text-align: left;">
<span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;">Bangun Tidur</span></div>
</td>
            <td><div style="text-align: left;">
<span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;">04:00 Wib</span></div>
</td>
            <td><div style="text-align: left;">
<span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;">Membersihkan tempat tidur</span></div>
</td>
        </tr>
<tr>
            <td><div style="text-align: left;">
<span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;">Shalat Shubuh</span></div>
</td>
            <td><div style="text-align: left;">
<span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;">04:30 Wib</span></div>
</td>
            <td><div style="text-align: left;">
<span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;">Pergi Ke Mesjid Terdekat</span></div>
</td>
        </tr>
<tr>
            <td><div style="text-align: left;">
<span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;">Ngaji</span></div>
</td>
            <td><div style="text-align: left;">
<span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;">05:00 Wib</span></div>
</td>
            <td><div style="text-align: left;">
<span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;">Bersama Ustad Sekitar</span></div>
</td>
        </tr>
</tbody>
</table>

Sesudah itu mari kita pelajari beberapa bagian yang mungkin cukup untuk diingat oleh anda. Cara ini saya dapatkan dari artikelnya Mas Yanuar Aldi.

Membuat 2 kolom

Contoh Kolom 1 A

Contoh Kolom 1 B

Kodenya :

<table>
<tr>
<td>Contoh Kolom 1 A</td>
<td>Contoh Kolom 1 B</td>
</tr>
</table>

Membuat 2 Kolom & 2 Baris

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

Kodenya :

<table>
<tr>
<td>Contoh Kolom 1 A </td>
<td>Contoh Kolom 1 B </td>
</tr>
<tr>
<td>Contoh Kolom 2 A </td>
<td>Contoh Kolom 2 B </td>
</tr>
</table>

Pada bagian ini sebenarnya anda hanya memasukan kode seperti ini saja

<tr>
<td>Contoh Kolom 2 A </td>
<td>Contoh Kolom 2 B </td>
</tr>

Simpan kode diatas sebelum tanda </table>

Membuat 3 Kolom

Contoh Kolom 1A	Contoh Kolom 1B	Contoh Kolom 1C
Contoh Kolom 2A	Contoh Kolom 2B	Contoh Kolom 2C

Kodenya :

<table>
<tr>
<td>Contoh Kolom 1A</td>
<td>Contoh Kolom 1B</td>
<td>Contoh Kolom 1C</td>
</tr>
</table>

Nah pada bagian ini anda hanya menambahkan <td>Contoh Kolom 1C</td> saja pada bagian kode <tr> diatas.

Nah untuk menambahkan kolom dan baris berikutnya anda hanya tinggal menambahkan kode diatas saja pada bagian tertentu yang saya tadi jelaskan diatas ya. Selanjutnya menggabungkan 2 kolom menjadi 1 atau yang sering kita sebut dengan merge cells.

Menggabungkan 2 Kolom atau Baris pada Tabel
Untuk menambahkan mode merge cells anda hanya menggunakan pemanggil kode colspan dan rowspawn. Contohnya :

mergecell1		merge1
merge2a	mergecell2	merge2b
merge3a		merge3b

Kodenya :

<table>
  <tr>
    <td colspan="2">mergecell1</td>
    <td>merge1</td>
  </tr>
  <tr>
    <td>merge2a</td>
    <td rowspan="2">mergecell2</td>
    <td>merge2b</td>
  </tr>
  <tr>
    <td>merge3a</td>
    <td>merge3b</td>
  </tr>
</table>

Nah cukup mudah bukan cara membuatnya? Sebenarnya disini anda hanya menjaga bagian-bagian pada tempat tertentu saja. Selamat mencoba dan berkreasi ya :)

Terima kasih anda telah membaca artikel Membuat Tabel Pada Postingan Blog. Jika anda kurang paham silahkan berkomentar dibawah & Ada baiknya jika artikel ini bermanfaat Share ke saudara atau teman anda.

Related Posts: