-->
fLWeAsNtTDyJ8LBwFzvbLJXLfZMxZVmQ7RFnAnMp

Cara Mudah Membuat Tabel Keren Responsive Blog Valid HTML

Membuat Tabel Keren Responsive Blog Valid HTML - Dengan table daftar yang kita posting akan nampak rampih dan enak dipandang mata. Tak perlu uta-atik kode CSS template kita hanya untuk sebuah table, karena table cukup pastekan di postingan blog sobat. Kita tinggal menyesuaikan dengan kebutuhan saja.

Cara Mudah Membuat Tabel Keren Responsive Blog Valid HTML

Tulisan yang saya cetak tebal dan berwarna merah silahkan sobat ganti sesuaikan dengan daftar table yang sobat bikin :

<!-- Table Rapi Serui -->
<div class="row mt-4 pl-md-5 pr-md-5">
<div class="col-md-12 text-center">
<h3  style="font-weight:900;">Daftar Call Sign RAPI Wilayah 08 Yapen</h3>
</div>
<div class="col-md-12 px-0 px-md-3">
<div class="row mb-3 mb-md-3 d-flex mx-auto table-rapi-menu-wrapper">
<div class="col-4 col-sm-4 mt-2 ml-md-5 px-0 text-right text-md-right">
</div>
</div>
</div>
<div class="row mt-2 pl-md-5 pr-md-5">
<div class="col-md-12 table-responsive mt-2">
<table class="table standing-table">
<thead class="standing-table-head">
<th scope="col">No</th>
<th scope="col">Callsign</th>
<th scope="col" class="text-center">Nama</th>
<th scope="col" class="text-center">Nama Udara</th>
<th scope="col" class="text-center">Alamat</th>
</thead>
<tbody style="font-weight: 700">
<tr style="">
<td>1.</td>
<td class="table-rapi">JZ27HAA</td>
<td class="text-center">ABDUL MA'RUF</td>
<td class="text-center">ABDUL</td>
<td class="text-center">SERUI</td>
</tr>
<tr style="">
<td>2.</td>
<td class="table-rapi">JZ27HAB</td>
<td class="text-center">ABDUL RAHMAN SUBADI</td>
<td class="text-center">AMAN</td>
<td class="text-center">SERUI</td>
</tr>
</tbody>
</table>
</div>
</div>

Maka Hasilnya akan seperti penampakan ini

Daftar Call Sign RAPI Wilayah 08 Yapen
No Callsign Nama Nama Udara Alamat
1. JZ27HAA ABDUL MA'RUF ABDUL SERUI
2. JZ27HAB ABDUL RAHMAN SUBADI AMAN SERUI

Table ini bisa sobat aplikasikan untuk daftar skor pertandingan, tarif hotel atau penginapan dan lain sebagainya. Jika kebutuhan sobat lebih dari 10 kolom daftar maka sobat harus menambahkan kode berikut hingga 10 buah kode:

<tr style="">
<td>3.</td>
<td class="table-rapi">JZ27KRN</td>
<td class="text-center">ENDANG AEP SAEFULAH</td>
<td class="text-center">KA E'EREND</td>
<td class="text-center">SERUI</td>
</tr>

Sebelum kode penutup table

............
</tbody>
</table>
</div>
</div>

Bentuk Table Untuk anggota RAPI dan tentunya lebih dari 10 kolom anggota bisa dilihat pada postingan berikut :

Daftar Call Sign RAPI Wilayah 08 Yapen
Artikel Terkait

Related Posts

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Baca lebih lanjut tentang Comment Policy
Buka Komentar

Post a Comment