Cara Membuat Tabel Di Dalam Postingan Blog Dengan HTML

Cara membuat tabel di postingan dengan kode html - Halo sob, pada kesempatan kali ini saya akan coba membahas materi HTML yakni mengenai cara membuat tabel. Fungsi tabel di dalam blog / website itu sangat penting untuk menaruh atau mengelompokkan data maupun tulisan untuk mempermudah orang memahami poin pembahasan yang dibahas di sebuah blog.

Untuk membuat tabel di sebuah blog atau website kita perlu menggunakan kode html karena menu untuk membuat tabel secara otomatis tidak disediakan di dalam postingan blog.

Berikut ini cara membuat tabel di dalam artikel...

1. Tabel sederhana

Baiklah dibawah ini merupakan kode html sederhana yang dapat digunakan untuk membuat tabel. Silahkan agan bisa copy kode ini dan mencobanya.

<!-- latihan tabel 1 -->
<table border="1" cellspacing="0" cellpadding="4">
<tr>
<td>Nomor</td>
<td>Blogging</td>
<td>SEO</td>
</tr>
<tr>
<td>1</td>
<td>Menulis</td>
<td>On Page</td>
</tr>
<tr>
<td>2</td>
<td>Publikasi</td>
<td>Off Page</td>
</tr>
</table>

Berikut adalah hasil dari kode diatas.

Penjelasan: Untuk membuat tabel di dalam body kita perlu menggunakan tag <table></table> (seperti biasa pakai tag pembuka dan penutup). Nah diantara tag table tersebut kita sisipkan lagi tag <tr></tr> yang artinya adalah table row yang fungsinya menyusun baris. Kemudian di dalam kode tr terdapat tag <td></td> untuk membuat kolom. Jadi jika sobat ingin menambahkan kolom lagi pada tabel tersebut cukup menambah tag <td></td> saja di setiap <tr> yang ingin ditambahkan.

Setiap kali sobat ingin membuat baris baru pada tabel jangan lupa untuk menulis lagi tag <tr></tr> dan menyisipkan tag <td> kembali.

Penting: untuk menampilkan garis pada tabel tersebut jangan lupa sisipkan tag border di dalam tag table seperti kode yang berwarna biru diatas. nilai 1 pada border menandakan ketebalan garis pada tabel.

2. Tabel Marging

Nah sekarang kita akan menggabungkan dua atau lebih kolom dan baris. Ingat kolom itu yang arahnya horizontal (kita akan pakai "colspan") dan baris itu yang arahnya vertikal (kita akan pakai "rowspan").

Berikut ini kode html untuk menggabungkan dua atau lebih kolom maupun baris. Silahkan sobat copy dan coba kode dibawah ini.

<!-- latihan tabel marging -->

<table border="1" cellspacing="0" cellpadding="4">
<tr>
<td rowspan="3">rowspan 3</td>
<td colspan="2">colspan 2</td>
</tr>
<tr>
<td>kol 1</td>
<td>kol 2</td>
</tr>
<tr>
<td>kol 3</td>
<td>kol 4</td>
</tr>
</table>

Hasil dari kode html diatas adalah sebagai berikut.

Penjelasan: Untuk menggababungkan dua buah kolom maka kita menggunakan kode colspan di dalam tag <td>. Jika agan ingin menggabungkan dua kolom dalam <tr> yang sama maka agan cukup menghapus kode <td> setelahnya dan hanya menyisakan kode <td> diatasnya saja untuk dimasukkan kode colspan seperti kode berwarna merah diatas.

Untuk menggabungkan baris kita menggunakan kode rowspan di dalam tag <td>. Bedanya sama colspan kalau rowspan kita harus menghapus kode <td> di setiap <tr> yang kita ingin gabungkan barisnya, lalu pada <tr> pertama di dalam tag <td> kita masukkan kode rowspan. Seperti pada kode berwarna hijau diatas.

Baca juga: Cara Menulis Artikel SEO Friendly dan Bermanfaat

Oke, cukup sekian dulu pembahasan pada kesempatan kali ini, nantikan pembelajaran lainnya mengenai materi HTML. Sekian dan terima kasih, semoga bermanfaat.

Bagikan Artikel ini