CSS - Tabel

Hai semuanya, untuk pembahasan kode kali ini, kita akan berbicara tentang membuat css yang berfungsi membuat table semacam calender. Karena apa yang saya suka tentang kalender bahwa didalamnya terdapat agenda kecil yang perlu Anda pikirkan dan benar-benar akan membuat halaman Anda terlihat profesional. Apa yang bias kita pikir tentang kalender adalah sangat, sangat sederhana, di mana Anda dapat melihat, kita mempunyai semua hari dalam sebulan. Kita juga punya agenda pada beberapa hari, agenda kecil dan hal-hal penting lainnya. Oke, lalu Apa yang dapat kita lakukan untuk mengambil informasi ini, konten ini dari HTML5 kemudian mengubahnya menjadi sesuatu yang sangat menyenangkan? Di sinilah saya akan membahas penggunaan CSS table yang salah satunya adalah untuk membuat kalender

Pada CSS Table anda akan mengatur properti berbeda dari tabel HTML dengan menggunakan CSS. Anda dapat mengatur properti tabel diantaranya:

  • Border
  • Border-collapse
  • Border-spacing
  • Caption-side
  • Empity-cell
  • Table-layout

Kita melihat ada 6 properti yang bisa digunakan, dimulai dengan border. Saya yakin anda sudah biasa menggunakan property ini, bergunaa dalam mensetting semua value dari properti dalam satu deklarasi. Beberapa property ini juga sudah familiar bagi anda seperti, border-width untuk mengatur lebar dari border,border-style untuk mengatur type dari border dan border-color untuk mengatur warna dari border.

Nah selanjutya yang harus anda paham adalah border-collapse untuk menentukan apakah browser harus mengontrol tampilan batas yang berdekatan yang saling menyentuh atau apakah setiap sel harus mempertahankan stylenya. Secara bebas bisa dijelaskna apakah anda akan membuat table dibatasi oleh 2 border yang bergabung atau terpisah.

Agar lebih jelasnya pemakaian border collapse dengan table yang dibuat bergabung seperti ini:

<html>
   <head>

      <style type="text/css">
         table.one {border-collapse:collapse;}

         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>Contoh Border Collapse Bergabung</caption>
         <tr><td class="a"> Table A Dari Border Collapse</td></tr>
         <tr><td class="b"> Table B Dari Border Collapse</td></tr>
      </table>
      <br />



   </body>
</html>

Hasilnya :

tabel1

Untuk Contoh Border Collapse Terpisah:

<html>
   <head>

      <style type="text/css">
         table.one {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>Contoh Border Collapse Terpisah</caption>
         <tr><td class="a"> Table A Dari Border Collapse</td></tr>
         <tr><td class="b"> Table B Dari Border Collapse</td></tr>
      </table>
      <br />



   </body>
</html>

Hasilnya :

tabel2

Selanjutnya, Border-spacing property berguna dalam menentukan jarak untuk memisahkan tiap-tiap sel yang ada pada table. Border ini bisa mengambil satu atau dua nilai, hal ini harus bersifat satuan panjang. Value : length(px,cm, etc)

Jadi ketika anda ingin membuat jarak antara kolom dan baris mesti menggunakan properti border-spacing. Agar lebih paham lihat contoh berikut:

<!DOCTYPE html>
<html>
    <head>
        <style>
            table.ct1 {
                border-collapse: separate;
                width:300px;
                border-spacing: 10px;
            }

            table.ct2 {
                border-collapse:separate;
                border-spacing: 10px 50px;
            }
        </style>
    </head>
    <body>
        <table class="ct1" border="1">
          <tr>
            <td>Contoh</td>
            <td>Border Collapse</td>
          </tr>
          <tr>
            <td>Border</td>
            <td>Spacing</td>
          </tr>
        </table>
        <br>
        <table class="ct2" border="1">
          <tr>
            <td>Border</td>
            <td>Collapse</td>
          </tr>
          <tr>
            <td>Border</td>
            <td>Spacing</td>
          </tr>
        </table>
    </body>
</html>

Hasilnya :

tabel3

Selanjutnya Caption-side, Digunakan untuk memberi keterangan judul pada table. Disini anda bisa mengaktifkan properti caption, dengan memasukkan kedalam lembar html untuk dihubungkan kedalam table.

<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:200px; border:1px solid black;">
         <caption class="top">
         CAPTION TERLETAK DIATAS
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />

      <table style="width:200px; border:1px solid black;">
         <caption class="bottom">
        CAPTION TERLETAK DIBAWAH
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />

      <table style="width:200px; border:1px solid black;">
         <caption class="left">
         CAPTION TERLETAK DIKIRI
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />

      <table style="width:200px; border:1px solid black;">
         <caption class="right">
         CAPTION TERLETAK DIKANAN
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>

   </body>
</html>

Hasilnya :

tabel4

Selanjutnya, empty-cells, berfungsi dalam menghilangkan menampilkan border atau tidak pada cells yang tidak di beri data di dalamnya. Jadi disini menunjukkan apakah sel tanpa konten harus memiliki perbatasan yang ditampilkan. values - show, hide or inherit.

<!DOCTYPE html>
<html>
<head>
<style>
table.one  {
    border-collapse: separate;
    empty-cells: hide;
}

table.two  {
    border-collapse: separate;
    empty-cells: show;
}

table.3  {
    border-collapse: separate;
    empty-cells: inherit;
}
</style>
</head>

<body>
<table class="one" border="1">
  <tr>
    <td>Empty</td>
    <td>Cells</td>
  </tr>
  <tr>
    <td>Hide</td>
    <td></td>
  </tr>
</table><p></p>
<table class="two" border="1">
  <tr>
    <td>Empty</td>
    <td>Cells</td>
  </tr>
  <tr>
    <td>show</td>
    <td></td>
  </tr>
</table><p></p>
<table class="3" border="1">
  <tr>
    <td>Empty</td>
    <td>Cells</td>
  </tr>
  <tr>
    <td>inherit</td>
    <td></td>
  </tr>
</table>
</body>
</html>

Hasilnya :

tabel5

Selanjutnya, table-layout, berguna dalam membantu Anda mengontrol bagaimana browser harus merender atau menata table. values: fixed, auto:

<!DOCTYPE html>
<html>
  <head>
    <style>
      table {
          border-collapse: separate;
          width: 100%;
          border: 1px solid black;
      }

      td {
          border: 1px solid black;
      }

      table.ct1 {
          table-layout: auto;
      }

      table.ct2 {
          table-layout: fixed;
      }
      </style>
      </head>
      <body>

    <p>table-layout: auto:</p>
    <table class="ct1">
        <tr>
          <td width="5%">9999999999999999999999999999999999990</td>
          <td width="85%">999999</td>
        </tr>
    </table>

      <p>table-layout: fixed:</p>
    <table class="ct2">
        <tr>
          <td width="5%">99999999999999999999999</td>
          <td width="85%">9999999</td>
        </tr>
    </table>
  </body>
</html>

Hasilnya :

tabel6