Cara Mudah Membuat Tabel Keren Responsive Blog Valid HTML - Erend Elektronik

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.

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