Kumpulan Tabel 3 Kolom Dengan Desain Responsive

Markup tabel sangat penting untuk halaman web ketika ingin membuat konten yang berisi data atau suatu daftar khusus, maka dari itu disini saya akan berbagi tabel dengan desain 3 kolom serta jumlah baris yang dapat disesuaikan dengan mudah dan tentunya tabel 3 kolom ini responsive di berbagai ukuran layar.

Selain responsive, tabel 3 kolom ini juga memiliki kelebihan lain yakni; markup tabel yang telah dioptimalkan untuk mesin pencari yang memungkinkan tabel data dapat ditampilkan/muncul di halaman penelusuran Google.

Tidak hanya itu, tabel 3 kolom yang akan saya bagikan ini memiliki variasi yang berbeda-beda pada bagian lebar kolom yang disesuaikan untuk beberapa kebutuhan, adapun soal warna nanti bisa disesuaikan dengan desain website/blog anda.

Kamu dapat menginstal salah satu tabel 3 kolom ini atau menginstal 3 versi tabel sekaligus dengan satu set css responsive yang ukurannya sangat kecil sehingga tidak mempengaruhi performa website/blog anda.

1. Tabel 3 Kolom Dengan Lebar Kolom Sama Rata

Markup Table (kode html tabel) yang terdiri dari tiga kolom (column) dan 5 baris (row), lengkap dengan contoh data/informasi dalam tabel.

<table class="cordial-table">
  <thead>
    <tr><th>Template</th><th>Author</th><th>Harga</th></tr>
  </thead>
 <tbody>
   <tr><td>Nama Template</td><td>Nama Author</td><td>0,00IDR</td></tr>
   <tr><td>Nama Template</td><td>Nama Author</td><td>0,00IDR</td></tr>
   <tr><td>Nama Template</td><td>Nama Author</td><td>0,00IDR</td></tr>
   <tr><td>Nama Template</td><td>Nama Author</td><td>0,00IDR</td></tr>
   <tr><td>Nama Template</td><td>Nama Author</td><td>0,00IDR</td></tr>
// spasi ini untuk menambahkan lebih banyak baris (table row) pada tabel //
 </tbody>
</table>

Jika diperlukan tambahkan lebih banyak baris pada tabel body sesuai petunjuk pada markup di atas, gunakan markup berikut ini untuk menambahkan baris (table row) pada tabel sebanyak yang kamu butuhkan.

Markup Baris tambahan untuk tabel 3 kolom

<tr><td>Kolom 1</td><td>Kolom 2</td><td>Kolom 3</td></tr>

CSS Responsive tabel 3 kolom dengan lebar tabel 100% dan masing-masing lebar kolom sama yakni 33.3% dari lebar tabel. [ads id="ads1"]

