Membuat Tabel CSS 1

Tabel ini dibuat menggunakan HTML 5 dan CSS 3

Source Code HTML

Buat kode HTML 5 sebagai berikut

Source Code HTML

<!DOCTYPE html>
<html lang="id">
 <head>
  <title>Membuat Tabel CSS - Kursus Membuat Web</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="tabel.css" media="all">
 </head>
 <body>
  <table>
   <tr>
    <th>No</th>
    <th>Nama</th>
    <th>Anak Ke</th>
   </tr>
   <tr>
    <td>1</td>
    <td>Riziq Sihab</td>
    <td>I</td>
   </tr>
   <tr>
    <td>2</td>
    <td>Luqmanul Hakim</td>
    <td>II</td>
   </tr>
   <tr>
    <td>3</td>
    <td>Fatimah Zahra</td>
    <td>III</td>
   </tr>
  </table>
 </body>
</html>

Source Code CSS

Selanjutnya buat kode CSS 3 sebagai berikut

Source Code CSS

table, tr, th, td {
 border-collapse: collapse;
 border: 1px solid #98BF21;
}

th{
 background-color: #A7C942;
 border-bottom: 3px solid #98BF21;
}

th, td{
 padding: 5px;
}

td:first-child{
 text-align: right;
}

tr:nth-child(odd) {
 background-color: #EAF2D3;
}

tr:nth-child(even) {
 background-color: #D0DFA5;
}

tr:hover{
 background-color: #ffffff;
 cursor: pointer;
}

Lihat Demo ..