Tutorial Belajar CSS Bagian 9 : Cara Menggunakan Properti Table di CSS

0
31

Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 8 : Cara Menggunakan Properti Image di CSS. Selanjutnya, kita akan mempelajari cara menggunakan properti table di CSS.

Pada tutorial ini, kita akan belajar bagaimana mendesain sebuah table HTML menggunakan kode CSS. Anda dapat mengatur table menggunakan properti berikut :

  • Border-collapse menentukan apakah browser harus mengontrol tampilan tepi yang berdekatan yang saling bersentuhan atau apakah setiap sel harus mempertahankan gayanya.
  • Border-spacing menentukan lebar yang harus muncul di antara sel tabel.
  • Caption-side caption disajikan dalam elemen <caption>. Secara default, ini dirender di atas tabel di dokumen. Anda menggunakan properti sisi keterangan untuk mengontrol penempatan keterangan tabel.
  • Empty-cells menentukan apakah batas harus ditampilkan jika sel kosong.
  • Table-layout memungkinkan browser untuk mempercepat tata letak tabel dengan menggunakan properti lebar pertama yang muncul di kolom lainnya daripada harus memuat seluruh tabel sebelum merendernya.

Sekarang, kita akan belajar bagaimana cara menggunkan property tersebut lewat contoh.

Properti Border-collapse Properti ini dapat memiliki 2 nilai yang diciutkan dan dipisahkan. Contoh berikut menggunakan kedua nilai tersebut :

<html>
   <head>
      <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">
         <caption>Contoh Collapse Border</caption>
         <tr><td class = "a"> Contoh Sel A Collapse</td></tr>
         <tr><td class = "b"> Contoh Sel B Collapse</td></tr>
      </table>
      <br />
      
      <table class = "dua">
         <caption>Contoh Border Terpisah</caption>
         <tr><td class = "a"> Contoh Sel A Separate</td></tr>
         <tr><td class = "b"> Contoh Sel B Separate</td></tr>
      </table>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Properti Border-Spacing

Properti border-spacing menentukan jarak yang memisahkan sel yang berdekatan pada border. Nilainya dapat berupa 1 atau 2 satuan panjang.

Jika Anda memberikan satu nilai saja, maka nilai tersebut akan menentukan batas vertikal dan horizontal.

Jika Anda menggunakan dua nilai, maka nilai pertama mengacu pada spasi horizontal dan yang kedua mengacu pada spasi vertikal :

<style type="text/css">
   /* jika Anda hanya menggunakan 1 nilai */
   table.contoh {border-spacing:10px;}
   /* Jika Anda menggunakan 2 nilai */
   table.contoh {border-spacing:10px 15px;}
</style>

Sekarang mari kita ubah contoh sebelumnya dan lihat efeknya.

<html>
   <head>
      <style type = "text/css">
         table.satu {
            border-collapse:separate;
            width:400px;
            border-spacing:10px;
         }
         table.dua {
            border-collapse:separate;
            width:400px;
            border-spacing:10px 50px;
         }
      </style>
   </head>

   <body>
   
      <table class = "satu" border = "1">
         <caption>Contoh Separate Border dengan border-spacing</caption>
         <tr><td> Contoh Sel A Collapse</td></tr>
         <tr><td> Contoh Sel B Collapse</td></tr>
      </table>
      <br />
      
      <table class = "dua" border = "1">
         <caption>Contoh Separate Border Example dengan border-spacing</caption>
         <tr><td> Contoh Sel A Separate</td></tr>
         <tr><td> Contoh Sel B Separate</td></tr>
      </table>
      
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Properti Caption-Side

Properti cation-side memungkinkan Anda menentukan di mana konten elemen <caption> harus ditempatkan dalam hubungannya dengan tabel.

Nilai yang biasanya digunakan untuk properti ini memiliki satu dari 4 nilai top, bottom, left atau right.

Contoh berikut menggunakan untuk setiap nilai.

<html>
   <head>
      <style type = "text/css">
         caption.atas {caption-side:top}
         caption.bawah {caption-side:bottom}
         caption.kiri {caption-side:left}
         caption.kanan {caption-side:right}
      </style>
   </head>

   <body>
   
      <table style = "width:400px; border:1px solid black;">
         <caption class = "atas">
            Caption akan muncul di atas
         </caption>
         <tr><td > Sel A</td></tr>
         <tr><td > Sel B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "bawah">
            Caption akan muncul di bawah
         </caption>
         <tr><td > Sel A</td></tr>
         <tr><td > Sel B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "left">
             Caption akan muncul di kiri
         </caption>
         <tr><td > Sel A</td></tr>
         <tr><td > Sel B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "kanan">
            Caption akan muncul di kanan
         </caption>
         <tr><td > Sel A</td></tr>
         <tr><td > Sel B</td></tr>
      </table>
      
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Properti Empty-Cells

Properti empty-cells menunjukkan apakah sel tanpa konten harus memiliki batas yang ditampilkan.

Properti ini dapat menggunakan salah satu dari 3 nilai – show, hide, inherit.

Berikut adalah properti empty-cells yang digunakan untuk menyembunyikan batas sel kosong di elemen <table>.

<html>
   <head>
      <style type = "text/css">
         table.kosong {
            width:350px;
            border-collapse:separate;
            empty-cells:hide;
         }
         td.kosong {
            padding:5px;
            border-style:solid;
            border-width:1px;
            border-color:#999999;
         }
      </style>
   </head>

   <body>
   
      <table class = "kosong">
         <tr>
            <th></th>
            <th>Judul satu</th>
            <th>Judul dua</th>
         </tr>
      
         <tr>
            <th>Judul Baris</th>
            <td class = "kosong">Nilai</td>
            <td class = "kosong">Nilai</td>
         </tr>
      
         <tr>
            <th>Judul Baris</th>
            <td class = "kosong">Nilai</td>
            <td class = "kosong"></td>
         </tr>
      </table>
      
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Properti Table-Layout

Properti table-layout seharusnya membantu Anda mengontrol bagaimana browser harus merender atau menata tabel.

Properti ini dapat memiliki salah satu dari tiga nilai: fixed, auto atau inherit.

Contoh berikut menunjukkan perbedaan antara properti ini.

<html>
   <head>
      <style type = "text/css">
         table.auto {
            table-layout: auto
         }
         table.fixed {
            table-layout: fixed
         }
      </style>
   </head>
   
   <body>
   
      <table class = "auto" border = "1" width = "100%">
         <tr>
            <td width = "20%">1000000000000000000000000000</td>
            <td width = "40%">10000000</td>
            <td width = "40%">100</td>
         </tr>
      </table>
      <br />
      
      <table class = "fixed" border = "1" width = "100%">
         <tr>
            <td width = "20%">1000000000000000000000000000</td>
            <td width = "40%">10000000</td>
            <td width = "40%">100</td>
         </tr>
      </table>
   
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Semoga tutorial ini membantu Anda untuk mempelajari bagaimana cara menggunakan properti table di CSS untuk mendesain sebuat tabel yang bagus.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.