.cordial-table {
   border-collapse:collapse;
   max-width:100%;
   width:100%;
   margin:10px 0;
}
.cordial-table td,.cordial-table th {
   text-align:left;
   width:33.3%;
   max-width:0;
   overflow:hidden;
   overflow-wrap:break-word;
}
.cordial-table thead th {
   background-color:#efefef;
}
.cordial-table tbody td,.cordial-table thead th{border:1px solid #e5e5e5;}
.cordial-table th{padding:15px;font-weight:600}
.cordial-table td{padding:12px 15px}

Dengan settingan css tersebut lebar table dan lebar kolom dapat menyesuaikan (tetap penuh) pada layar yang lebih lebar dan menciut (menyesuaikan) ketika diakses melalui layar yang lebih kecil.

Jika ingin menyesuaikan warna pada header tabel ganti kode #efefef pada css background-color dengan catatan warna background harus kontras dengan warna font pada header tabel.

2. Tabel 3 Kolom Dengan Nomor Baris

Markup Table dengan nomor baris

<table class="cordial-table">
  <thead>
    <tr><th>No.</th><th>Kolom Header</th><th>Kolom Header</th><th>Kolom Header</th></tr>
  </thead>
 <tbody>
   <tr><td>1</td><td>Tabel data</td><td>Tabel data</td><td>Tabel data</td></tr>
   <tr><td>2</td><td>Tabel data</td><td>Tabel data</td><td>Tabel data</td></tr>
   <tr><td>3</td><td>Tabel data</td><td>Tabel data</td><td>Tabel data</td></tr>
   <tr><td>4</td><td>Tabel data</td><td>Tabel data</td><td>Tabel data</td></tr>
   <tr><td>5</td><td>Tabel data</td><td>Tabel data</td><td>Tabel data</td></tr>
// spasi ini untuk menambahkan lebih banyak baris (table row) pada tabel //
 </tbody>
</table>

CSS Responsive tabel 3 kolom dengan nomor baris, lebar kolom 2 dan kolom 3 disamakan dan responsive (dapat menyesuaikan di semua ukuran layar).

.cordial-table {
   border-collapse:collapse;
   max-width:100%;
   width:100%;
   margin:10px 0;
}
.cordial-table td:first-child,.cordial-table th:first-child {
   text-align:center;
   vertical-align: middle;
   width:10%;
   min-width:27px;
   max-width:30px
   }
.cordial-table td,.cordial-table th {
   width:25%;
   max-width:0;
   overflow:hidden;
   overflow-wrap:break-word;
   }
.cordial-table thead th{background-color:#efefef}
.cordial-table tbody td,.cordial-table thead th{border:1px solid #e5e5e5;}
.cordial-table th{padding:15px;font-weight:600}
.cordial-table td{padding:10px 15px}

3. Tabel 3 Kolom Dengan Lebar Kolom Yang Disesuaikan

Markup Table (Kode HTML)

<table class="cordial-table">
  <thead>
    <tr><th>Kolom Header1</th><th>Kolom Header2</th><th>Kolom Header3</th></tr>
  </thead>
 <tbody>
   <tr><td>Tabel data</td><td>Tabel data</td><td>Tabel data</td></tr>
   <tr><td>Tabel data</td><td>Tabel data</td><td>Tabel data</td></tr>
   <tr><td>Tabel data</td><td>Tabel data</td><td>Tabel data</td></tr>
   <tr><td>Tabel data</td><td>Tabel data</td><td>Tabel data</td></tr>
   <tr><td>Tabel data</td><td>Tabel data</td><td>Tabel data</td></tr>
// spasi ini untuk menambahkan lebih banyak baris (table row) pada tabel //
 </tbody>
</table>

CSS Responsive tabel 3 kolom dengan lebar masing-masing kolom yang disesuaikan dan tetap responsive di semua ukuran layar.

.cordial-table{border-collapse:collapse;max-width:100%;width:100%;margin:10px 0;}
.cordial-table td:first-child,.cordial-table th:first-child{width:25%;}
.cordial-table td:nth-child(2),.cordial-table th:nth-child(2){width:30%;}
.cordial-table td:last-child,.cordial-table th:last-child{width:45%;}
.cordial-table td,.cordial-table th{max-width:0;overflow:hidden;overflow-wrap:break-word}
.cordial-table thead th{background-color:#efefef;}
.cordial-table tbody td,.cordial-table thead th{border:1px solid #e5e5e5;}
.cordial-table th{padding:15px;font-weight:600}
.cordial-table td{padding:12px 15px}

Keterangan : Lebar kolom satu adalah 25% dari ukuran layar (container), lebar kolom dua 30% dan lebar kolom tiga 45% dari ukuran layar, silahkan atur ulang lebar masing-masing kolom sesuai kebutuhan konten (tabel data).

4. Tabel 3 Kolom Kombinasi Dari Ketiga Table Di Atas

Berikut ini adalah tabel 3 kolom hasil kombinasi dari ketiga tabel sebelumnya, kamu dapat menginstal semua tabel tersebut ke template website/blog kamu dengan satu set css tanpa harus khawatir terjebak dalam duplikat css.

CSS Responsive (Gabungan 3 tabel di atas anti duplikat css).

.cordial-table{border-collapse:collapse;max-width:100%;width:100%;margin:10px 0;}
.table_1 td,.table_1 th{width:33.3%;}
.table_2 td:first-child,.table_2 th:first-child{text-align:center;width:10%;min-width:20px}
.table_2 td,.table_2 th{width:45%}
.table_3 td:first-child,.table_3 th:first-child{width:25%;}
.table_3 td:nth-child(2),.table_3 th:nth-child(2){width:30%;}
.table_3 td:last-child,.table_3 th:last-child{width:45%;}
.cordial-table td,.cordial-table th{max-width:0;overflow:hidden;overflow-wrap:break-word}
.cordial-table thead th{background-color:#efefef}
.cordial-table tbody td,.cordial-table thead th{border:1px solid #e5e5e5;}
.cordial-table th{padding:15px;font-weight:600}
.cordial-table td{padding:12px 15px}

Kode HTML (Markup table) yang digunakan sama dengan di atas, hanya saja kamu perlu menambahkan class baru pada markup table ketika ingin menggunakan salah satu table, contoh ketika ingin menggunakan table yang pertama.

<table class="cordial-table table_1">
  <thead>
    <tr><th>Kolom Header 1</th><th>Kolom Header 2</th><th>Kolom Header 3 </th></tr>
  </thead>
 <tbody>
   <tr><td>Tabel data 1</td><td>Tabel data</td><td>Tabel data</td></tr>
   <tr><td>Tabel data 2</td><td>Tabel data</td><td>Tabel data</td></tr>
   <tr><td>Tabel data 3</td><td>Tabel data</td><td>Tabel data</td></tr>
   <tr><td>Tabel data 4</td><td>Tabel data</td><td>Tabel data</td></tr>
   <tr><td>Tabel data 5</td><td>Tabel data</td><td>Tabel data</td></tr>
 </tbody>
</table>

Kemudian ketika kamu ingin menggunakan table yang kedua atau ketiga ganti class="cordial-table table_1" dengan table_2 atau table_3, sesederhana itu caranya, dalam sekali install, 3 style table dapat digunakan sewaktu-waktu.

5. Lebar Kolom Tengah Lebih Mendominasi

Tabel 3 kolom yang satu ini dirancang dengan gaya lebar kolom tengah lebih dominan dari pada kolom kiri dan kanan, saya pikir kamu juga mungkin membutuhkan tabel 3 kolom versi ini untuk memuat data seperti kode-bank misalnya.

Kode HTML (Markup Table)

<table class="cordial-table">
  <thead>
    <tr><th>No.</th><th>Nama Bank</th><th>Kode</th></tr>
  </thead>
 <tbody>
   <tr><td>1</td><td>Nama Bank1</td><td>Kode Bank1</td></tr>
   <tr><td>2</td><td>Nama Bank2</td><td>Kode Bank2</td></tr>
   <tr><td>3</td><td>Nama Bank3</td><td>Kode Bank3</td></tr>
   <tr><td>4</td><td>Nama Bank4</td><td>Kode Bank4</td></tr>
   <tr><td>5</td><td>Nama Bank5</td><td>Kode Bank5</td></tr>
// spasi ini untuk menambahkan lebih banyak baris (table row) pada tabel //
 </tbody>
</table>

Kode CSS Tabel 3 kolom dengan desain responsive

.cordial-table {
   border-collapse:collapse;
   max-width:100%;
   width:100%;
   margin:10px 0;
}
.cordial-table td,.cordial-table th {
   text-align:center;
   width:15%;
   min-width:40px;
   }
.cordial-table td:nth-child(2),.cordial-table th:nth-child(2){width:70%;}
.cordial-table thead th{background-color:#efefef;}
.cordial-table tbody td,.cordial-table thead th{border:1px solid #e5e5e5;}
.cordial-table th{padding:15px;font-weight:600}
.cordial-table td{padding:12px 15px}

6. Tabel 3 Kolom Dengan Scroll Bar Horizontal

Saya berinisiatif menambahkan scrollbar pada table, tujuannya agar ketika halaman web diakses melalui layar yang lebih kecil tampilan table tidak terlalu menciut, sehingga tabel data masih enak dilihat dan di baca.

Markup tabel 3 kolom yang digunakan juga masih sama, hanya ada penambahan pada markup table dan sedikit perubahan dan sedikit penambahan pada css, berikut selengkapnya.

Kode HTML (Markup tabel) dengan scroll bar

<div id="scroller">
<table class="cordial-table">
  <thead>
    <tr><th>Kolom Header 1</th><th>Kolom Header 2</th><th>Kolom Header 3</th></tr>
  </thead>
 <tbody>
   <tr><td>Tabel data</td><td>Tabel data</td><td>Tabel data</td></tr>
   <tr><td>Tabel data</td><td>Tabel data</td><td>Tabel data</td></tr>
   <tr><td>Tabel data</td><td>Tabel data</td><td>Tabel data</td></tr>
   <tr><td>Tabel data</td><td>Tabel data</td><td>Tabel data</td></tr>
   <tr><td>Tabel data</td><td>Tabel data</td><td>Tabel data</td></tr>
// spasi ini untuk menambahkan lebih banyak baris (table row) pada tabel //
 </tbody>
</table>
</div>

Kode CSS Tabel 3 kolom dengan scroll bar horizontal

.cordial-table{border-collapse:collapse;max-width:100%;width:100%;margin:10px 0}
.cordial-table td,.cordial-table th{text-align:left;width:33.3%}
.cordial-table tbody td,.cordial-table thead th{border:1px solid #e5e5e5;}
.cordial-table thead th{background-color:#efefef;}
.cordial-table th{padding:15px;font-weight:600}.cordial-table td{padding:12px 15px}
@media screen and (max-width:385px){
#scroller{overflow-x:scroll;}
#scroller::-webkit-scrollbar{height:8px;}
#scroller::-webkit-scrollbar-thumb{border-radius:6px;background-color:#646464}
}

Keterangan : Scroll bar hanya muncul ketika diakses melalui layar dengan lebar 385px atau lebih kecil dari itu, sedangkan untuk layar yang lebih lebar desain tabel tetap resonsive tanpa scroll bar.

7. Tabel 3 Kolom Tanpa Bordir Vertikal

Style border vertikal atau border left dan border right saya hilangkan pada tabel 3 kolom yang satu ini khususnya pada kolom tengah sehingga tabel terlihat lebih luas dan enak dilihat.

Untuk kode HTML table, teman-teman blogger bisa gunakan kode html table manapun yang ada di atas (tabel sebelumnya), dan untuk css nya gunakan css table pada cuplikan kode berikut ini.

.cordial-table{width:100%}
.cordial-table{border-collapse:separate;border-spacing:0;max-width:100%;width:100%;line-height:1.75}
.cordial-table tbody td,.cordial-table thead th{border:0 solid #e5e5e5}
.cordial-table tbody td:first-child,.cordial-table thead th:first-child{border-left-width:1px}
.cordial-table tbody td:last-child,.cordial-table thead th:last-child{border-right-width:1px}
.cordial-table thead th{background-color:#efefef;border-top-width:1px;border-bottom-width:1px}
.cordial-table tbody td{border-bottom-width:1px}
.cordial-table td,.cordial-table th{text-align:left;width:40%;max-width:0;overflow:hidden;overflow-wrap:break-word}
.cordial-table td:last-child,.cordial-table th:last-child{width:20%}
.cordial-table th{padding:15px 20px;font-weight:600}
.cordial-table td{padding:12px 20px;letter-spacing:.05rem}

8. Tabel 3 Kolom (Lebar kolom tengah lebih kecil)

Pada tabel yang satu ini kolom tengah hanya memiliki lebar 20% dari lebar container, sedangkan kolom kanan dan kiri memiliki lebar yang sama yakni 40% dari lebar container, hanya itu yang berbeda dari tabel ini.

Kode CSS Tabel

.cordial-table{border-collapse:collapse;max-width:100%;width:100%;margin:10px 0;}
.cordial-table td,.cordial-table th{text-align:center;width:40%;min-width:40px;}
.cordial-table td:nth-child(2),.cordial-table th:nth-child(2){width:20%;}
.cordial-table thead th{background-color:#efefef;}
.cordial-table tbody td,.cordial-table thead th{border:1px solid #e5e5e5;}
.cordial-table th{padding:15px 20px;font-weight:600}
.cordial-table td{padding:12px 20px}

Kode html table yang digunakan masih sama dengan kode html table 1,2,3,5 dan 6, kamu dapat menggunakan markup table nomor 1 atau markup tabel manapun yang kamu inginkan dari tabel-tabel di atas.

9. Tabel 3 Kolom Dengan Header Warna Warni

Tidak sah rasanya jika tidak menyediakan tabel yang sesuai dengan gambar thumbnail, maka dari itu bagian header pada tabel kali saya buat warna-warni.

Kode CSS Tabel

.cordial-table{width:100%}
.cordial-table{border-collapse:collapse;max-width:100%;width:100%;line-height:1.75}
.cordial-table tbody td,.cordial-table thead th{border:1px solid #e5e5e5;}
.cordial-table thead th:first-child{background-color:#d7daf9}
.cordial-table thead th:nth-child(2){background-color:#d3fbd8}
.cordial-table thead th:last-child{background-color:#fbf9d2}
.cordial-table td,.cordial-table th{text-align:left;width:45%;max-width:0;overflow:hidden;overflow-wrap:break-word}
.cordial-table td:first-child,.cordial-table th:first-child{width:10%}
.cordial-table th{padding:15px 20px;font-weight:600}
.cordial-table td{padding:12px 20px;letter-spacing:.05rem}

Kode HTML Tabel

<table class="cordial-table">
  <thead>
    <tr><th>No.</th><th>Kolom Header</th><th>Kolom Header</th></tr>
  </thead>
 <tbody>
   <tr><td>1</td><td>Tabel data</td><td>Tabel data</td></tr>
   <tr><td>2</td><td>Tabel data</td><td>Tabel data</td></tr>
   <tr><td>3</td><td>Tabel data</td><td>Tabel data</td></tr>
   <tr><td>4</td><td>Tabel data</td><td>Tabel data</td></tr>
   <tr><td>5</td><td>Tabel data</td><td>Tabel data</td></tr>
// spasi ini untuk menambahkan lebih banyak baris (table row) pada tabel //
 </tbody>
</table>

10. Tabel 3 Kolom Warna Selang Seling

Kesepuluh adalah tabel zebra (warna selang-seling) pada baris atau kolom tabel, desain tabel ini dibuat untuk tujuan agar data pada baris dan kolom tabel lebih mudah dipindai.

Kode CSS Tabel Zebra

.cordial-table tbody tr:nth-child(odd) {
  background-color:#96c39b;
}
.cordial-table tbody tr:nth-child(even) {
  background-color:#d2efd5;
}
.cordial-table{width:100%;margin: 15px 0;color:#2a2929}.cordial-table{border-collapse:collapse;max-width:100%;width:100%}.cordial-table tbody td,.cordial-table thead th{border:1px solid #e5e5e5;}.cordial-table thead th{background-color:#a7abd1}.cordial-table td,.cordial-table th{text-align:left;width:33.3%;overflow:hidden;overflow-wrap:break-word}.cordial-table th{padding:13px;font-weight:600}.cordial-table td{padding:5px 13px}

Untuk kode html tabel-nya copy dari tabel nomor satu (tabel paling atas), atau jika kamu sudah ahli mendesain tabel (edit css) silahkan copy markup tabel mana saja di atas yang kamu inginkan.

Selain koleksi tabel, saya juga telah menyediakan beberapa selektor css table html untuk memudahkan kamu dalam mengedit atau memodifikasi desain tabel yang telah saya bagikan ini.

CSS Selector Table

Berikut adalah css selector table jika kamu ingin memodifikasi warna background, font, border, padding dan lain-lain.

// css selector header tabel //
.cordial-table thead th
// css selector header tabel kolom 1 //
.cordial-table thead th:first-child
// css selector header tabel kolom 2 //
.cordial-table thead th:nth-child(2)
// css selector header tabel kolom terakhir //
.cordial-table thead th:last-child
// contoh: .cordial-table thead th:first-child{background-color:#d7daf9} //

// css selector body tabel kolom 1 //
.cordial-table tbody td:first-child
// css selector body tabel kolom 2 //
.cordial-table tbody td:nth-child(2)
// css selector body tabel kolom akhir //
.cordial-table tbody td:last-child
// contoh: .cordial-table tbody td:nth-child(2){background-color:#d7daf9} //

// css selector background-color untuk kolom tertentu //
.cordial-table .current{background-color:#d7daf9}
//tambahkan class="current" pada kolom tertentu  atau  yang ingin diwarnai. //

Jika butuh bantuan tentang table 3 kolom jangan sungkan untuk menghubungi admin cordialblogger.com melalui whatsapp atau melalui formulir kontak yang telah admin siapkan pada halaman kontak.

Demikian dari saya, semoga kumpulan tabel 3 kolom ini berguna untuk website/blog anda, tidak menutup kemungkinan varian tabel 3 kolom pada halaman (artikel) ini bertambah seiring berjalannya waktu, dukung admin dengan cara follow blog ini agar admin tetap semangat mendesain table.