Membuat tabel dengan gaya berbeda

Kali ini Saya akan memberitahukan cara untuk membuat tabel dengan gaya yang berbeda. Sepertinya menarik, dimana Anda bisa merubah tampilan tabel yang Anda miliki dengan pilihan warna yang Anda sukai. Dengan kode yang ada dibawah ini, Anda bisa membuat tabel dengan tampilan warna yang berbeda pada setiap barisnya.

Anda bisa memilih warna hitam putih sehingga tampak belang-belang atau pilih warna yang Anda sukai.Sebaiknya dalam pemilihan kombinasi warnanya disesuaikan dengan warna tampilan web atau blog Anda, sehingga bisa terlihat serasi dan lebih cantik. Nah, untuk membuatnya silahkan Anda gunakan beberapa kode yang ada di bawah ini:

Script HTML5 nya seperti ini:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table id="tStyle">
<tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>  
    <th>Nama Panggilan</th>
  </tr>
<tr>
    <td>Andi</td>
    <td>Riyanto</td>  
    <td>Anto</td>
  </tr>
<tr>
    <td>Maya</td>
    <td>Evalia</td>  
    <td>Lia</td>
  </tr>
<tr>
    <td>Intan</td>
    <td>Nuraeni</td>  
    <td>Nur</td>
  </tr>
<tr>
    <td>Tegar</td>
    <td>Wahyudi</td>  
    <td>Ega</td>
  </tr>
</table>
</body>
</html>

Sedangkan untuk script CSS nya seperti ini:

<style>
table {
    width:75%;
}
table, th, td {
    border: 0px solid silver;
    border-collapse: collapse;
}
th  {
    padding: 3px;
    text-align: center;
}
td  {
    padding: 3px;
    text-align: left;
}
table#tStyle tr:nth-child(even) {
    background-color: #eee;
}
table#tStyle tr:nth-child(odd) {
   background-color:#fff;
}
table#tStyle th {
    background-color: black;
    color: lightgrey;
}
</style>

Silahkan Anda sisipkan script CSS tersebut diatas '</head>' yang ada pada script HTML5 diatas. Nanti hasil penggabungannya akan seperti ini:

<!DOCTYPE html>
<html>
<head>
<style>
table {
    width:75%;
}
table, th, td {
    border: 0px solid silver;
    border-collapse: collapse;
}
th  {
    padding: 3px;
    text-align: center;
}
td  {
    padding: 3px;
    text-align: left;
}
table#tStyle tr:nth-child(even) {
    background-color: #eee;
}
table#tStyle tr:nth-child(odd) {
   background-color:#fff;
}
table#tStyle th {
    background-color: black;
    color: lightgrey;
}
</style>
</head>
<body>
<table id="tStyle">
<tr>
    <th>Nama Depan</th>:
    <th>Nama Belakang</th>  
    <th>Nama Panggilan</th>
  </tr>
<tr>
    <td>Andi</td>
    <td>Riyanto</td>  
    <td>Anto</td>
  </tr>
<tr>
    <td>Maya</td>
    <td>Evalia</td>  
    <td>Lia</td>
  </tr>
<tr>
    <td>Intan</td>
    <td>Nuraeni</td>  
    <td>Nur</td>
  </tr>
<tr>
    <td>Tegar</td>
    <td>Wahyudi</td>  
    <td>Ega</td>
  </tr>
</table>
</body>
</html>

Tampilan tabel yang dihasilkan akan seperti ini:

Nama Depan	Nama Belakang	Nama Panggilan
Andi	Riyanto	Anto
Maya	Evalia	Lia
Intan	Nuraeni	Nur
Tegar	Wahyudi	Ega

Sekian, semoga bermanfaat. Mohon maaf bila ada kesalahan.

Pages

w3codez

adchoices