Belajar CSS Part 16 - Cara Desain Tabel dengan CSS

byPksaimadiunkota1 •
0

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:
PropertiDeskripsi
borderMenetapkan semua properti bolder dalam satu deklarasi
border-collapseMenentukan apakah batas tabel harus diciutkan atau tidak
border-spacingMenentukan jarak antara batas sel yang berdekatan
caption-sideMenentukan penempatan keterangan tabel
empty-cellsMenentukan apakah atau tidak untuk menampilkan batas dan latar belakang pada sel-sel kosong dalam sebuah tabel
table-layoutMenetapkan algoritma tata letak yang akan digunakan untuk tabel

Demikian pembahasan mengenai tabel dalam CSS.
Semoga bermanfaat!

Sumber: https://www.w3schools.com
Tags:

Posting Komentar

Lebih baru Lebih lama