Belajar CSS (10. Table)

Styling Table Menggunakan CSS

Table merupakan salah satu dari tag pada html. Dengan CSS, table yang dibuat dapat diedit dan diubah tampilanya sesuai keinginan.
Property yang digunakan yaitu :
1.Border
2.Border-collapse
3.Border-spacing
4.Caption-side
5.Empity-cell
6.Table-layout

1. Border
Diskripsi : Properti ini digunakan untuk mensetting semua value dari properti dalam satu deklarasi.
Value : border-width, border-style, border-color
border-width : mengatur lebar dari border. value dari dari border-width yaitu medium, thin, thick, length (contoh: px)
border-style : mengatur type dari border. value dari border-style yaitu none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
border-color : mengatur warna dari border.
ex.

<!DOCTYPE html>
<html>
<head>
	<style>
		p {
    		border: 5px solid red;
		}		
	</style>
</head>
<body>
	<p>This is some text in a paragraph.</p>
</body>
</html>

hasil

2. Border-collapse
Diskripsi : Untuk mensetting apakah table dibatasi oleh 2 border yang bergabung atau terpisah
Value : Separate (default), Collapse.
ex.

<!DOCTYPE html>
<html>
<head>
	<style>
		table {
		    border-collapse: collapse;
		}

		table, td, th {
		    border: 1px solid black;
		}
	</style>
</head>
<body>
	<table>
		<tr>
		    <th>Firstname</th>
		    <th>Lastname</th>
	  </tr>
	  <tr>
		    <td>Manda</td>
		    <td>Mandi Kembang</td>
	  </tr>
	  <tr>
		    <td>Bobi</td>
		    <td>Blagu</td>
	  </tr>
	</table>
</body>
</html>

hasil

<!DOCTYPE html>
<html>
<head>
	<style>
		table {
		    border-collapse: separate;
		}

		table, td, th {
		    border: 1px solid black;
		}
	</style>
</head>
<body>
	<table>
		<tr>
		    <th>Firstname</th>
		    <th>Lastname</th>
	  </tr>
	  <tr>
		    <td>Manda</td>
		    <td>Mandi Kembang</td>
	  </tr>
	  <tr>
		    <td>Bobi</td>
		    <td>Blagu</td>
	  </tr>
	</table>
</body>
</html>

hasil

3. Border-spacing
Diskripsi : Digunakan untuk mengatur jarak antara border yang berdekatan
Value : length(px,cm, etc)
ex.

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

			table.ex2 {
			    
			    border-spacing: 10px 50px;
			}
		</style>
	</head>
	<body>
		<table class="ex1" border="1">
		  <tr>
		    <td>Manda</td>
		    <td>Mandi Kembang</td>
		  </tr>
		  <tr>
		    <td>Bobi</td>
		    <td>Blagu</td>
		  </tr>
		</table>
		<br>
		<table class="ex2" border="1">
		  <tr>
		    <td>Budi</td>
		    <td>Baper</td>
		  </tr>
		  <tr>
		    <td>iritology</td>
		    <td>no 54</td>
		  </tr>
		</table>
	</body>
</html>

hasil

4. Caption-side
Diskripsi : Digunakan untuk memberi keterangan judul pada table.
Value : top, bottom.
ex.

<!DOCTYPE html>
<html>
  <head>
    <style>
      caption {
            caption-side: bottom;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <caption>Table 1.1 Mahasiswa</caption>
        <tr>
          <th>Nama</th>
          <th>NIM</th>
          <th>Jurusan</th>
        </tr>
        <tr>
          <td>Manda Mandikembang</td>
          <td>12345001</td>
          <td>Teknik Informatika</td>
        </tr>
        <tr>
          <td>Bobi Blagu</td>
          <td>12345002</td>
          <td>Sistem Informasi</td>
        </tr>
        <tr>
          <td>Budi Baper</td>
          <td>12345002</td>
          <td>Ilmu Komunikasi</td>
        </tr>
    </table>
  </body>
</html>

hasil

5. Empity-cells
Diskripsi : Digunakan untuk menghilangkan menampilkan border atau tidak pada cells yang tidak di beri data di dalamnya.
Value : show, hide.

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

<body>
<table border="1">
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td></td>
  </tr>
</table>
</body>
</html>

hasil

6. table-layout
Diskripsi : Digunakan untuk mengatur algoritma tata letak
value : fixed, auto.
ex.

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

      td {
          border: 1px solid black;
      }

      table.ex1 {
          table-layout: auto;
      }

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

    <p>table-layout: auto:</p>
    <table class="ex1">
        <tr>
          <td width="5%">1000000000000000000000000000</td>
          <td width="95%">10000000</td>
        </tr>
    </table>

      <p>table-layout: fixed:</p>
    <table class="ex2">
        <tr>
          <td width="5%">1000000000000000000000000000</td>
          <td width="95%">10000000</td>
        </tr>
    </table>
  </body>
</html>

hasil

Demikian post tentang table pada css, Semoga Bermanfaat,sampai jumpa di postingan selanjutnya.

Written by @akhi_syabab