Home » CSS » Table di CSS: Cara Membuat dan Contoh Tutorial Sintaknya

Table di CSS: Cara Membuat dan Contoh Tutorial Sintaknya

by Catur Kurnia Sari
by Catur Kurnia Sari

Untuk memperindah tampilan tabel dalam halaman web, penggunaan CSS untuk membuat tabel terlihat lebih bagus sangat disarankan. Lalu seperti apa penerapan CSS pada tabel? Berikut akan saya bahas lebih lanjut.

Contoh penggunaan CSS pada tabel :

<!DOCTYPE html>
<html>
<head>
<style>
#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

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

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>

<table id="customers">
  <tr>
    <th>Kantor</th>
    <th>Kontak</th>
    <th>Negara</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Jerman</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Swedia</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Meksiko</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>Inggris</td>
  </tr>
  <tr>
    <td>Königlich Essen</td>
    <td>Philip Cramer</td>
    <td>Jerman</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Kanada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italia</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>Simon Crowther</td>
    <td>Inggris</td>
  </tr>
  <tr>
    <td>Paris spécialités</td>
    <td>Marie Bertrand</td>
    <td>Perancis</td>
  </tr>
</table>

</body>
</html>

Table Borders

Table border atau batas tabel digunakan untuk menentukan jenis border pada tabel di CSS, untuk membuat border tabel pada CSS agar halaman web terlihat lebih menarik gunakan properti border.

Contoh di bawah ini menunjukan cara menentukan border berwarna hitam untuk elemen <table> , <th> , dan <td>:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h2>Menambahkan border pada tabel:</h2>

<table>
  <tr>
    <th>Nama depan</th>
    <th>Nama belakang</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body>
</html>

Perhatikan bahwa tabel pada contoh di atas memiliki double border. Hal ini dikarenakan tabel dan elemen <th> dan <td> memiliki border yang terpisah.

Collapse Table Borders

Properti border-collapse pada CSS berfungsi untuk mengatur apakah suatu border pada tabel harus diciutkan menjadi satu border.

Contoh:

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

table, td, th {
  border: 1px solid black;
}
</style>
</head>
<body>

<h2>Borders collapse:</h2>

<table>
  <tr>
    <th>Nama Depam</th>
    <th>Nama Belakang</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

<p><b>Catatan:</b>Jika! DOCTYPE tidak ditentukan, properti border-collapse dapat menampilkan hasil yang tidak diharapkan
pada browser IE8 dan versi sebelumnya.</p>

</body>
</html>

Jika yang di inginkan hanya mengatur border di sekitar tabel, maka yang harus dilakukan adalah hanya menentukan properti border untuk elemen <table>:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  border: 1px solid black;
}
</style>
</head>
<body>

<h2>Single Border pada sekitar Table:</h2>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body>
</html>

Tinggi dan Lebar Table

Menentukan besarnya lebar dan tinggi tabel pada CSS dapat ditentukan menggunakan properti width dan height.

Contoh di bawah ini menunjukan bahwa kita mengatur lebar tabel menjadi 100%, dan tinggi elemen <th> menjadi 50px:

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

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

th {
  height: 50px;
}
</style>
</head>
<body>

<h2>Properti width dan height</h2>
<p>Aturlah width pada table, dan height pada baris header table:</p>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Peter</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>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

Horizontal Alignment

Properti text-align pada CSS digunakan untuk mengatur perataan horizontal (seperti rata kiri, kanan, atau tengah) konten pada <td> atau <th>.

Menurut pengaturan default, konten pada elemen <td> akan rata tengah dan konten pada elemen <th> akan rata kiri.

Contoh dibawah ini adalah cara membuat teks menjadi rata kiri pada elemen <th> :

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

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

th {
  text-align: left;
}
</style>
</head>
<body>

<h2>Properti text-align </h2>
<p>Properti text-align digunakan untuk mengatur perataan horizontal (seperti rata kiri, kanan, atau tengah) konten pada td atau th.:</p>

