CSS counters

CSS counters adalah variable CSS yang nilainya dapat bertambah seiring dengan berapa kali (CSS rules) digunakan dalam satu dokumen.

Table with Automatic Numbering

Sebagai contoh implementasi sederhana dari feature ini, kita akan coba buat HTML table.

Table Structure

Berikut ini adalah struktur table standard, hanya saja kolom td paling kiri pada tbody kita kosongkan. Kenapa dikosongkan karena nantinya akan terisi secara otomatis melalui CSS.

<table>
  <thead>
    <tr>
      <th>No.</th>
      <th>Nama</th>
      <th>Usia</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>Agus</td>
      <td>27</td>
    </tr>
    <tr>
      <td></td>
      <td>Asep</td>
      <td>30</td>
    </tr>
    <tr>
      <td></td>
      <td>Budi</td>
      <td>29</td>
    </tr>
    <tr>
      <td></td>
      <td>Dadang</td>
      <td>28</td>
    </tr>
    <tr>
      <td></td>
      <td>Subur</td>
      <td>31</td>
    </tr>
    <tr>
      <td></td>
      <td>Wiwin</td>
      <td>26</td>
    </tr>
    <tr>
      <td></td>
      <td>Satya</td>
      <td>32</td>
    </tr>
  </tbody>
</table>

CSS Code

Dengan CSS berikut, kolom kosong pada table di atas akan secara otomatis terisi oleh angka yang berurutan.

table {
  counter-reset: nomor;
}
tbody tr {
  counter-increment: nomor;
}
td:first-child::before {
  content: counter(nomor) ".";
}

CodePen

Dari code di atas dan tanpa bantuan javaScript, akan menghasilkan table seperti pada pen berikut ini:

Conclusion

Sedikitnya hanya 3 CSS rules yang berperan pada tricks di atas. Menariknya, penomoran akan otomatis ter-reset kembali dari angka 1 setiap kali kita buat table lain. Selain penggunaan pada table, tentunya kita juga bisa menggunakan feature ini pada html tag lainnya, seperti heading, list, dll.