Tutorial Belajar CSS Part 29 – Mengatur Tampilan Table dengan CSS

bySetyo Wibowo ID - 0

Dalam tutorial ini kita masih membahas tampilan tabel dengan menggunakan CSS, tak terasa sudah sampe part 29 hehe,,, untuk teman – teman yang belum mengerti mengenai tabel silahkan cek tutorial warungbelajar sebelumnya mengenai cara membuat tabel di HTML,





Mengingat fungsi tabel yang digunakan untuk menampilkan data, kita harus dapat mengatur tampilan Tabel semenarik mungkin dan mudah dibaca oleh pengguna aplikasi web, karena hal tersebut CSS memiliki beberapa fitur yang bisa anda gunakan untuk mengatur tampilan tabel, sehingga tabel bisa ditampilkan dengan lebih menarik.





Baik langsung saja kita bahas mengenai beberapa fitur yang diberikan oleh CSS yang berfungsi untuk mengatur tampilan Tabel.





Tabel Border





Property Tabel Border digunakan untuk mengatur tampilan border tabel dengan menggunakan CSS, untuk contoh penggunaan Tabel border perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
	<title>Belajar CSS untuk Tampilan Tabel</title>
	<style type="text/css">
		table, th, td {
		   border: 5px solid blue;
		}
	</style>
</head>
<body>
<table>
	<tr>
		<th>No</th>
		<th>Nama</th>
		<th>Kelas</th>
	</tr>
	<tr>
		<td>1</td>
		<td>Aris</td>
		<td>3mm3</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Budi</td>
		<td>3mm3</td>
	</tr>
	<tr>
		<td>3</td>
		<td>Cika</td>
		<td>3mm3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>Doni</td>
		<td>3mm3</td>
	</tr>
</table>
</body>
</html>




semisal kita simpan dengan nama tabel-border.html, hasilnya adalah seperti berikut :









Penjelasan :





  • Tabelnya akan terdapat border, konsep penggunaan border sama seperti artikel warung belajar sebelumnya Mengatur Border dengan CSS, tetapi kita gunakan selector table, th, dan td, maka border tersebut ditampilkan dengan ukuran 5 px, style garis solid, dan berwarna biru.




Collapse Table Borders





Property tersebut digunakan untuk menyatukan border pada tabel, sehingga bordernya hanya ditampilkan dengan 1 garis saja.





perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
	<title>Belajar CSS untuk Tampilan Tabel</title>
	<style type="text/css">
		table {
		    border-collapse: collapse;
		}

		table, th, td {
		    border: 1px solid blue;
		}
	</style>
</head>
<body>
<table>
	<tr>
		<th>No</th>
		<th>Nama</th>
		<th>Kelas</th>
	</tr>
	<tr>
		<td>1</td>
		<td>Aris</td>
		<td>3mm3</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Budi</td>
		<td>3mm3</td>
	</tr>
	<tr>
		<td>3</td>
		<td>Cika</td>
		<td>3mm3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>Doni</td>
		<td>3mm3</td>
	</tr>
</table>
</body>
</html>




semisal kita menyimpan dengan nama collapse-table-border.html, lalu kita buka di browser hasilnya :









Penjelasan :





  • Pada gambar diatas tabel yang ditampilkan menggunakan 1 garis border saja hal tersebut karena kita menggunakan property border-collapse:collapse; sehingga bordernya dijadikan satu.




Property Width and Height





Berikutnya adalah property width dan height, width digunakan untuk mengatur lebar, dan height digunakan untuk mengatur tinggi, perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
  <title>Belajar CSS untuk Tampilan Tabel</title>
  <style type="text/css">
    table {
    border-collapse: collapse;
    width: 75%;
    }

    th{
        height: 50px;
    }

    table, th, td {
        border: 1px solid blue;
    }
  </style>
</head>
<body>
<table>
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>Kelas</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Aris</td>
    <td>3mm3</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Budi</td>
    <td>3mm3</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Cika</td>
    <td>3mm3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Doni</td>
    <td>3mm3</td>
  </tr>
</table>
</body>
</html>




semisal kita simpan dengan nama table-widht-height.html, lalu silahkan dibuka di browser maka hasilnya :









