Cara membuat tabel menjadi menarik dengan CSS

Pada kesempatan yang indah ini saya akan memberikan kepada anda Cara membuat tabel menjadi menarik dengan CSS.Dan untuk melanjutkannya alangkah baiknya ketika anda mengetahui apa itu tabel terlebih dahulu.Baik saya akan jelaskan, Tabel adalah daftar yang berisi ikhtisar sejumlah data-data informasi yang biasanya berupa kata-kata maupun bilangan yang tersusun dengan garis pembatas.Membuat tabel dengan html mungkin bagi anda para programer website sudah tidak asing lagi, tetapi bagamaimana dengan mempercantik nya? Untuk itu pada kesempatan ini saya akan memberikan tutorial dimana kita akan mempercantik sebuah tabel dengan css.Langsung saja ke tutorialnya.

Tutorial Cara membuat tabel menjadi menarik dengan CSS

Copy script html di bawah ini dan kemudian copy juga script css di bawah nya script html.

 
<!DOCTYPE>
<html>
<head>
 <title>Styling Table</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 
    <table width="1000" cellpadding="5">
     <tr class="head">
         <th width="44">No</th><th width="200">Nama</th><th width="152">TempatTinggal</th><th width="118">Status</th>
        </tr>
        <tr class="satu">
         <td align="center">1</td>
          <td>Alsaskar Mirando</td>
          <td>Manado</td><td align="center">Jomblo</td>
        </tr>
        <tr class="dua">
         <td align="center">2</td>
         <td>Bintang Algaza</td><td>Manado</td><td align="center">Jomblo</td>
        </tr>
        <tr class="satu">
         <td align="center">3</td>
         <td>Irsyad Assegaf</td>
          <td>Manado</td>
          <td align="center">Jomblo</td>
        </tr>
        <tr class="dua">
         <td align="center">4</td>
         <td>Diin Fach Rudin</td>
          <td>Manado</td>
          <td align="center">Kawin</td>
        </tr>
        <tr class="satu">
         <td align="center">5</td>
         <td>Alan Rian</td>
          <td>Manado</td>
          <td align="center">Jomblo</td>
        </tr>
        <tr class="dua">
         <td align="center">6</td>
         <td>Fikri Doka</td>
         <td>Manado</td><td align="center">Jomblo</td>
        </tr>
        <tr class="satu">
         <td align="center">7</td>
         <td>Wahyu Saputra</td>
          <td>Manado</td>
          <td align="center">Jomblo</td>
        </tr>
        <tr class="dua">
          <td align="center">8</td>
          <td>Jhun Matoka</td>
          <td>Manado</td>
          <td align="center">Jomblo</td>
        </tr>
        <tr class="satu">
          <td align="center">9</td>
          <td>David Sambenthiro</td>
          <td>Manado</td>
          <td align="center">Jomblo</td>
        </tr>
        <tr class="dua">
          <td align="center">10</td>
          <td>Haryono</td>
          <td>Manado</td>
          <td align="center">Jomblo</td>
        </tr>
    </table>
 
</body>
</html>


table, th, td {
 border-collapse:collapse;
 border:3px solid #f25170;
 font-size:20px;
}

.head {
 background: #202020;
}

.head th {
 padding:5px;
 color:#376180;
 font-size:30px;
 font-family:Techno, Impact, sans-serif;
}

.satu {
 background-color:#f66414;
}

.dua {
 background-color:#c39797;
}

.satu:hover, .dua:hover {
 background-color:#eae23e;
 font-weight:bold;
 cursor:pointer;
}

Catatan : pada kode html di atas terdapat <link rel="stylesheet" type="text/css" href="style.css"> jika kalian memberikan nama lain bukan style.css maka gantilah style.css itu dengan nama file yang kalian berikan nama lain.Style.css itu hanyalah sebagai contoh.

Dan hasilnya akan seperti pada gambar di bawah ini.