Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

Cara Membuat dan Memasang Tabel Di Blog Dengan Script HTML Dengan Mudah


omiska.com - Seorang Blogger biasanya akan membagikan berbagai informasi sesuai dengan Niche nya. Untuk membuat artikel yang menarik, tentu penulis harus memberikan informasi yang lengkap termasuk dengan adanya data. 

Data yang disampaikan dapat berupa apa saja, baik berupa gambar, statistik, bagan, dan tabel. Sesuai dengan judul artikel ini, saya akan memberikan tutorial bagaimana cara membuat tabel di blog dengan mudah dengan Script HTML. 

Cara membuat tabel yang akan disampaikan ini dapat diterapkan di diterapkan di template blog VioMagz, EvoMagz, LinkMagz dan lain sebgainya. Berikut adalah cara membuat tabel di blog dengan mudah. 

  • Masuk ke Dashboard Blogger
  • Kemudian buka postingan yang ingin dimasukkan tabel
  • Lalu tentukan paragraf untuk menempatkan tabel 
  • Ubah mode Compose View ke mode HTML View (klik pada menu bar paling kiri)
  • Lalu Copy dan Paste Script tabel HTML dibawah ini pada paragraf yang ditentukan
<table border="1">
  <tbody>
    <tr>
      <th>HEADING 1</th>
      <th>HEADING 2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
    <tr>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
  </tbody>
</table>

  • Setelah itu kembali ubah ke mode Compose View untuk mengedit isi data yang ditentukan
  • Kemudian Save atau Publish jika ingin langsung menerbitkan artikel

Previewnya akan seperti dibawah ini :

HEADING 1 HEADING 2
Data 1 Data 2
Data 3 Data 4


Keterangan : 

<table border="1"> adalah tebal garis tabel, Anda dapat mengubahnya menjadi 2 dan seterusnya

<th>HEADING 1</th> adalah Heading tabel kolom pertama
<th>HEADING 2</th> adalah Heading tabel kolom kedua

<td>Data 1</td> adalah data tabel untuk baris pertama di kolom pertama
<td>Data 2</td> adalah data tabel untuk baris kedua di kolom kedua

<td>Data 3</td> adalah data tabel untuk baris ketiga di kolom pertama
<td>Data 4</td> adalah data tabel untuk baris kedua di kolom kedua

</tr> dan <tr> adalah kode spasi antara baris pertama ke baris kedua hingga seterusnya




Contoh Tabel 2 Baris dan 4 Kolom

<table border="1">
  <tbody>
    <tr>
      <th>HEADING 1</th>
      <th>HEADING 2</th>
      <th>HEADING 3</th>
      <th>HEADING 4</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
    <tr>
      <td>Data 5</td>
      <td>Data 6</td>
      <td>Data 7</td>
      <td>Data 8</td>
    </tr>
  </tbody>
</table>

Previewnya akan seperti dibawah ini :

 
HEADING 1 HEADING 2 HEADING 3 HEADING 4
Data 1 Data 2 Data 3 Data 4
Data 5 Data 6 Data 7 Data 8




Contoh Tabel 4 Baris dan 4 Kolom

<table border="1">
  <tbody>
    <tr>
      <th>HEADING 1</th>
      <th>HEADING 2</th>
      <th>HEADING 3</th>
      <th>HEADING 4</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
    <tr>
      <td>Data 5</td>
      <td>Data 6</td>
      <td>Data 7</td>
      <td>Data 8</td>
    </tr>
    <tr>
      <td>Data 9</td>
      <td>Data 10</td>
      <td>Data 11</td>
      <td>Data 12</td>
    </tr>
    <tr>
      <td>Data 13</td>
      <td>Data 14</td>
      <td>Data 15</td>
      <td>Data 16</td>
    </tr>
  </tbody>
</table>


Previewnya akan seperti dibawah ini : 

HEADING 1 HEADING 2 HEADING 3 HEADING 4
Data 1 Data 2 Data 3 Data 4
Data 5 Data 6 Data 7 Data 8
Data 9 Data 10 Data 11 Data 12
Data 13 Data 14 Data 15 Data 16



*Catatan : 

  • Gunakan Notepad atau sejenisnya untuk memudahkan Anda mengedit tabel
  • Anda dapat membuat jumlah garis dan kolom sesuai kebutuhan tanpa batasan



Akhir kata, itulah cara membuat tabel di blog dengan mudah menggunakan script bahasa HTML. Semoga apa yang saya sampaikan di artikel ini dapat mudah Anda pahami dan dapat diterapkan di artikel Anda. Semoga informasi ini bermanfaat ya!

close