<table>
  <tr>
  <th>Nama Depam</th>
  <th>Nama Belakang</th>
  <th>Tabungan</th>
  </tr>
  <tr>
  <td>Peter</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>Brown</td>
  <td>$250</td>
</tr>
</table>

</body>
</html>

Vertical Alignment

Properti vertical-align pada CSS digunakan untuk mengatur perataan vertical (seperti atas, bawah, atau tengah) konten pada <td> atau <th>.

Menurut pengaturan default, konten pada elemen <td> dan <th> di tabel akan berada di tengah

Contoh dibawah ini adalah cara mebuat teks secara verical berapa dibawah untuk elemen <td> :

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

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

td {
  height: 50px;
  vertical-align: bottom;
}
</style>
</head>
<body>

<h2>Properti vertical-align</h2>
<p>Properti vertical-align digunakan untuk mengatur perataan vertical (seperti atas, bawah, atau tengah) konten pada td atau th.</p>
<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Peter</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>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

Table Padding

Untuk mengontrol ruang antara border dan konten di dalam tabel, dapat dilakukan dengan menggunakan properti padding pada elemen <td> dan <th> :

<!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>Proeprti padding</h2>
<p>Properti ini menambahkan jarak antara border dan konten pada table.</p>

<table>
  <tr>
    <th>Nama Depam</th>
    <th>Nama Belakang</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Peter</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>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

Horizontal Dividers

Untuk memahami dengan lebih mudah, maka perhatikan contoh penggunaan horizontal divider pada tabel.

<!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>Border pada Table Divider</h2>
<p>Tambahkan properti border-bottom pada th dan td untuk menampilakn horizontal dividers:</p>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
  <th>Tabungan</th>
  </tr>
  <tr>
    <td>Peter</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>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

Hoverable Table

Gunakan selector :hover untuk menyorot baris tabel di atas mouse.

<!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:#f5f5f5;}
</style>
</head>
<body>

<h2>Hoverable Table</h2>
<p>Gerakkan mouse ke atas baris tabel untuk melihat efeknya.</p>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Point</th>
  </tr>
  <tr>
    <td>Peter</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>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

Striped Tables

Agar tabel terlihat zebra-striped, gunakan selector nth-child() dan tambahkan background-color ke semua baris tabel genap (atau ganjil):

<!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>Striped Table</h2>
<p>Agar tabel terlihat zebra-striped, 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>Point</th>
  </tr>
  <tr>
  <td>Peter</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>Brown</td>
  <td>$250</td>
  </tr>
</table>

</body>
</html>

Table Color

Contoh di bawah ini menujukan cara menentukan warna background dan warna teks pada elemen <th> :

<!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: #4CAF50;
  color: white;
}
</style>
</head>
<body>

<h2>Header table berwarna</h2>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Peter</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>Brown</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

Responsive Table

Tabel responsif akan menampilkan scroll bar horisontal jika layar terlalu kecil untuk menampilkan konten secara lengkap.

Tambahkan elemen container (seperti <div>) dengan overflow-x: auto di sekitar elemen <table> untuk membuat sebuah tabel responsif:

<!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>Responsive Table</h2>
<p>Tabel responsif akan menampilkan scroll bar horisontal jika layar terlalu kecil untuk menampilkan konten secara lengkap.</p>
<p>untuk membuat sebuah tabel responsif tambahkan elemen container (seperti div) dengan overflow-x: auto di sekitar elemen table. </p>

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>Nama Depan</th>
      <th>Nama Belakang</th>
      <th>Point</th>
      <th>Point</th>
      <th>Point</th>
      <th>Point</th>
      <th>Point</th>
      <th>Point</th>
      <th>Point</th>
      <th>Point</th>
      <th>Point</th>
      <th>Point</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>

</body>
</html>

Catatan: Pada OS X Lion (di Mac), scrollbar disembunyikan secara default dan hanya ditampilkan saat digunakan (meskipun “overflow: scroll” telah diatur).

Sekian pembahasan tentang cara membuat table lebih menarik pada CSS, semoga bermanfaat.

You may also like