CSS - Tabel

Tutorial ini akan mengajarkan Anda cara mengatur properti berbeda dari tabel HTML menggunakan CSS. Anda dapat mengatur properti tabel berikut -

Itu border-collapse menentukan apakah browser harus mengontrol tampilan perbatasan yang berdekatan yang saling bersentuhan atau apakah setiap sel harus mempertahankan gayanya.
Itu border-spacing menentukan lebar yang harus muncul di antara sel tabel.
Itu caption-sideteks disajikan dalam elemen <caption>. Secara default, ini dirender di atas tabel di dokumen. Anda menggunakan properti sisi keterangan untuk mengontrol penempatan keterangan tabel.
Itu empty-cells menentukan apakah perbatasan harus ditampilkan jika sel kosong.
Itu 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 melihat bagaimana menggunakan properti ini dengan contoh.

Properti runtuh batas

Properti ini dapat memiliki dua nilai yang diciutkan dan dipisahkan . Contoh berikut menggunakan kedua nilai -

<html>
   <head>
      <style type = "text/css">
         table.one {border-collapse:collapse;}
         table.two {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 = "one">
         <caption>Collapse Border Example</caption>
         <tr><td class = "a"> Cell A Collapse Example</td></tr>
         <tr><td class = "b"> Cell B Collapse Example</td></tr>
      </table>
      <br />
      
      <table class = "two">
         <caption>Separate Border Example</caption>
         <tr><td class = "a"> Cell A Separate Example</td></tr>
         <tr><td class = "b"> Cell B Separate Example</td></tr>
      </table>
   </body>
</html>

Ini akan menghasilkan hasil sebagai berikut -

Properti penspasian batas

Properti penspasian batas menentukan jarak yang memisahkan sel yang berdekatan '. perbatasan. Ini bisa mengambil satu atau dua nilai; ini harus menjadi satuan panjang.

Jika Anda memberikan satu nilai, itu akan berlaku untuk batas vertikal dan horizontal. Atau Anda dapat menentukan dua nilai, dalam hal ini, yang pertama mengacu pada spasi horizontal dan yang kedua mengacu pada spasi vertikal -

NOTE - Sayangnya, properti ini tidak berfungsi di Netscape 7 atau IE 6.

<style type="text/css">
   /* If you provide one value */
   table.example {border-spacing:10px;}
   /* This is how you can provide two values */
   table.example {border-spacing:10px; 15px;}
</style>

Sekarang mari kita ubah contoh sebelumnya dan lihat efeknya -

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

   <body>
   
      <table class = "one" border = "1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell A Collapse Example</td></tr>
         <tr><td> Cell B Collapse Example</td></tr>
      </table>
      <br />
      
      <table class = "two" border = "1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell A Separate Example</td></tr>
         <tr><td> Cell B Separate Example</td></tr>
      </table>
      
   </body>
</html>

Ini akan menghasilkan hasil sebagai berikut -

Properti sisi teks

Properti sisi caption memungkinkan Anda menentukan di mana konten elemen <caption> harus ditempatkan dalam hubungannya dengan tabel. Tabel berikut mencantumkan kemungkinan nilai.

Properti ini dapat memiliki salah satu dari empat nilai atas, bawah, kiri atau kanan . Contoh berikut menggunakan setiap nilai.

NOTE - Properti ini mungkin tidak berfungsi dengan Browser IE Anda.

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

   <body>
   
      <table style = "width:400px; border:1px solid black;">
         <caption class = "top">
            This caption will appear at the top
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "bottom">
            This caption will appear at the bottom
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "left">
            This caption will appear at the left
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "right">
            This caption will appear at the right
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      
   </body>
</html>

Ini akan menghasilkan hasil sebagai berikut -

Properti sel kosong

Properti sel kosong menunjukkan apakah sel tanpa konten apa pun harus memiliki batas yang ditampilkan.

Properti ini dapat memiliki salah satu dari tiga nilai - tampilkan, sembunyikan, atau warisan .

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

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

   <body>
   
      <table class = "empty">
         <tr>
            <th></th>
            <th>Title one</th>
            <th>Title two</th>
         </tr>
      
         <tr>
            <th>Row Title</th>
            <td class = "empty">value</td>
            <td class = "empty">value</td>
         </tr>
      
         <tr>
            <th>Row Title</th>
            <td class = "empty">value</td>
            <td class = "empty"></td>
         </tr>
      </table>
      
   </body>
</html>

Ini akan menghasilkan hasil sebagai berikut -

Properti tata letak tabel

Properti tata letak tabel 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.

NOTE - Properti ini tidak didukung oleh banyak browser jadi jangan mengandalkan 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>

Ini akan menghasilkan hasil sebagai berikut -