Tabel HTML dengan Penomoran Otomatis

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.