Pada tutorial kali ini kita akan membahas bagaimana cara mengatur tabel dengan css, sebenarnya tabel bisa di atur sedemikian rupa dengan menggunakan atribut pada tag table itu sendiri, tetapi agar terlihat lebih menarik dan keren maka tabel harus diintegarsikan dengan css.
Desain tabel sendiri sebenarnya banyak apabila kita mencarinya dimesin pencari, hanya saja desain yang apabila kita ambil di mesin pencari tersebut bentuknya akan sama dengan tabel yang kita buat, karna hasil desain tidak murni dari desain sendiri.
Mengatur Tabel Dengan CSS
Tutorial ini sebenarnya bukanlah untuk mendesain tabel agar terlihat menarik dan keren, tetapi lebih daripada mengatur tabel dengan css agar sesuai dengan yang kita mau. Ada beberapa properti yang akan kita gunakan untuk membuat tabel sesuai dengan yang kita inginkan. Berikut ini properti-properti yang akan digunakan pada tutorial ini.
| Properti | Keterangan |
|---|---|
| border-collapse | Properti border-collapse digunakan untuk memisahkan garis atau border pada tabel |
| border-spacing | Properti border-spacing digunakan untuk membuat jarak antara kolom didalam tabel |
| caption-side | Properti caption-side berguna untuk menentukan letak caption sebuah table |
| empty-cells | Menentukan batas garis apakah ditampilkan apabila kolom kosong |
Sebenarnya ada satu properti yang penulis hilangkan, karna properti tersebut penulis belum mengenalinya, tetapi jika nanti ternyata penulis sudah memahaminya akan ditambahkan lagi dalam tutorial mengatur tabel pada css.
Memisahkan Border Pada Tabel Dengan CSS
Untuk dapat memisahkan border pada tabel dengan css yaitu dengan menggunakan properti border-collapse, dimana border pada tiap-tiap batas tabel seperti kolom dan baris serta pada induk tabel itu sendiri akan terpisah. Berikut ini contohnya.
<!DOCTYPE html>
<html>
  <head>
    <title>Mengatur Tabel Dengan CSS</title>
    <style type="text/css">
      table.satu { border-collapse:collapse; }
       table.dua { border-collapse:separate; }
      td.a {
        border-style:dotted;
        border-width:3px;
        border-color:#000000;
        padding: 10px;
      }
      td.b {
        border-style:solid;
        border-width:3px;
        border-color:#333333;
        padding:10px;
      }
    </style>
  </head>
<body>
  <table class="satu " border="1">
    <caption>Collapse Border</caption>
    <tr><td class="a"> Cell A Collapse</td></tr>
    <tr><td class="b"> Cell B Collapse</td></tr>
  </table>
  <br />
  <table class="dua" border="1">
    <caption>Separate Border</caption>
    <tr><td class="a"> Cell A Separate</td></tr>
    <tr><td class="b"> Cell B Separate</td></tr>
  </table>
</body>
</html>Code language: HTML, XML (xml)Ada dua tabel diatas, satu tabel dengan properti border-collapse mempunyai nilai collapse, satu lagi properti border-collapse mempunyai nilai separate, silahkan tulis kode diatas lalu buka di browser anda. Border-collapse yang memiliki nilai separate akan terlihat seperti memisahkan diri dengan kolom bahkan induk tabel didalamnya.
Membuat Jarak Antara Kolom Dan Baris
Untuk dapat membuat jarak antara kolom dan baris yaitu dengan menggunakan properti border-spacing, dimana pada masing-masing kolom dan baris memiliki jarak, begitupun pada batas utamanya akan memiliki jarak tergantung kita menentukan ukurannya, berikut ini contohnya.
<!DOCTYPE html>
<html>
  <head>
    <title>Mengatur tabel dengan css</title>
    <style type="text/css">
      table {
        border-spacing: 10px;
      }
    </style>
  </head>
<body>
  <table border="1">
    <caption>Border Spacing</caption>
    <tr><td> Cell Border Spacing</td></tr>
    <tr><td> Cell Border Spacing</td></tr>
  </table>
</body>
</html>Code language: HTML, XML (xml)Jika di lihat dari browser maka akan tampil seperti gambar dibawah ini…
Mengatur Posisi Judul atau Caption Tabel
Untuk membuat judul pada tabel menggunakan tag caption, dimana posisi tag caption ini secara default berada di atas tabel, tetapi dengan properti caption-side kita dapat memindahkan posisi caption tersebut. Berikut ini contohnya.
<!DOCTYPE html>
<html>
  <head>
    <title>Mengatur tabel dengan css</title>
    <style type="text/css">
      table caption {
        caption-side: bottom;
      }
    </style>
  </head>
<body>
  <table border="1">
    <caption>Caption Tabel</caption>
    <tr><td> Mengatur tabel dengan css </td></tr>
    <tr><td> Mengatur tabel dengan css </td></tr>
  </table>
</body>
</html>Code language: HTML, XML (xml)Sebenarnya nilai yang bisa diberikan pada properti caption-side ini ada left, right, top, bottom, namun beberapa browser kadang tidak mendukung posisi left dan right secara bawaan.
Menghilangkan Garis Pada Kolom Kosong
Untuk dapat menyembunyikan atau menghilangkan garis pada kolom yang kosong didalam sebuah tabel dapat dengan menggunakan properti empty-cells, properti-cells ini sangat pintar, ketika ada sebuah kolom yang kosong maka kolom tersebut tidak akan menampilkan garis tepi di dalem kolom tersebut. Berikut ini kodenya.
<!DOCTYPE html>
<html>
  <head>
    <title>Mengatur tabel dengan css</title>
    <style type="text/css">
table {
empty-cells: hide;
}
</style>
  </head>
<body>
  <table border="1">
<caption>Empty Cells</caption>
<tr>
<td> Mengatur tabel dengan css </td>
<td> Mengatur tabel dengan css </td>
</tr>
<tr>
<td> Mengatur tabel dengan css </td>
<td></td>
</tr>
</table>
</body>
</html>Code language: HTML, XML (xml)Dari tabel diatas terlihat ada salah satu kolom terakhir yang tidak memiliki nilai, biasanya jika tidak ditambahkan properti empty-cells maka didalam kolom tersebut akan menampilkan garis atau border, hal tersebut seperti ada nilai didalam kolom untuk mengatasi hal tersebut adalah dengan menggunakan properti empty-cells.
