Cara Membuat Tabel HTML Di Blogger (Panduan Dasar) - BBT: Panduan blogger untuk pemula - tutorial jilbab / hijab, download aplikasi, software, kecantikan, kesehatan, silabus, rpp, KTSP, CPNS, mp3, video

Cara Membuat Tabel HTML Di Blogger (Panduan Dasar)

Bagaimana cara membuat tabel html di blogger, dan apakah saya bisa membuat tabel 2 kolom, tabel 3 kolom atau lebih di blogger ?

Oke sobat, pada kesempatan kali ini saya akan menuliskan tutorial dasar cara membuat tabel html di blogger, walaupun sebenarnya cara membuat tabel html ini tidak hanya bisa digunakan di blogger saja, namun bisa juga digunakan untuk membuat tabel html di wesbite atau blog lain selain blogger.

Tutorial Cara Membuat Tabel HTML Di Blogger

Pada tutorial ini saya akan menuliskan tutorial dasar cara membuat tabel html di blogger, yaitu cara membuat tabel 2 kolom di blogger, dan tabel 3 kolom, yang mana nantinya bisa sobat kembangkan sesuai keinginan masing - masing.

Oh ia, sebelumnya saya ingin menegaskan bahwa mungkin tampilan dari tabel yang saya contoh kan di sini akan berbeda dengan tampilan tabel pada blog / website sobat, karena ini dipengaruhi oleh template blog yang digunakan.

Dasar Kode Tabel HTML Tabel Untuk Blog / Website

Untuk membuat tabel html di blogger, maka kita harus mengetahui dasar kode html tabel yang bisa digunakan, dan kode dasar tabel html tersebut adalah sebagai berikut :
  1. <table> yang fungsinya untuk membungkus seluruh kode html tabel
  2. <tr> fungsinya untuk membuat baris/kolom tabel ke bawah
  3. <td> fungsinya untuk membuat kolom tabel ke samping
Nah, itulah 3 kode html tabel yang digunakan untuk membuat tabel, walau sebenarnya masih ada kode lainnya yang bisa kita gunakan, namun di sini saya sengaja menggunakan 3 kode tabel html saja, agar lebih mudah, walau cuma 3 kode saja, namun dengan kode inilah kita bisa membuat berapa kolom saja yang kita inginkan.

Agar lebih mudah dimengerti, maka tutorial cara membuat tabel html di blogger ini akan saya sertakan dengan contoh, dan sebaiknya langsung di praktik kan agar lebih mudah memahami bagaimana cara membuat tabel html.

Cara Membuat Tabel HTML Di Posting Blogger (1 kolo, 2 kolom, & 3 kolom)

Untuk membuat tabel html di posting blogger, maka langkah - langkah yang harus dilakukan adalah : Masuk ke dasbor blogger, kemudian silakan buat entri / posting baru.

Pada bagian halaman pembuatan posting blogger sobat harus mengganti mode penulisan menjadi mode HTML bukan mode Compose, karena jika tidak maka kode html yang kita tulisa tidak akan jalan, (lihat hambar berikut)
Cara Membuat Tabel HTML Di Blogger - Tutorial Dasar
Oke mari kita lanjut, saya akan memulai tutorial cara membuat tabel html di blogger ini dengan cara membuat tabel 1 kolom dahulu, kode html tabel berikut adalah kode untuk membuat tabel 1 kolom ke samping dan 1 baris ke bawah

<table>
  <tr>
    <td>Tulis isi untuk tabel di sini</td>
  </tr>
</table>
Hasil tabel html di atas seperti ini
Tulis isi untuk tabel di sini
Kode tabel html berikut adalah untuk membuat tabel 1 kolom ke samping dan 2 baris ke bawah
<table>
  <tr>
    <td>Tulis isi untuk baris 1</td>
  </tr>
  <tr>
    <td>Tulis isi untuk baris 2</td>
  </tr>
</table>
Hasil tabel html di atas seperti ini
Tulis isi untuk baris 1
Tulis isi untuk baris 2
Kode tabel html berikut untuk membuat tabel 1 kolom ke samping dan 3 baris ke bawah
<table>
  <tr>
    <td>Tulis isi untuk baris 1</td>
  </tr>
  <tr>
    <td>Tulis isi untuk baris 2</td>
  </tr>
  <tr>
    <td>Tulis isi untuk baris 3</td>
  </tr>
</table>
Hasil tabel html di atas seperti ini
Tulis isi untuk baris 1
Tulis isi untuk baris 2
Tulis isi untuk baris 3
Saya rasa cukup untuk kode tabel html 1 kolom, untuk menambahkan 1 baris lagi ke bawah lagi maka cukup tambahkan kode berikut ini sebelum kode </table>
<tr>
  <td>Isi tabel di sini</td>
</tr>
Selanjutnya mari kita belajar membuat tabel 2 kolom (ke samping) dengan 1 baris (ke bawah), berikut kode nya
<table>
  <tr>
    <td>Isi untuk kolom 1</td>
    <td>Isi untuk kolom 2</td>
  </tr>
