Tabel HTML dengan Penomoran Otomatis

Jumat, 01 Juli 2016

Berikut ini adalah catatan kecil agar saya dan yang senasib yang baru belajar html dan css terkait tabel sedikit tercerahkan bila suatu saat lupa lagi. Ketika saya harus membuat tabel dengan pemutakhiran secara berkala tentu juga harus melakukan perbaikan urutan penomoran karena ada sisipkan pada baris. Tentu akan kurang praktis bila harus mengganti nomor seri ketika ada data baru yang mesti disisipkan. Dapatlah cara ini dari sini. Keunggulan cara ini adalah menyelesaikan urusan yang seperti saya temui tadi. Kini bila ingin menyisipkan baris maka tidak perlu lagi repot untuk memperbaiki penomoran lagi. Penomoran akan dilakukan secara otomatis. Dengan memanfaatkan cascading style sheet masalah itu pun jadi bablas, lewat dah.


KODE CSS untuk tabel dengan penomoran otomatis. Boleh ditempatkan di bagian atas atau bawah postingan.
 
<style type="text/css">
table{
  width: 500px; /* Ganti menjadi 100% untuk tampilan responsif */
  border-collapse: collapse;
  margin: 30px 0px 30px;
  background-color: #fff;
  font-size: 14px;
  }
table tr {
    height: 40px;
    }
table th {
  background: #333;
  color: white;
  font-weight: bold;
  font-size: 18px;
}
table td, th {
  padding: 6px 6px 6px 10px;
  border: 1px solid #ccc;
}

/* CSS3 untuk pewarnaan baris selang-seling */
table tr:nth-of-type(odd) {
  background: #eee;
}

/* Penomoran otomatis pada baris */
.css-serial {
  counter-reset: serial-number;  /* Atur penomoran ke 0 */
}
.css-serial td:first-child:before {
  counter-increment: serial-number;  /* Kenaikan penomoran */
  content: counter(serial-number);  /* Tampilan counter */
}
</style>
 

KODE HTML untuk tabel dengan penomoran otomatis. Boleh dimodifikasi dan ditempatkan sesuai yang dikehendaki sesuai keperluan.
 
<table class="css-serial">
<thead>
<tr>   
<th align="center"><b>Nomor</b></th>   
<th align="center"><b>Nama Siswa</b></th>   
<th align="center"><b>Bidang</b></th> 
</tr>
</thead> 
<tbody>

<tr>   <td align="center"></td><!-- Kosongkan untuk td pertama ini -->   
<td align="center">Badi</td>   
<td align="center">Kimia</td> 
</tr>

<tr>   <td align="center"></td><!-- Kosongkan untuk td pertama ini -->   
<td align="center">Bida</td>   
<td align="center">Fisika</td> 
</tr>

<tr>   <td align="center"></td><!-- Kosongkan untuk td pertama ini -->   
<td align="center">Baid</td>   
<td align="center">Biologi</td> 
</tr>

<tr>   <td align="center"></td><!-- Kosongkan untuk td pertama ini -->   
<td align="center">Dabi</td>   
<td align="center">Matematika</td> 
</tr>

<tr>   <td align="center"></td><!-- Kosongkan untuk td pertama ini -->   
<td align="center">Abid</td>   
<td align="center">TIK</td> 
</tr>

<tr>   <td align="center"></td><!-- Kosongkan untuk td pertama ini -->   
<td align="center">Ibad</td>   
<td align="center">Astronomi</td> 
</tr>

<tr>   <td align="center"></td><!-- Kosongkan untuk td pertama ini -->   
<td align="center">Idab</td>   
<td align="center">Ekonomi</td> 
</tr>

<tr>   <td align="center"></td><!-- Kosongkan untuk td pertama ini -->   
<td align="center">Diba</td>   
<td align="center">Geografi</td> 
</tr>

<tr>   <td align="center"></td><!-- Kosongkan untuk td pertama ini -->   
<td align="center">Abdi</td>   
<td align="center">Kebumian</td> 
</tr>

</tbody> </table>


Nomor Nama Siswa Bidang
Badi Kimia
Bida Fisika
Baid Biologi
Dabi Matematika
Abid TIK
Ibad Astronomi
Idab Ekonomi
Diba Geografi
Abdi Kebumian

Pada mode Compose (pada blogger) tabel yang dibuat hanya akan nampak seperti di bawah ini, tapi jangan khawatir ketika di preview/pratinjau hasilnya tentu akan sesuai yang dikehendaki seperti di atas itu.


Selamat mencoba.

Bagikan di

Tidak ada komentar:

Poskan Komentar

 
Copyright © 2015-2016 Urip dot Info | Disain Template Oleh Herdiansyah Hamzah Dimodivikasi Urip.Info