Tabel Dalam Postingan Dengan Penomoran Otomatis

Kali ini Sinau blog akan berbagi langkah untuk membuat tabel dalam postingan dengan penomoran otomatis dan pastinya menggunakan CSS. Dengan cara ini kita tidak lagi membuat penomoran dengan manual. Dan ini akan sangat mempermudah disetiap pengerjaan tabel didalam postingan.

Langkah pertama silahkan copy dan paste kode dibawah ini pada postingan. 

 
<style type="text/css">
table{
  width: 100%; /* 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>

Baca Juga

Selanjutnya, copy dan paste kode berikut ini dan letakkan dimana tabel akan dibuat

 
  <div class='table w100'>
Kode tabel disini
  </div>

Untuk kode tabel silahkan gunakan script diawah ini

 
 <div class='table w100'>
  <table class="css-serial">
    <thead>
      <tr>
        <th>No</th>
        <th>Nama</th>
        <th>Alamat</th>
        <th>Kelas</th>
        <th>Tempat Lahir</th>
        <th>Tanggal Lahir</th>
        <th>Foto</th>
      </tr>
    </thead>
    <tbody>
      
<tr>
    <td>  </td> <!-- bagian ini dikosongi untuk nomor otomatis -->
    <td>Nama siswa 1</td>
    <td> alamat siswa no 55</td>
    <td> 6</td>
    <td> Depok </td>
	<td> 6 Juni 2018</td>
    <td> <a href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-M-CgwcjY0sezGJoy78rRiHdXKBhXabQxvg&s" onclick="window.open(this.href,&quot;popupwindow&quot;,&quot;status=0, height=700, width=500, scrollbars=yes, resizable=0, top=0, left=0&quot;); return false;" target="_blank">Foto</a></td>
  </tr>
      
   <tr>
    <td>  </td> <!-- bagian ini dikosongi untuk nomor otomatis -->
    <td>Nama siswa 2</td>
    <td> alamat siswa no 75</td>
    <td> 6</td>
    <td> Bekasi </td>
	<td> 6 April 2018</td>
    <td> <a href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-M-CgwcjY0sezGJoy78rRiHdXKBhXabQxvg&s" onclick="window.open(this.href,&quot;popupwindow&quot;,&quot;status=0, height=700, width=500, scrollbars=yes, resizable=0, top=0, left=0&quot;); return false;" target="_blank">Foto</a></td>
  </tr>  
      
      <tr>
    <td>  </td> <!-- bagian ini dikosongi untuk nomor otomatis -->
    <td>Nama siswa 3</td>
    <td> alamat siswa no 90</td>
    <td> 6</td>
    <td> Jakarta </td>
	<td> 6 Mei 2017</td>
    <td> <a href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-M-CgwcjY0sezGJoy78rRiHdXKBhXabQxvg&s" onclick="window.open(this.href,&quot;popupwindow&quot;,&quot;status=0, height=700, width=500, scrollbars=yes, resizable=0, top=0, left=0&quot;); return false;" target="_blank">Foto</a></td>
  </tr>
      
   </tbody>
  </table>
</div>
 

Sehingga secara keseluruhan kode akan menjadi seperti dibawah ini

 
 
<style type="text/css">
table{
  width: 100%; /* 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>

 
  <div class='table w100'>
 
 <div class='table w100'>
  <table class="css-serial">
    <thead>
      <tr>
        <th>No</th>
        <th>Nama</th>
        <th>Alamat</th>
        <th>Kelas</th>
        <th>Tempat Lahir</th>
        <th>Tanggal Lahir</th>
        <th>Foto</th>
      </tr>
    </thead>
    <tbody>
      
<tr>
    <td>  </td> <!-- bagian ini dikosongi untuk nomor otomatis -->
    <td>Nama siswa 1</td>
    <td> alamat siswa no 55</td>
    <td> 6</td>
    <td> Depok </td>
	<td> 6 Juni 2018</td>
    <td> <a href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-M-CgwcjY0sezGJoy78rRiHdXKBhXabQxvg&s" onclick="window.open(this.href,&quot;popupwindow&quot;,&quot;status=0, height=700, width=500, scrollbars=yes, resizable=0, top=0, left=0&quot;); return false;" target="_blank">Foto</a></td>
  </tr>
      
   <tr>
    <td>  </td> <!-- bagian ini dikosongi untuk nomor otomatis -->
    <td>Nama siswa 2</td>
    <td> alamat siswa no 75</td>
    <td> 6</td>
    <td> Bekasi </td>
	<td> 6 April 2018</td>
    <td> <a href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-M-CgwcjY0sezGJoy78rRiHdXKBhXabQxvg&s" onclick="window.open(this.href,&quot;popupwindow&quot;,&quot;status=0, height=700, width=500, scrollbars=yes, resizable=0, top=0, left=0&quot;); return false;" target="_blank">Foto</a></td>
  </tr>  
      
      <tr>
    <td>  </td> <!-- bagian ini dikosongi untuk nomor otomatis -->
    <td>Nama siswa 3</td>
    <td> alamat siswa no 90</td>
    <td> 6</td>
    <td> Jakarta </td>
	<td> 6 Mei 2017</td>
    <td> <a href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-M-CgwcjY0sezGJoy78rRiHdXKBhXabQxvg&s" onclick="window.open(this.href,&quot;popupwindow&quot;,&quot;status=0, height=700, width=500, scrollbars=yes, resizable=0, top=0, left=0&quot;); return false;" target="_blank">Foto</a></td>
  </tr>
      
   </tbody>
  </table>
</div>
   </div>

Untuk demo silahkan klik disini
Terima kasih, semoga dapat dimanfaatkan pada postingan blog, khususnya template custom UI