</table>
Hasil tabel html di atas seperti ini
Isi untuk kolom 1 Isi untuk kolom 2
Kode tabel html berikut adalah untuk membuat tabel 2 kolom (ke samping) dengan 2 baris (ke bawah)
<table>
  <tr>
    <td>Isi untuk kolom 1 (baris 1)</td>
    <td>Isi untuk kolom 2 (baris 1)</td>
  </tr>
  <tr>
    <td>Isi untuk kolom 1 (baris 2)</td>
    <td>Isi untuk kolom 2 (baris 2)</td>
  </tr>
</table>
Hasil tabel html di atas seperti ini
Isi untuk kolom 1 (baris 1) Isi untuk kolom 2 (baris 1)
Isi untuk kolom 1 (baris 2) Isi untuk kolom 2 (baris 2)
Kode tabel html ini untuk membuat tabel 2 kolom (ke samping) dengan 3 baris (ke bawah)
<table>
  <tr>
    <td>Isi untuk kolom 1 (baris 1)</td>
    <td>Isi untuk kolom 2 (baris 1)</td>
  </tr>
  <tr>
    <td>Isi untuk kolom 1 (baris 2)</td>
    <td>Isi untuk kolom 2 (baris 2)</td>
  </tr>
    <tr>
    <td>Isi untuk kolom 1 (baris 3)</td>
    <td>Isi untuk kolom 2 (baris 3)</td>
  </tr>
</table>
Hasil tabel html di atas seperti ini
Isi untuk kolom 1 (baris 1) Isi untuk kolom 2 (baris 1)
Isi untuk kolom 1 (baris 2) Isi untuk kolom 2 (baris 2)
Isi untuk kolom 1 (baris 3) Isi untuk kolom 2 (baris 3)
Oke, Saya rasa cukup untuk cara membuat tabel html dengan 2 kolom, dan jika sobat ingin menambahkan 1 baris lagi kebawah lagi maka cukup tambahkan kode berikut ini sebelum kode </table>
<tr>
<td>Isi untuk kolom 1 (baris selanjutnya)</td>
<td>Isi untuk kolom 2 (baris selanjutnya)</td>
</tr>
Lanjut ke cara membuat tabel html di blog dengan isi 3 kolom, berikut adalah kode html tabel 3 kolom dan 1 baris
<table>
  <tr>
    <td>Kolom 1</td>
    <td>Kolom 2</td>
    <td>Kolom 3</td>
  </tr>
</table>
Hasil tabel html di atas seperti ini
Kolom 1 Kolom 2 Kolom 3
Jika ingin menambahkan 1 baris lagi ke bawah pada tabel 3 kolom tersebut maka cukup menambahkan kode berikut sebelum kode </table>
<tr>
  <td>Kolom 1</td>
  <td>Kolom 2</td>
  <td>Kolom 3</td>
</tr>
Contohnya kita menambahkan 1 baris ke bawah, maka hasil kode tabel html akan menjadi seperti ini (yang saya tandai adalah kode tambahan).
<table>
  <tr>
    <td>Kolom 1</td>
    <td>Kolom 2</td>
    <td>Kolom 3</td>
  </tr>
    <tr>
    <td>Kolom 1 Baris 2</td>
    <td>Kolom 1 Baris 2</td>
    <td>Kolom 1 Baris 2</td>
  </tr>
</table>
Sehingga tabel tersebut menjadi 2 kolom serta 2 baris, dan jika sobat ingin menambahkan 2 baris kebawah lagi (dari 1 baris menjadi 3 baris ke bawah), maka cukup tambahkan 2 kali kode tersebut (kode ini maksud saya)
<tr>
  <td>Kolom 1</td>
  <td>Kolom 2</td>
  <td>Kolom 3</td>
</tr>
Maka hasil kode tabel html tersebut menjadi (yang saya tandai adalah kode tambahan).
<table>
  <tr>
    <td>Kolom 1</td>
    <td>Kolom 2</td>
    <td>Kolom 3</td>
  </tr>
    <tr>
    <td>Kolom 1 Baris 2</td>
    <td>Kolom 2 Baris 2</td>
    <td>Kolom 3 Baris 2</td>
  </tr>
    <tr>
    <td>Kolom 1 Baris 3</td>
    <td>Kolom 2 Baris 3</td>
    <td>Kolom 3 Baris 3</td>
  </tr>
</table>
Dan hasilnya seperti ini
Kolom 1 Kolom 2 Kolom 3
Kolom 1 Baris 2 Kolom 2 Baris 2 Kolom 3 Baris 2
Kolom 1 Baris 3 Kolom 2 Baris 3 Kolom 3 Baris 3
Nah itulah tutorial cara membuat tabel html di blogger beserta dengan contoh tabel, dan ini hanyalah dasar cara membuat tabel html saja, sobat bisa mengembangkan kode tersebut sesuai keinginan masing - masing.
loading...
Lihat / Tinggalkan Komentar
- All Rights Reserved. Powered by Blogger. Membuat Blog

Terimakasih telah membaca , semoga artikel tentang Cara Membuat Tabel HTML Di Blogger (Panduan Dasar) yang ada di blog ini bermanfaat buat sobat