Membuat Tabel di Postingan Blog - Kode html

Khoiru Addien

Juli 23, 2026

0 Komentar

Cara Membuat Tabel di Postingan Blog

Cara Membuat Tabel di Blogspot

Langkah-langkah membuat tabel dipostingan blog adalah sebagai berikut:

Pertama, buka bloggger, kemudian klik atau pilih postingan baru.
Kedua, pilih mode html dengan cara klik icon pensil di bagian pojok kiri, lalu pilih tampilan HTML.
Ketiga, copy paste kode berikut ini;


<table>
  <thead>
    <tr>
      <th>No</th>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
      <th>Table Header 4</th>
      <th>Table Header 5</th>
      <th>Table Header 6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Division 1.1</td>
      <td>Division 2.1</td>
      <td>Division 3.1</td>
      <td>Division 4.1</td>
      <td>Division 5.1</td>
      <td>Division 6.1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Division 1.2</td>
      <td>Division 2.2</td>
      <td>Division 3.2</td>
      <td>Division 4.2</td>
      <td>Division 5.2</td>
      <td>Division 6.2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Division 1.3</td>
      <td>Division 2.3</td>
      <td>Division 3.3</td>
      <td>Division 4.3</td>
      <td>Division 5.3</td>
      <td>Division 6.3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Division 1.4</td>
      <td>Division 2.4</td>
      <td>Division 3.4</td>
      <td>Division 4.4</td>
      <td>Division 5.4</td>
      <td>Division 6.4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Division 1.5</td>
      <td>Division 2.5</td>
      <td>Division 3.5</td>
      <td>Division 4.5</td>
      <td>Division 5.5</td>
      <td>Division 6.5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Division 1.6</td>
      <td>Division 2.6</td>
      <td>Division 3.6</td>
      <td>Division 4.6</td>
      <td>Division 5.6</td>
      <td>Division 6.6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Division 1.7</td>
      <td>Division 2.7</td>
      <td>Division 3.7</td>
      <td>Division 4.7</td>
      <td>Division 5.7</td>
      <td>Division 6.7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Division 1.8</td>
      <td>Division 2.8</td>
      <td>Division 3.8</td>
      <td>Division 4.8</td>
      <td>Division 5.8</td>
      <td>Division 6.8</td>
    </tr>
  </tbody>
</table>

Hasilnya akan seperti ini;

No	Table Header 1	Table Header 2	Table Header 3	Table Header 4	Table Header 5	Table Header 6
1	Division 1.1	Division 2.1	Division 3.1	Division 4.1	Division 5.1	Division 6.1
2	Division 1.2	Division 2.2	Division 3.2	Division 4.2	Division 5.2	Division 6.2
3	Division 1.3	Division 2.3	Division 3.3	Division 4.3	Division 5.3	Division 6.3
4	Division 1.4	Division 2.4	Division 3.4	Division 4.4	Division 5.4	Division 6.4
5	Division 1.5	Division 2.5	Division 3.5	Division 4.5	Division 5.5	Division 6.5
6	Division 1.6	Division 2.6	Division 3.6	Division 4.6	Division 5.6	Division 6.6
7	Division 1.7	Division 2.7	Division 3.7	Division 4.7	Division 5.7	Division 6.7
8	Division 1.8	Division 2.8	Division 3.8	Division 4.8	Division 5.8	Division 6.8

Jika ingin mengurangin jumlah header atau kolom (dari atas ke bawah), maka hapus

Variasi Tabel Yang Bisa Digunakan

Jika Anda ingin membuat tampilan tabel dengan gaya yang berbeda, maka berikut ini cara membuatnya.

Tabel Compact

Membuat setiap baris lebih rapat, seperti;

No	Table Header 1	Table Header 2	Table Header 3	Table Header 4
1	Division 1.1	Division 2.1	Division 3.1	Division 4.1
2	Division 1.2	Division 2.2	Division 3.2	Division 4.2
3	Division 1.3	Division 2.3	Division 3.3	Division 4.3
4	Division 1.4	Division 2.4	Division 3.4	Division 4.4

Gunakan kode berikut untuk membuat tabel compact


<table class="table-compact">
  <thead>
    <tr>
      <th>No</th>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
      <th>Table Header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Division 1.1</td>
      <td>Division 2.1</td>
      <td>Division 3.1</td>
      <td>Division 4.1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Division 1.2</td>
      <td>Division 2.2</td>
      <td>Division 3.2</td>
      <td>Division 4.2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Division 1.3</td>
      <td>Division 2.3</td>
      <td>Division 3.3</td>
      <td>Division 4.3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Division 1.4</td>
      <td>Division 2.4</td>
      <td>Division 3.4</td>
      <td>Division 4.4</td>
    </tr>
  </tbody>