Penjelasan :





  • Untuk lebar dari tabel ditampilkan sebesar 75% dari lebar browser, hal tersebut karena kita menset value 75% pada property width dengan selector table.
  • Untuk tinggi dari tag <th> ditampilkan sebesar 50 pixel, hal tersebut karena kita menset value 50 pixel pada property height dengan selector <th>, jika anda ingi merubah ukuran tinggi dari tag <td> anda tinggal merubah selectornya menjadi tag <td>




Horizontal Alignment





Property ini digunakan untuk mengatur tampilan text aligment pada kolom secara horizontal nilai yang bisa anda gunakan adalah (right,left, dan center), perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
  <title>Belajar CSS untuk Tampilan Tabel</title>
  <style type="text/css">
    table {
    border-collapse: collapse;
    width: 75%;
    }
    table, th, td {
        border: 1px solid blue;
    }
    tr.satu
    {
      text-align: right;
    }
    tr.dua
    {
      text-align: left;
    }
    tr.tiga
    {
      text-align: center;
    }
  </style>
</head>
<body>
<table>
  <tr class="satu">
    <th>No</th>
    <th>Nama</th>
    <th>Kelas</th>
  </tr>
  <tr class="dua">
    <td>1</td>
    <td>Aris</td>
    <td>3mm3</td>
  </tr>
  <tr class="tiga">
    <td>2</td>
    <td>Budi</td>
    <td>3mm3</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Cika</td>
    <td>3mm3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Doni</td>
    <td>3mm3</td>
  </tr>
</table>
</body>
</html>




semisal kita simpan dengan nama table-horizontal-alignment.html, lalu kita buka di browser :









Penjelasan :





  • pada table header <tr> yang menggunakan class satu ditampilkan dengan text rata kanan, karena kita menggunakan value right pada property text-align dengan selector tr.satu
  • pada table header <tr> yang menggunakan class dua ditampilkan dengan text rata kiri, karena kita menggunakan value left pada property text-align dengan selector tr.dua
  • pada table header <tr> yang menggunakan class tiga ditampilkan dengan text rata tengah, karena kita menggunakan value center pada property text-align dengan selector tr.tiga




Vertical Alignment





Property ini digunakan untuk mengatur tampilan text aligment pada kolom secara vertical nilai yang bisa anda gunakan adalah (top,middle, dan bottom), perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
  <title>Belajar CSS untuk Tampilan Tabel</title>
  <style type="text/css">
    table {
    border-collapse: collapse;
    width: 50%;
    }
    table, th, td {
        border: 1px solid blue;
    }
    tr.satu
    {
      height: 100px;
    }
    td.a
    {
      vertical-align: top;
    }
    td.b
    {
      vertical-align: middle;
    }
    td.c
    {
      vertical-align: bottom;
    }
  </style>
</head>
<body>
<table>
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>Kelas</th>
  </tr>
  <tr class="satu">
    <td class="a">1</td>
    <td class="b">Aris</td>
    <td class="c">3mm3</td>
  </tr>
</table>
</body>
</html>




Semisal kita simpan dengan nama table-vertical-alignment.html, lalu kita buka di browser :









Penjelasan :





Perhatikan pada bagian baris ke dua.





  • pada kolom pertama yang menggunakan class a, text ditampilkan di posisi atas, karena kita menggunakan value top pada property vertical-align;
  • pada kolom pertama yang menggunakan class b, text ditampilkan di posisi tengah, karena kita menggunakan value middle pada property vertical-align;
  • ada kolom pertama yang menggunakan class c, text ditampilkan di posisi bawah, karena kita menggunakan value bottom pada property vertical-align;




Table Padding





Property Table Padding digunakan untuk mengatur jarak dari kolom ke dalam text, konsep padding sama seperti yang telah dibawah pada tutorial tabel di HTML, serta konsep mengatur padding dengan CSS, Perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
  <title>Belajar CSS untuk Tampilan Tabel</title>
  <style type="text/css">
    table {
    border-collapse: collapse;
    width: 50%;
    }
    table, th, td {
        border: 1px solid blue;
    }
    td {
    padding: 10px;
    text-align: left;
    }
  </style>
</head>
<body>
<table>
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>Kelas</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Aris</td>
    <td>3mm3</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Taufik</td>
    <td>3mm3</td>
  </tr>
