Cara Membuat Tabel Table Di Postingan Blogger

Kali ini ZTN CODING akan memberikan tutorial Cara Membuat Tabel Table Di Postingan Blogger. Apa itu Tabel? table adalah beberapa barisan kotak tersusun rapih, kita tau bahwa salah satu keterbatasan dari blogger bagi para editornya adalah kurangnya pasilitas seperti toolbar untuk membuat tabel tapi jangan berkecil hati. sobat hanya perlu cara manual dan membuatnyapun tidak begitu sulit, nah oke langsung sajah dilihat dan dipraktekan tutorialnya dibawah ini

1. pertama buat postingan ganti mode Tampilan Tulisan ke mode Tampilan HTML itu untuk blogger versi terbaru, Untuk versi yang lama ganti mode Compose ke mode HTML pastekan kode dibawah

<table border="1" cellpadding="0" cellspacing="0" style="height: 83px;">
    <tbody>
        <tr>
            <td>baris 1, kolom 1</td>
            <td>baris 1, kolom 2</td>
        </tr>
        <tr>
            <td>baris 2, kolom 1</td>
            <td>baris 2, kolom 2</td>
        </tr>
    </tbody>
</table>

Hasilnya:

baris 1	kolom 2
baris 2	kolom 2

2. Tabel ditambahkan lebar, letak tulisan ditengah dan ukuran font

<table border="1" cellpadding="0" cellspacing="0" width="539" style="height: 83px;">
    <tbody>
        <tr>
            <td><p align="center"><b>Baris 1</b></p></td>
            <td><p align="center"><b>Kolom 2</b></p></td>
        </tr>
        <tr>
            <td><p align="center"><b>Baris 2</b></p></td>
            <td><p align="center"><b>Kolom 2</b></p></td>
        </tr>
    </tbody>
</table>

Hasilnya:

Baris 1	Kolom 2
Baris 2	Kolom 2

3. tabel baris Vertikal lis kebawah

<table border="1" cellpadding="0" cellspacing="0" width="200" height="0">
<tbody>
        <tr>
          <td bgcolor="#D5D5D5"> <p align="center"><b>Nama 1</b></p></td>
          <td bgcolor="#D5D5D5"> <p align="center"><b>Nama 2</b></p></td>
        </tr>
        <tr>
            <td>Nama 1</td>
            <td>Nama 2</td>
        </tr>
        <tr>
            <td>Nama 1</td>
            <td>Nama 2</td>
        </tr>
    </tbody>
</table>

Hasilnya:

Nama 1	Nama 2
Nama 1	Nama 2
Nama 1	Nama 2

Warnanya bisa diganti kode yang berwarna hijau

4. Berawarna

<table border="1" cellpadding="0" cellspacing="0" width="200" height="0">
<tbody>
        <tr>
          <td bgcolor="#D5D5D5"> <p align="center"><b>Nama 1</b></p></td>
          <td bgcolor="#D5D5D5"> <p align="center"><b>Nama 2</b></p></td>
         </tr>
        <tr>
       <tr>
          <td bgcolor="#D5D5D5"> <p align="center"><b>Nama 3</b></p></td>
          <td bgcolor="#D5D5D5"> <p align="center"><b>Nama 4</b></p></td>
        </tr>
       <tr>
      <tr>
          <td bgcolor="#D5D5D5"> <p align="center"><b>Nama 5</b></p></td>
          <td bgcolor="#D5D5D5"> <p align="center"><b>Nama 6</b></p></td>
       </tr>
  </tbody>
</table>

hasilnya:

Nama 1	Nama 2
Nama 3	Nama 4
Nama 5	Nama 6

Warnanya bisa diganti kode yang berwarna hijau. apapun yang berwarna hijau bisa diganti disesuaikan dengan kebutuhan sobat

---

Jika template sobat mendukung, bisa juga menggunakan kode tabel yang seperti ini sederhana tapi tidak norak. tapi maaf template yang saya gunakan ini tidak bisa menampilkan tabel yang seperti ini jadi untuk review nya saya tidak bisa menampilkannya. silahkan dicoba sendiri

1. Sederhana

<table>
    <tbody>
        <tr>
            <td>baris 1, kolom 1</td>
            <td>baris 1, kolom 2</td>
        </tr>
        <tr>
            <td>baris 2, kolom 1</td>
            <td>baris 2, kolom 2</td>
        </tr>
    </tbody>
</table>

2. Tabel tag TH

<table>
    <tbody>
        <tr>
            <th>Nama 1</th>
            <th>Nama 2</th>
        </tr>
        <tr>
            <td>Baris 1</td>
            <td>kolom 2</td>
        </tr>
        <tr>
            <td>Baris 3</td>
            <td>Kolom 4</td>
        </tr>
    </tbody>
</table>

3. Tabel penggunaan rowspan

<table>
    <tbody>
        <tr>
            <td rowspan='2'>Baris 1-2, kolom 1</td>
            <td>Baris 1, kolom 2</td>
        </tr>
        <tr>
            <td>Baris 2, kolom 2</td>
        </tr>
        <tr>
            <td>Baris 3, kolom 1</td>
            <td>Baris 3, kolom 2</td>
        </tr>
    </tbody>
</table>

4. Tabel colspan

<table>
    <tbody>
        <tr>
            <th>Baris 1, kolom 1</th>
            <th colspan='2'>Baris 1, kolom 2-3</th>
        </tr>
        <tr>
            <td>Baris 2, kolom 1</td>
            <td>Baris 2, kolom 2</td>
            <td>Baris 2, kolom 3</td>
        </tr>
        <tr>
            <td>Baris 3, kolom 1</td>
            <td>Baris 3, kolom 2</td>
            <td>Baris 2, kolom 3</td>
        </tr>
    </tbody>
</table>

silahkan dicoba

jika Sobat Berkenan Silahkan Share Artikel ini ke media sosial milik sobat atau tinggalkan komentar dibawah ☺