</table>

Tabel Header Berwarna

Gunakan kodede berikut;


<table class="table-header">
  <thead>
    <tr>
      <th>No</th>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
      <th>Table Header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Division 1.1</td>
      <td>Division 2.1</td>
      <td>Division 3.1</td>
      <td>Division 4.1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Division 1.2</td>
      <td>Division 2.2</td>
      <td>Division 3.2</td>
      <td>Division 4.2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Division 1.3</td>
      <td>Division 2.3</td>
      <td>Division 3.3</td>
      <td>Division 4.3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Division 1.4</td>
      <td>Division 2.4</td>
      <td>Division 3.4</td>
      <td>Division 4.4</td>
    </tr>
  </tbody>
</table>

Hasil

No	Table Header 1	Table Header 2	Table Header 3	Table Header 4
1	Division 1.1	Division 2.1	Division 3.1	Division 4.1
2	Division 1.2	Division 2.2	Division 3.2	Division 4.2
3	Division 1.3	Division 2.3	Division 3.3	Division 4.3
4	Division 1.4	Division 2.4	Division 3.4	Division 4.4

Tabel Hover

Mengaktifkan hover pada baris tabel, apabila kursor diletakan pada tabel.

Contoh

No	Table Header 1	Table Header 2	Table Header 3	Table Header 4
1	Division 1.1	Division 2.1	Division 3.1	Division 4.1
2	Division 1.2	Division 2.2	Division 3.2	Division 4.2
3	Division 1.3	Division 2.3	Division 3.3	Division 4.3
4	Division 1.4	Division 2.4	Division 3.4	Division 4.4

Gunakan kode berikut untuk membuat tabel hover


<table class="table-hover">
  <thead>
    <tr>
      <th>No</th>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
      <th>Table Header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Division 1.1</td>
      <td>Division 2.1</td>
      <td>Division 3.1</td>
      <td>Division 4.1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Division 1.2</td>
      <td>Division 2.2</td>
      <td>Division 3.2</td>
      <td>Division 4.2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Division 1.3</td>
      <td>Division 2.3</td>
      <td>Division 3.3</td>
      <td>Division 4.3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Division 1.4</td>
      <td>Division 2.4</td>
      <td>Division 3.4</td>
      <td>Division 4.4</td>
    </tr>
  </tbody>
</table>

Tabel Striped

Tabel yang menahbahkan gaya zebra antar baris

Kode


<table class="table-striped">
  <thead>
    <tr>
      <th>No</th>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
      <th>Table Header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Division 1.1</td>
      <td>Division 2.1</td>
      <td>Division 3.1</td>
      <td>Division 4.1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Division 1.2</td>
      <td>Division 2.2</td>
      <td>Division 3.2</td>
      <td>Division 4.2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Division 1.3</td>
      <td>Division 2.3</td>
      <td>Division 3.3</td>
      <td>Division 4.3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Division 1.4</td>
      <td>Division 2.4</td>
      <td>Division 3.4</td>
      <td>Division 4.4</td>
    </tr>
  </tbody>
</table>

Maka hasilnya akan seperti ini

No	Table Header 1	Table Header 2	Table Header 3	Table Header 4
1	Division 1.1	Division 2.1	Division 3.1	Division 4.1
2	Division 1.2	Division 2.2	Division 3.2	Division 4.2
3	Division 1.3	Division 2.3	Division 3.3	Division 4.3
4	Division 1.4	Division 2.4	Division 3.4	Division 4.4

Tabel Sticky

Ada tiga gaya

Sticky Header
Sticky Kolom Paling Kiri
Sticky Header dan Kolom Paling Kiri

Sticky Header

Yaitu sticky hanya pada heaser atau bari paling atas

Contoh

No	Table Header 1	Table Header 2	Table Header 3	Table Header 4	Table Header 5	Table Header 6
1	Division 1.1	Division 2.1	Division 3.1	Division 4.1	Division 5.1	Division 6.1
2	Division 1.2	Division 2.2	Division 3.2	Division 4.2	Division 5.2	Division 6.2
3	Division 1.3	Division 2.3	Division 3.3	Division 4.3	Division 5.3	Division 6.3
4	Division 1.4	Division 2.4	Division 3.4	Division 4.4	Division 5.4	Division 6.4
5	Division 1.5	Division 2.5	Division 3.5	Division 4.5	Division 5.5	Division 6.5
6	Division 1.6	Division 2.6	Division 3.6	Division 4.6	Division 5.6	Division 6.6
7	Division 1.7	Division 2.7	Division 3.7	Division 4.7	Division 5.7	Division 6.7
8	Division 1.8	Division 2.8	Division 3.8	Division 4.8	Division 5.8	Division 6.8

