Belajar CSS Part 16 - Cara Desain Tabel dengan CSS

CSS Table
Dalam HTML, tabel yang kita buat masih sangat sederhana. Tabel bisa kita desain dengan menggunakan CSS.

Berikut adalah tabel hasil desain menggunakan CSS:

Nama Pemain Bola	Klub	Negara
Cristiano Ronaldo	Juventus	Portugal
Lionel Messi	Barcelona	Argentina
Neymar JR	PSG	Brazil
Luka Modric	Real Madrid	Croatia
Antoine Griezmann	Atletico de Madrid	France
Kylian Mbappe	PSG	France
Marcelo Vieira	Real Madrid	Brazil

Tabel Border

Tabel border digunakan untuk menentukan batas tabel dalam CSS, dengan menggunakan properti border.

Berikut merupakan contoh menetapkan border hitam untuk elemen <table>, <th>, dan <td>.

Contoh

table, th, td {
    border: 1px solid black;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

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

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
  </tr>
  <tr>
    <td>Octavianus</td>
    <td>Hasan</td>
  </tr>
  <tr>
    <td>Noldi</td>
    <td>Harun</td>
  </tr>
</table>

</body>
</html>

Hasilnya:

Perhatikan bahwa hasil dari tabel dalam contoh di atas memiliki border ganda. Hal ini karena kedua tabel dan elemen <th> dan <td> memiliki border terpisah.

Border Collapse pada Tabel

Properti border-collapse digunakan untuk menetapkan apakah border pada tabel harus diperkecil (collapse), artinya garis dua yang merupakan default pada tabel harus dihilangkan salah satunya.

Contoh

table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Menambahkan border collapse:</h2>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
  </tr>
  <tr>
    <td>Octavianus</td>
    <td>Hasan</td>
  </tr>
  <tr>
    <td>Noldi</td>
    <td>Harun</td>
  </tr>
</table>

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

</body>
</html>

Hasilnya:

Jika kita hanya ingin menentukan border hanya di sisi tabel saja (tidak untuk baris atau kolom pada tabel secara keseluruhan), maka kita hanya menentukan properti border untuk <table> saja.

Contoh

table {
    border-collapse: collapse;
    border: 1px solid black;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Border tunggal di sisi tabel:</h2>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
  </tr>
  <tr>
    <td>Octavianus</td>
    <td>Hasan</td>
  </tr>
  <tr>
    <td>Noldi</td>
    <td>Harun</td>
  </tr>
</table>

</body>
</html>

Hasilnya:

Menentukan Lebar dan Tinggi tabel

Lebar dan tinggi tabel didefinisikan oleh properti width dan height.

Contoh di bawah merupakan tabel yang di setel dengan lebar 100%, dan ketinggian elemen <th> 50px.

Contoh

table, td, th {
    border: 1px solid black;
}

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

th {
    height: 50px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2> Properti width dan height </ h2>
<p> Setel lebar tabel, dan tinggi baris header tabel: </ p>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Simpanan</th>
  </tr>
  <tr>
    <td>Octavianus</td>
    <td>Hasan</td>
    <td>$100.000</td>
  </tr>
  <tr>
    <td>Noldi</td>
    <td>Harun</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Alan</td>
    <td>Pasilia</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Amin</td>
    <td>Laba</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

Hasilnya:

Penyelarasan secara Horizontal (Horizontal Alignment)

Properti text-align digunakan untuk menetapkan keselarasan horizontal (seperti kiri, kanan, atau tengah) dari konten yang berada dalam elemen <th> atau <td>.

Secara default, isi dari elemen <th> diselaraskan di tengah (center-aligned) dan isi dari elemen <td> diselaraskan di sisi kiri (left-aligned).

Di bawah ini adalah contoh penyelarasan teks dalam elemen <th> di sisi kiri.

Contoh

table, td, th {
    border: 1px solid black;
}

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

th {
    text-align: left;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti text-align</h2>
<p>Properti ini disetel dengan penyelarasan horizontal (seperti kiri, kanan, atau tengah) konten dalam th atau td:</p>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Simpanan</th>
  </tr>
  <tr>
    <td>Octavianus</td>
    <td>Hasan</td>
    <td>$100.000</td>
  </tr>
  <tr>
    <td>Noldi</td>
    <td>Harun</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Alan</td>
    <td>Pasilia</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Amin</td>
    <td>Laba</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

Hasilnya:

Penyelarasan secara Vertikal (Vertical Alignment)

Properti vertical-align digunakan untuk menetapkan penyelarasan (alignment) secara vertikal (seperti atas, bawah, atau tengah) dari konten yang berada dalam <th> atau <td>.

Secara default, alignment vertikal dari konten dalam sebuah tabel adalah tengah (untuk kedua <th> dan <td> elemen).

Contoh berikut menetapkan penyelarasan teks vertikal ke bawah untuk elemen <td>.

Contoh

table, td, th {
    border: 1px solid black;
}

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

td {
    height: 50px;
    vertical-align: bottom;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti vertical-align</h2>
<p>Properti ini disetel dengan penyelarasan vertikal (seperti kiri, kanan, atau tengah) konten dalam th atau td:</p>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Simpanan</th>
  </tr>
  <tr>
    <td>Octavianus</td>
    <td>Hasan</td>
    <td>$100.000</td>
  </tr>
  <tr>
    <td>Noldi</td>
    <td>Harun</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Alan</td>
    <td>Pasilia</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Amin</td>
    <td>Laba</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

Hasilnya:

Table Padding

Untuk mengontrol ruang antara border dan konten dalam sebuah tabel, gunakan properti padding pada elemen <td> dan <th>.
Contoh

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

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

th, td {
    padding: 15px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti padding</h2>
<p> Properti ini menambahkan spasi antara border dan konten dalam tabel. </ p>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Simpanan</th>
  </tr>
  <tr>
    <td>Octavianus</td>
    <td>Hasan</td>
    <td>$100.000</td>
  </tr>
  <tr>
    <td>Noldi</td>
    <td>Harun</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Alan</td>
    <td>Pasilia</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Amin</td>
    <td>Laba</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

Hasilnya:

Horizontal Dividers (Pembatas Horizontal)

Horizontal dividers merupakan pembagi atau pembatas secara horizontal antara baris dalam tabel.

Tambahkan properti border-bottom untuk <th> dan <td> untuk pembagi secara horisontal.

Contoh

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

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Bordered Table Dividers</h2>
<p>Tambahkan properti border-bottom ke th dan td untuk pembatas horizontal: </ p>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Simpanan</th>
  </tr>
  <tr>
    <td>Octavianus</td>
    <td>Hasan</td>
    <td>$100.000</td>
  </tr>
  <tr>
    <td>Noldi</td>
    <td>Harun</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Alan</td>
    <td>Pasilia</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Amin</td>
    <td>Laba</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

Hasilnya:

Hoverable Table

Hoverable tabel maksudnya adalah untuk menyorot setiap baris pada tabel saat mouse diletakkan di atas baris tabel. Gunakan selektor :hover pada <tr> untuk menyorot baris tabel pada mouse.

Contoh

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

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

tr:hover {background-color:#f5f5f5;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

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

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Simpanan</th>
  </tr>
  <tr>
    <td>Octavianus</td>
    <td>Hasan</td>
    <td>$100.000</td>
  </tr>
  <tr>
    <td>Noldi</td>
    <td>Harun</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Alan</td>
    <td>Pasilia</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Amin</td>
    <td>Laba</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

Hasilnya:

Tabel Bergaris (Striped Table)

Striped Table maksudnya adalah membuat tabel dengan model zebra, yaitu tabel bergaris-garis.

Untuk tabel zebra bergaris-garis, gunakan selektor nth-child() dan menambahkan background-color untuk semua baris tabel (baris ganjil atau genap).

Contoh

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

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

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Striped Table</h2>
<p> Untuk tabel bergaris zebra, gunakan selektor nth-child() dan tambahkan warna latar belakang ke semua baris tabel (genap atau ganjil): </ p>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Simpanan</th>
  </tr>
  <tr>
    <td>Octavianus</td>
    <td>Hasan</td>
    <td>$100.000</td>
  </tr>
  <tr>
    <td>Noldi</td>
    <td>Harun</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Alan</td>
    <td>Pasilia</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Amin</td>
    <td>Laba</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

Hasilnya:

Table Color

Contoh di bawah menentukan warna latar belakang dan warna teks pada elemen <th>.

Contoh

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

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

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

th {
    background-color: #58ACFA;
    color: white;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Pewarnaan Table Header</h2>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Simpanan</th>
  </tr>
  <tr>
    <td>Octavianus</td>
    <td>Hasan</td>
    <td>$100.000</td>
  </tr>
  <tr>
    <td>Noldi</td>
    <td>Harun</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Alan</td>
    <td>Pasilia</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Amin</td>
    <td>Laba</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

Hasilnya:

Responsive Table

Sebuah tabel responsif akan menampilkan scroll bar horizontal jika layar terlalu kecil untuk menampilkan konten secara lengkap.

Menambahkan elemen kontainer (seperti <div>) dengan overflow-x:auto sekitar elemen <table> untuk membuatnya menjadi responsif.

Contoh

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

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

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Responsive Table</h2>
<p> Tabel responsif akan menampilkan scroll horizontal jika layarnya terlalu kecil untuk menampilkan konten secara lengkap. Ubah ukuran jendela browser untuk melihat efeknya:</p>
<p> Untuk membuat tabel responsif, tambahkan elemen container (seperti div) dengan <strong> overflow-x: auto </ strong> di sekitar elemen tabel: </p>

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>Nama Depan</th>
      <th>Nama Belakang</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>Octavianus</td>
      <td>Hasan</td>
      <td>95</td>
      <td>95</td>
      <td>95</td>
      <td>95</td>
      <td>95</td>
      <td>95</td>
      <td>95</td>
      <td>95</td>
      <td>95</td>
      <td>95</td>
    </tr>
    <tr>
      <td>Noldi</td>
      <td>Harun</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>Alan</td>
      <td>Pasilia</td>
      <td>93</td>
      <td>93</td>
      <td>93</td>
      <td>93</td>
      <td>93</td>
      <td>93</td>
      <td>93</td>
      <td>93</td>
      <td>93</td>
      <td>93</td>
    </tr>
  </table>
</div>

</body>
</html>

Hasilnya:

Catatan: Dalam OS X Lion (pada Mac), scrollbar tersembunyi secara default dan hanya ditunjukkan saat sedang digunakan (meskipun "overflow: scroll" diatur).

Properti-properti Tabel pada CSS
Di bawah ini merupakan tabel dari properti-properti CSS tabel yang bisa kita gunakan:

Properti	Deskripsi
border	Menetapkan semua properti bolder dalam satu deklarasi
border-collapse	Menentukan apakah batas tabel harus diciutkan atau tidak
border-spacing	Menentukan jarak antara batas sel yang berdekatan
caption-side	Menentukan penempatan keterangan tabel
empty-cells	Menentukan apakah atau tidak untuk menampilkan batas dan latar belakang pada sel-sel kosong dalam sebuah tabel
table-layout	Menetapkan algoritma tata letak yang akan digunakan untuk tabel

Demikian pembahasan mengenai tabel dalam CSS.
Semoga bermanfaat!

Sumber: https://www.w3schools.com

Belajar CSS Part 16 - Cara Desain Tabel dengan CSS

4/ 5

Oleh Octavianus Hasan

Octavianus Hasan Juli 23, 2018 9 Komentar

9 Komentar:

Fennycia Lim15 Desember 2019 pukul 22.55
agen sabung ayam s128 sv388 terpercaya indonesia
dapatkan bonus 8x menang secara beruntun bebas arena s/d IDR 500.000,-
Untuk Info, Bisa Hubungi Customer Service Kami ( SIAP MELAYANI 24 JAM ) :
Telegram : +62812-2222-995 / https://t.me/bolavita
Wechat : Bolavita
WA : +62812-2222-995
Line : cs_bolavita
BalasHapus
Balasan
Tessa Hervika9 Maret 2020 pukul 18.35
Artikelnya bagus kak sangat mudah dimengerti. Saya sudah mencobanya dan berhasil. Saya mau bertanya sedikit kak, apa bisa di dalam tabel diletakkan gambar? Jika bisa sintaks apa yang digunakan? Mohon di jawab ya pertanyaan saya kak. Saya tunggu jawabannya kak. Terus buat artikel yang menarik ya. Perkenalkan nama saya Tessa Hervika ayo kunjungi website kampus saya https://www.atmaluhur.ac.id/
BalasHapus
Balasan
Ricki Tri Putra15 Maret 2020 pukul 19.06
artikel nya mantap gan. terima kasih atas ilmunya. semoga update terus artikelnya, gak sabar lagi untuk di tungguin yang terbarunya. materinya dikemas dengan baik, mudah dimengerti, dan rapih. Perkenalkan nama saya Ricki Tri Putra, mahasiswa dari STMIK Atma Luhur jurusan Sistem Informasi. kunjungin juga ya web kampus saya di : https://www.atmaluhur.ac.id/ Terima kasih, Salam sukses bagi kita semua.
BalasHapus
Balasan
Sri agustina19 Maret 2020 pukul 21.17
malam kak, postingan nya sangat membantu kak. penjelasannya sangat detail sekali. dan langkah-langkahnya sangat mudah untuk diikuti. semangat terus kak untuk membuat postingan yang lebih bermanfaat. perkenalkan nama Saya Sri Agustina, nim saya 1922500194. dan link website kampus saya https://www.atmaluhur.ac.id/
BalasHapus
Balasan
Dhita Heru Pambudi5 April 2020 pukul 14.50
Makasih banget kak atas artikelnya ,karena telah membantu saya dalam pembuatan Program web pada html dengan mendesign layout website menggunakan CSS.Sebelumnya saya kesulitan dalam mendesign dan kodingnnnya karena enggak tau gmna cara make nya,setelah melihat dari langkah kakak saya mudah sekali dalam pengetikan dan tau dmna tempat nya
.Semoga kakak semaki berjaya dalam artikelnya karena dapat membantu orang lain dan semakin sukses Aamiin
Perkenalkan Nama saya Dhita Heru Pambudi .Kunjungi website kampus kami https://www.atmaluhur.ac.id/
Terima kasih kak
BalasHapus
Balasan