/**/

Read     Contoh referensi coding untuk mempercantik tampilan tabel web html dengan css sederhana

Contoh referensi coding untuk mempercantik tampilan tabel web html dengan css sederhana

CSS
Hirzi Widyan Putra

Kali ini saya membagikan referensi, cara, coding atau tutorial membuat tabel dengan html dan css biar tampilannya lebih cantik nih sob! Langsung 5 contoh tabel css html ada hover nya juga

Biar tabel kamu lebih cantik dan enak dilihat nih buat tugas hehe langsung saja yaa saya bagikan coding nya sebagai berikut:

#Tabel 1

referensi-desain tabel1

#Coding tabel 1

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tabel 1 - @gilacoding</title>
  <style type="text/css">

body {
  padding: 20px;
  font-family: Segoe UI;
  color: #444;
  background: #eee;
  text-align: center;
}
.tabel1 {
  margin: auto;
  width: 60%; /*silahkan disesuaikan width nya*/
  color: #fff;
  border-collapse: collapse;
  border-radius: 5px;
}
.tabel1 th {
  background: #223241;
}
.tabel1 tr td {
  background: #284058;
}
.tabel1 th, .tabel1 td {
  padding: 16px !important;
  text-align: left;
}
.tabel1 th, .tabel1 td:before {
  color: #e3e348;
}
.tabel1 tr:hover > td {
  background: #223241 !important;
}

  </style>
</head>
<body>
<h1>Referensi Desain Tabel 1 - @gilacoding</h1>
<table class="tabel1">
  <thead>
    <tr>
      <th>No</th>
      <th>Nama</th>
      <th>Asal</th>
      <th>Tgl Lahir</th>
      <th>No Hp</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Tretan Muslim</td>
      <td>Bangkalan</td>
      <td>1991-03-10</td>
      <td>0800 0000 0000</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Coki Pardede</td>
      <td>Jakarta</td>
      <td>1988-01-21</td>
      <td>0800 0000 0000</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Mukti Entut EL Metronom</td>
      <td>Yogyakarta</td>
      <td>1991-04-07</td>
      <td>0800 0000 0000</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Dono Pradana</td>
      <td>Surabaya</td>
      <td>1989-04-16</td>
      <td>0800 0000 0000</td>
    </tr>
  </tbody>
</table>

</body>
</html>

 

#Tabel 2

coding table html css3

#Coding tabel 2

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tabel 2 - Gilacoding.com</title>
 <style type="text/css">
body {
  padding: 20px;
  font-family: Segoe UI;
  color: #444;
  background: #ddd;
  text-align: center;
}
    .tabel2 {
      border: solid 1px #DDEEEE;
      border-collapse: collapse;
      background-color: #fff;
      border-spacing: 0;
      width: 60%; /*silahkan disesuaikan width nya*/
      margin: 10px auto 10px auto;
    }
    .tabel2 thead th {
        background-color: #DDEFEF;
        border: solid 1px #DDEEEE;
        color: #336B6B;
        padding: 10px;
        text-align: left;
        text-decoration: none;
    }
    .tabel2 tbody td {
        border: solid 1px #DDEEEE;
        color: #333;
        padding: 10px;
        text-align: left;
    }
  .tabel2 tr:hover > td {
    background: #336B6B !important;
    color: #fff;
  }
    </style>
</head>
<body>

<h1>Referensi Desain Tabel 2 - @gilacoding</h1>
<table class="tabel2">
  <thead>
    <tr>
      <th>No</th>
      <th>Nama</th>
      <th>Asal</th>
      <th>Tgl Lahir</th>
      <th>No Hp</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Tretan Muslim</td>
      <td>Bangkalan</td>
      <td>1991-03-10</td>
      <td>0800 0000 0000</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Coki Pardede</td>
      <td>Jakarta</td>
      <td>1988-01-21</td>
      <td>0800 0000 0000</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Mukti Entut EL Metronom</td>
      <td>Yogyakarta</td>
      <td>1991-04-07</td>
      <td>0800 0000 0000</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Dono Pradana</td>
      <td>Surabaya</td>
      <td>1989-04-16</td>
      <td>0800 0000 0000</td>
    </tr>
  </tbody>
</table>

</body>
</html>

 

#Tabel 3

beautiful table css html

#Coding tabel 3

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tabel 3 - Gilacoding.com</title>
 <style type="text/css">
  body {
  background: #eee;
  font-family: 'Segoe UI';
  color: #ffffff;
  padding: 20px;
}
.body-tabel3 {
  width: 60%; /*silahkan disesuaikan width nya*/
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20), 0 1px 2px rgba(0, 0, 0, 0.20);
  margin: auto;
}
.judul-tabel {
  margin: 0;
  display: inline-block;
  background-color: #29434e;
  width: 100%;
}
h3 {
  padding-left: 20px;  
}
.tabel3 {
  width: 100%; 
  height: 100%;
  border-collapse: collapse;
  background-color: #E0E1E0;
}
.tabel3 th {
  background-color: #dc3279;
  padding: 15px;
  text-align: left;
}

.tabel3 td {
  color: #000000;
  padding: 15px;
  border-bottom: 1px solid #fff;
  white-space: nowrap;
}
  .tabel3 tr:hover > td {
    background: #eee !important;
    color: #dc3279;
  }

    </style>