Untuk membuat tabel sticky header gunakan kode berikut


<table class="table-sticky-t">
  <thead>
    <tr>
      <th>No</th>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
      <th>Table Header 4</th>
      <th>Table Header 5</th>
      <th>Table Header 6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Division 1.1</td>
      <td>Division 2.1</td>
      <td>Division 3.1</td>
      <td>Division 4.1</td>
      <td>Division 5.1</td>
      <td>Division 6.1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Division 1.2</td>
      <td>Division 2.2</td>
      <td>Division 3.2</td>
      <td>Division 4.2</td>
      <td>Division 5.2</td>
      <td>Division 6.2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Division 1.3</td>
      <td>Division 2.3</td>
      <td>Division 3.3</td>
      <td>Division 4.3</td>
      <td>Division 5.3</td>
      <td>Division 6.3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Division 1.4</td>
      <td>Division 2.4</td>
      <td>Division 3.4</td>
      <td>Division 4.4</td>
      <td>Division 5.4</td>
      <td>Division 6.4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Division 1.5</td>
      <td>Division 2.5</td>
      <td>Division 3.5</td>
      <td>Division 4.5</td>
      <td>Division 5.5</td>
      <td>Division 6.5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Division 1.6</td>
      <td>Division 2.6</td>
      <td>Division 3.6</td>
      <td>Division 4.6</td>
      <td>Division 5.6</td>
      <td>Division 6.6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Division 1.7</td>
      <td>Division 2.7</td>
      <td>Division 3.7</td>
      <td>Division 4.7</td>
      <td>Division 5.7</td>
      <td>Division 6.7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Division 1.8</td>
      <td>Division 2.8</td>
      <td>Division 3.8</td>
      <td>Division 4.8</td>
      <td>Division 5.8</td>
      <td>Division 6.8</td>
    </tr>
  </tbody>
</table>

Tabel Sticky Kolom Kiri

Pada kode sticky header, kode paling atas atau nomor satu diganti menjadi


<table class="table-sticky-l">

Hasilnya menjadi

No	Table Header 1	Table Header 2	Table Header 3	Table Header 4	Table Header 5	Table Header 6
1	Division 1.1	Division 2.1	Division 3.1	Division 4.1	Division 5.1	Division 6.1
2	Division 1.2	Division 2.2	Division 3.2	Division 4.2	Division 5.2	Division 6.2
3	Division 1.3	Division 2.3	Division 3.3	Division 4.3	Division 5.3	Division 6.3
4	Division 1.4	Division 2.4	Division 3.4	Division 4.4	Division 5.4	Division 6.4
5	Division 1.5	Division 2.5	Division 3.5	Division 4.5	Division 5.5	Division 6.5
6	Division 1.6	Division 2.6	Division 3.6	Division 4.6	Division 5.6	Division 6.6
7	Division 1.7	Division 2.7	Division 3.7	Division 4.7	Division 5.7	Division 6.7
8	Division 1.8	Division 2.8	Division 3.8	Division 4.8	Division 5.8	Division 6.8

Tabel Sticky Header dan Kolom Kiri

Caranya yaitu dengan mengganti kode html paling atas. ini kodenya;


<table class="table-sticky-t table-sticky-l table-border-y"/>

Maka hasilnya akan seperti;

No	Table Header 1	Table Header 2	Table Header 3	Table Header 4	Table Header 5	Table Header 6
1	Division 1.1	Division 2.1	Division 3.1	Division 4.1	Division 5.1	Division 6.1
2	Division 1.2	Division 2.2	Division 3.2	Division 4.2	Division 5.2	Division 6.2
3	Division 1.3	Division 2.3	Division 3.3	Division 4.3	Division 5.3	Division 6.3
4	Division 1.4	Division 2.4	Division 3.4	Division 4.4	Division 5.4	Division 6.4
5	Division 1.5	Division 2.5	Division 3.5	Division 4.5	Division 5.5	Division 6.5
6	Division 1.6	Division 2.6	Division 3.6	Division 4.6	Division 5.6	Division 6.6
7	Division 1.7	Division 2.7	Division 3.7	Division 4.7	Division 5.7	Division 6.7
8	Division 1.8	Division 2.8	Division 3.8	Division 4.8	Division 5.8	Division 6.8

Tabel Border Full

Baik baris maupun kolom ada garis nya.

Contoh

