Menambahkan Style Pada Table Dengan CSS

Pengisian Tabel

Untuk mengontrol jarak antara border dan isi konten dalam tabel, gunakan properti padding pada elemen <td> dan <th> :

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {  
  border: 1px solid #ddd;
  text-align: left;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 15px;
}
</style>
</head>
<body>

<h2>Properti padding</h2>

<p>Properti ini menambahkan ruang antara border dan konten dalam tabel.</p>

<table>
<tr>
<th>Nama Depan</th>
<th>Nama belakang</th>
<th>Tabungan</th>
</tr>
<tr>
<td>Petrus</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Coklat</td>
<td>$250</td>
</tr>
</table>

</body></html>

Jalankan Contoh

Memberi Jarak Secara Horizontal

Tambahkan properti border-bottom ke elemen <th> dan <td> untuk memberi jarak secara horizontal:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>

<h2>Properti border-bottom</h2>
<p>Tambahkan properti border-bottom ke th dan td untuk membuat pembagi horizontal:</p>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama belakang</th>
  <th>Tabungan</th>
  </tr>
  <tr>
    <td>Petrus</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Coklat</td>
    <td>$250</td>
  </tr>
</table>

</body></html>

Jalankan Contoh

Efek Hover

Gunakan selector :hover pada elemen <tr> supaya baris tabel tersebut dapat disorot oleh cursor.

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

tr:hover {background-color: coral;}
</style>
</head>
<body>

<h2>Selector hover</h2>

<p>Arahkan mouse ke baris tabel untuk melihat efeknya.</p>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Poin</th>
  </tr>
  <tr>
    <td>Petrus</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Coklat</td>
    <td>$250</td>
  </tr>
</table>

</body></html>

Jalankan Contoh

Tabel Bergaris

Untuk membuat tabel bergaris seperti zebra, gunakan selector nth-child() dan tambahkan background-color untuk merubah baris tabel secara ganjil atau genap.

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {background-color: #f2f2f2;}
</style>
</head>
<body>

<h2>Tabel bergaris</h2>

<p>Untuk tabel bergaris zebra, gunakan selector nth-child() dan tambahkan background-color ke semua baris tabel genap (atau ganjil):</p>

<table>
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Poin</th>
</tr>
<tr>
<td>Petrus</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Coklat</td>
<td>$250</td>
</tr>
</table>

</body></html>

Jalankan Contoh

Warna Tabel

Contoh di bawah menentukan warna latar belakang dan warna tulisan dari elemen <th>:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

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

th {
  background-color: #04AA6D;
  color: white;
}
</style>
</head>
<body>

<h2>Tabel header berwarna</h2>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Petrus</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Coklat</td>
    <td>$250</td>
</tr>
</table>

</body></html>

Jalankan Contoh

Tutorial sebelumnya : Mengatur Table HTML Dengan CSS
Tutorial setelahnya : Membuat Table Responsif Dengan CSS
Semua Tutorial CSS : Tutorial CSS