Cara menggunakan css table

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.

Table of Contents Show

Properti Border-Spacing
Properti Caption-Side
Properti Empty-Cells
Properti Table-Layout
Apa fungsi tag table TR dan TD pada pembuatan tabel?
Bagaimana cara untuk membuat baris pada table?
Apa fungsi dari tag table?
Bagaimana struktur tabel dalam HTML?

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 :

CodePen Embed FallbackCodePen Embed Fallback

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 :

CodePen Embed FallbackCodePen Embed Fallback

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 :

CodePen Embed FallbackCodePen Embed Fallback

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 :

CodePen Embed FallbackCodePen Embed Fallback

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 :

CodePen Embed FallbackCodePen Embed Fallback

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

Apa fungsi tag table TR dan TD pada pembuatan tabel?

Untuk membuat suatu tabel minimal diperlukan tiga elemen tabel yaitu: 1. Tag Table : Sebagai awal pembuatan tabel. 2. Tag TR : Untuk mendefinisikan berapa banyak baris pada tabel 3. Tag TD : Untuk menampung sel data dari tabel tsb.

Bagaimana cara untuk membuat baris pada table?

Klik sel di atas atau di bawah tempat yang ingin Anda tambahkan baris. Di bawah Alat Tabel, di tab Tata Letak, lakukan salah satu hal berikut: Untuk menambahkan baris di atas sel, klik Sisipkan di Atas dalam grup Baris dan Kolom. Untuk menambahkan baris di bawah sel, klik Sisipkan di Bawah dalam grup Baris dan Kolom.

Apa fungsi dari tag table?

Tag <table> untuk membungkus tabelnya. Tag <thead> untuk membungkus bagian kepala tabel. Tag <tbody> untuk membungkus bagian body dari tabel.

Bagaimana struktur tabel dalam HTML?

Struktur dasar membuat tabel pada HTML adalah tag <table>, <tr> dan <td>. Artinya, hanya dengan 3 tag tersebut kita sudah bisa menampilkan tabel pada web browser.