</head>
<body>
    <div class="body-tabel3">      
      <div class="judul-tabel">
        <h3>Referensi Desain Tabel 3 - @gilacoding</h3>       
      </div>
      <table class="tabel3">
  <thead>
     <tr>
      <th>No</th>
      <th>Nama</th>
      <th>Asal</th>
      <th>Tgl Lahir</th>
      <th>No Hp</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Tretan Muslim</td>
      <td>Bangkalan</td>
      <td>1991-03-10</td>
      <td>0800 0000 0000</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Coki Pardede</td>
      <td>Jakarta</td>
      <td>1988-01-21</td>
      <td>0800 0000 0000</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Mukti Entut EL Metronom</td>
      <td>Yogyakarta</td>
      <td>1991-04-07</td>
      <td>0800 0000 0000</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Dono Pradana</td>
      <td>Surabaya</td>
      <td>1989-04-16</td>
      <td>0800 0000 0000</td>
    </tr>
  </tbody>
</table>

        
    </div>

</body>
</html>

 

#Tabel 4

how to make beautiful table css html

#Coding tabel 4

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tabel 4 - Gilacoding.com</title>
 <style type="text/css">
body{
  background: #111;
  font-family: 'Segoe UI';
  text-align: center;
}
.herotext{
  font-size: 25px;
  color: #fff;
  text-align: center;
}
.herotext::first-letter{
  color: #1ac6f1;
}
.herotext:before , .herotext:after{
  content: '';
  position: absolute;
  height: 1px;
  width: 20%;
  top: 33px;
  background: white;
}
.herotext:after{
  right: 70%;
}
.herotext:before{
  left: 70%;
}
.tabel4 {
  margin: auto;
  width: 60%;
}
.tabel4 tr > th{
  padding: 8px 8px;
  background: #1ac6f1;
  color: #000;
  font-size: 14px;
}
.tabel4 tr > td{
  padding: 12px 10px;
  color: #fff;
}
.tabel4 tr{
  transition: 200ms ease-in;
  will-change: transform,background,cursor;
}
.tabel4 tr:hover{
  background: rgba(255,255,255,0.1);
  transform: scale(1.1);
}
    </style>
</head>
<body>
    <h1 class="herotext">Referensi Desain Tabel 4 - @gilacoding</h1>
  <table class="tabel4">
  <thead>
    <tr>
      <th>No</th>
      <th>Nama</th>
      <th>Asal</th>
      <th>Tgl Lahir</th>
      <th>No Hp</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Tretan Muslim</td>
      <td>Bangkalan</td>
      <td>1991-03-10</td>
      <td>0800 0000 0000</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Coki Pardede</td>
      <td>Jakarta</td>
      <td>1988-01-21</td>
      <td>0800 0000 0000</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Mukti Entut EL Metronom</td>
      <td>Yogyakarta</td>
      <td>1991-04-07</td>
      <td>0800 0000 0000</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Dono Pradana</td>
      <td>Surabaya</td>
      <td>1989-04-16</td>
      <td>0800 0000 0000</td>
    </tr>
  </tbody>
</table>

</body>
</html>

 

#Tabel 5

css 3 hover table reference

#Coding tabel 5

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tabel 5 - Gilacoding.com</title>
 <style type="text/css">
    body {
  background: #eee;
  font-family: 'Segoe UI';
  padding: 20px;
  text-align: center;
}
.tabel5 {
  border-collapse: collapse;
  margin: 25px auto;
  width: 60%; /*silahkan disesuaikan width nya*/
  border-radius: 6px 6px 0 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.tabel5 thead tr {
  background-color: #ff48b4;
  color: #ffffff;
  font-weight: bold;
}
.tabel5 th,
.tabel5 td {
  text-align: left;
  padding: 14px;
}
.tabel5 tbody tr {
  border-bottom: 1px solid #dddddd;
}
.tabel5 tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}
.tabel5 tbody tr:last-of-type {
  border-bottom: 2px solid #ff48b4;
}
.tabel5 tbody tr.active-row {
  font-weight: bold;
  color: #ff48b4;
}
  .tabel5 tr:hover > td {
    background: #ddd !important;
    color: #ff48b4;
  }


    </style>
</head>
<body>
 <h2 class="heading">Referensi Desain Tabel 5 - @gilacoding</h2>
<table class="tabel5">
  <thead>
   <tr>
      <th>No</th>
      <th>Nama</th>
      <th>Asal</th>
      <th>Tgl Lahir</th>
      <th>No Hp</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Tretan Muslim</td>
      <td>Bangkalan</td>
      <td>1991-03-10</td>
      <td>0800 0000 0000</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Coki Pardede</td>
      <td>Jakarta</td>
      <td>1988-01-21</td>
      <td>0800 0000 0000</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Mukti Entut EL Metronom</td>
      <td>Yogyakarta</td>
      <td>1991-04-07</td>
      <td>0800 0000 0000</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Dono Pradana</td>
      <td>Surabaya</td>
      <td>1989-04-16</td>
      <td>0800 0000 0000</td>
    </tr>
  </tbody>
</table>

</body>
</html>

 

Note : Silahkan sesuaikan warna, ukuran, font size sesuai dengan keinginan kamu. Disini saya hanya membagikan referensi html cssnya saja sob.

Tiktok Gilacoding :  https://www.tiktok.com/@gilacoding

Youtube gilacoding : https://youtube.com/gilacoding

 

 

 Previous Post
Top