</table>
</body>
</html>




Semisal kita simpan dengan nama table-padding.html, lalu kita buka di browser :









Penjelasan :





  • pada bagian tag td kita beri property padding dengan value 10 pixel, itu yang membuat jarak pada garis kolom dan text sebesar 10 pixel.




Horizontal Dividers





Anda dapat membuat tabel dengan border yang hanya berada pada bawah kolom, nah itu adalah istilah dari horizontal dividers, perhatikan skrip berikut ini :





<!DOCTYPE html>
<html>
<head>
  <title>Belajar CSS untuk Tampilan Tabel</title>
  <style type="text/css">
    table {
    border-collapse: collapse;
    width: 50%;
    }

    th, td {
    text-align: left;
    border-bottom: 1px solid #ddd;
    }
  </style>
</head>
<body>
<table>
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>Kelas</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Aris</td>
    <td>3mm3</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Taufik</td>
    <td>3mm3</td>
  </tr>
</table>
</body>
</html>




Semisal kita simpan dengan nama table-horizontal_deviders.html, lalu kita buka di browser :









Penjelasan :





  • Tabel ditampilkan dengan border yang hanya berada di bawah kolom, karena kita memberikan property border-bottom dengan selector th,td




Hoverable Table





Anda bisa memberikan effect Hover pada baris tabel, Hover adalah event ketika ada mouse berada sebuah objek, nah dalam contoh ini kita buat ketika ada mouse di atas dari baris maka ada pergantian warna, perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
  <title>Belajar CSS untuk Tampilan Tabel</title>
  <style type="text/css">
    table {
    border-collapse: collapse;
    width: 75%;
    }
    table, th, td {
        border: 1px solid blue;
    }
    tr:hover {
      background-color: green;
    }
  </style>
</head>
<body>
<table>
  <tr class="satu">
    <th>No</th>
    <th>Nama</th>
    <th>Kelas</th>
  </tr>
  <tr class="dua">
    <td>1</td>
    <td>Aris</td>
    <td>3mm3</td>
  </tr>
  <tr class="tiga">
    <td>2</td>
    <td>Budi</td>
    <td>3mm3</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Cika</td>
    <td>3mm3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Doni</td>
    <td>3mm3</td>
  </tr>
</table>
</body>
</html>




Semisal kita simpan dengan nama table-hover.html lalu kita buka di browser hasilnya :









Penjelasan :





  • kita membuat selector tr:hover untuk memberikan event hover pada tag <tr> lalu kita menset property background-color dengan value warna hijau, sehingga ketika ada mouse diatas baris dari tabel akan berganti dengan warna hijau.




Striped Tables





Anda dapat juga membuat tabel dengan warna belang – belang, tabel tersebut kita kenal dengan nama Striped Tables,  kita akan memanfaatkan nth-child(even) untuk baris genap, dan nth-child(odd) untuk ganjil.





nah perhatikan contoh dibawah ini :





<!DOCTYPE html>
<html>
<head>
  <title>Belajar CSS untuk Tampilan Tabel</title>
  <style type="text/css">
    table {
    border-collapse: collapse;
    width: 75%;
    }
    table, th, td {
        border: 1px solid blue;
    }
    tr:nth-child(even)
    {
      background-color: salmon;
    }
  </style>
</head>
<body>
<table>
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>Kelas</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Aris</td>
    <td>3mm3</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Budi</td>
    <td>3mm3</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Cika</td>
    <td>3mm3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Doni</td>
    <td>3mm3</td>
  </tr>
</table>
</body>
</html>




Semisal kita simpan dengan nama table-stripted.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :









Penjelasan :





  • Terlihat untuk baris pada tabel warnanya belang pink dan putih, hal tersebut karena kita membuat selector tr:nth-child(even) dengan property background color dan value salmon, hal tersebut membuat baris genap akan berwarna salmon ya seperti pink – pink gitu..




Baik itu dulu kawan beberapa hal yang bisa anda gunakan untuk memanipulasi tampilan dari tabel dengan menggunakan Skrip CSS, jika ada yang ingin menambahkan atau mendiskusikan silahkan di kolom komentar, baik sekian dulu sampai jumpa di tutorial CSS selanjutnya.


Tags:

Post a Comment (0)

Lebih baru Lebih lama