No	Table Header 1	Table Header 2	Table Header 3	Table Header 4	Table Header 5	Table Header 6
1	Division 1.1	Division 2.1	Division 3.1	Division 4.1	Division 5.1	Division 6.1
2	Division 1.2	Division 2.2	Division 3.2	Division 4.2	Division 5.2	Division 6.2
3	Division 1.3	Division 2.3	Division 3.3	Division 4.3	Division 5.3	Division 6.3
4	Division 1.4	Division 2.4	Division 3.4	Division 4.4	Division 5.4	Division 6.4
5	Division 1.5	Division 2.5	Division 3.5	Division 4.5	Division 5.5	Division 6.5
6	Division 1.6	Division 2.6	Division 3.6	Division 4.6	Division 5.6	Division 6.6
7	Division 1.7	Division 2.7	Division 3.7	Division 4.7	Division 5.7	Division 6.7
8	Division 1.8	Division 2.8	Division 3.8	Division 4.8	Division 5.8	Division 6.8

Untuk membuat tabel ful border menggunakan kode;


<table class="table-border-y">
  <thead>
    <tr>
      <th>No</th>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
      <th>Table Header 4</th>
      <th>Table Header 5</th>
      <th>Table Header 6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Division 1.1</td>
      <td>Division 2.1</td>
      <td>Division 3.1</td>
      <td>Division 4.1</td>
      <td>Division 5.1</td>
      <td>Division 6.1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Division 1.2</td>
      <td>Division 2.2</td>
      <td>Division 3.2</td>
      <td>Division 4.2</td>
      <td>Division 5.2</td>
      <td>Division 6.2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Division 1.3</td>
      <td>Division 2.3</td>
      <td>Division 3.3</td>
      <td>Division 4.3</td>
      <td>Division 5.3</td>
      <td>Division 6.3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Division 1.4</td>
      <td>Division 2.4</td>
      <td>Division 3.4</td>
      <td>Division 4.4</td>
      <td>Division 5.4</td>
      <td>Division 6.4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Division 1.5</td>
      <td>Division 2.5</td>
      <td>Division 3.5</td>
      <td>Division 4.5</td>
      <td>Division 5.5</td>
      <td>Division 6.5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Division 1.6</td>
      <td>Division 2.6</td>
      <td>Division 3.6</td>
      <td>Division 4.6</td>
      <td>Division 5.6</td>
      <td>Division 6.6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Division 1.7</td>
      <td>Division 2.7</td>
      <td>Division 3.7</td>
      <td>Division 4.7</td>
      <td>Division 5.7</td>
      <td>Division 6.7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Division 1.8</td>
      <td>Division 2.8</td>
      <td>Division 3.8</td>
      <td>Division 4.8</td>
      <td>Division 5.8</td>
      <td>Division 6.8</td>
    </tr>
  </tbody>
</table>

Tabel Mix

Menambahkan bebrapa gaya sekaligus pada tabel

Contoh

No	Table Header 1	Table Header 2	Table Header 3	Table Header 4	Table Header 5	Table Header 6
1	Division 1.1	Division 2.1	Division 3.1	Division 4.1	Division 5.1	Division 6.1
2	Division 1.2	Division 2.2	Division 3.2	Division 4.2	Division 5.2	Division 6.2
3	Division 1.3	Division 2.3	Division 3.3	Division 4.3	Division 5.3	Division 6.3
4	Division 1.4	Division 2.4	Division 3.4	Division 4.4	Division 5.4	Division 6.4
5	Division 1.5	Division 2.5	Division 3.5	Division 4.5	Division 5.5	Division 6.5
6	Division 1.6	Division 2.6	Division 3.6	Division 4.6	Division 5.6	Division 6.6
7	Division 1.7	Division 2.7	Division 3.7	Division 4.7	Division 5.7	Division 6.7
8	Division 1.8	Division 2.8	Division 3.8	Division 4.8	Division 5.8	Division 6.8

Selamat mencoba

Postingan Lama

Berbagi

Facebook WhatsApp Twitter Telegram Line Tumblr LinkedIn Pinterest

Penulis blog

Khoiru Addien

Asal Ngeblog

Membuat Tabel di Postingan Blog - Kode html

Cara Membuat Tabel di Blogspot

Variasi Tabel Yang Bisa Digunakan

Tabel Compact

Tabel Header Berwarna

Tabel Hover

Tabel Striped

Tabel Sticky

Sticky Header

Tabel Sticky Kolom Kiri

Tabel Sticky Header dan Kolom Kiri

Tabel Border Full

Tabel Mix

Berbagi

Penulis blog

Anda mungkin menyukai postingan ini

#{title}

Tidak ada komentar

Featured Post

Membuat Tabel di Postingan Blog - Kode html

Label

Popular Posts

Typography Theme62 - Dokumentasi Petunjuk Penggunaan

Icon Bagus

Simplify Your Kitchen With Smart Home Gadgets

Lorem Ipsum Is Simply Dummy Text

Membuat Tabel di Postingan Blog - Kode html