Desain table menggunakan CSS

Desain teble menggunakan CSS

Berikut ini cara simple mendesain table dengan CSS.

berikut ini adalah struktur HTML pada table

<table>
  <tr>
  <th>Number</th>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
    <th>Delete</th>
    <th>Edit</th>
  </tr>
  <tr>
  <td>1</td>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
    <td class="delete">Delete</td>
    <td class="edit">Edit</td>
  </tr>
  <tr>
  <td>2</td>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
    <a href="#"><td class="delete">Delete</td></a>
    <td class="edit">Edit</td>
  </tr>
  <tr>
  <td>3</td>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
   <td class="delete">Delete</td>
    <td class="edit">Edit</td>
  </tr>
  <tr>
  <td>4</td>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
     <td class="delete">Delete</td>
    <td class="edit">Edit</td>
</tr>
</table>

kemudian menambahkan script CSS untuk merubah style pada table

table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    border:1px solid #fff;
    text-align: left;
    padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}

.delete{
background-color:#e74c3c;
color:#fff;
text-align: center;
}
tr:hover{
background-color:#34495e;
color:#fff;
}
.edit{
background-color:#3498db;
color:#fff;
text-align: center;
}
th {
    background-color:#2c3e50;
    color: white;
}

Penjelasan pada scrip CSS
- pada bagian tr:nth-child(even){background-color: #f2f2f2}  akan memberikan efek warna selang-seling kamu juga dapat mengganti warna yang diinginkan
- pada bagian

tr:hover{
background-color:#34495e;
color:#fff;
}

memberikan efek warna lain jika mouse berada di salah satu baris tabel
- dan memberikan warna khusus pada baris tertentu dengan menambahkan class .delete dan .edit di tabel seperti contoh delete dan edit.