Home » » Penerapan CSS pada Elemen Tabel

Penerapan CSS pada Elemen Tabel

Tabel adalah data yang berisi iktisar sejumlah data informasi, biasanya berupa kata-kata dan bilangan yang tersusun  urut ke bawah dalam lajur dan deret tertentu dengan garis pembatas sehingga mudah untuk disimak. Untuk mengatur tampilan tabel di halaman web dibutuhkan css agar tampilannya menjadi lebih menarik. Dengan CSS dapat mengatur style sebuah tabel agar tampak lebih cantik dan menarik. Tersedia beberapa properti untuk mengatur style tabel diantaranya untuk mengatur border, warna background, warna teks, margin dan padding serta tak lupa properti untuk mengatur lebar kolom dan tinggi baris.

1. Konsep Dasar Model Box
Pada dasarnya elemen dari HTML adalah model box. Istilah model box ini digunakan pada saat membahas desain dan layout. Model box memungkinkan untuk membuat border disekeliling elemen dan space elemen yang saling berhubungan. Model box pada elemen HTML dapat digambar sebagai berikut :
CSS Box
No.PropertiKeterangan
1.MarginDaerah paling diluar yang membatasi dengan elemen HTML
yang lainnya dan tidak berwarna
2.BorderBorder mengelilingi padding dan content. Garis yang mempunyai warna dan ketebalan
3.PaddingArea yang mengelilingi content. Warna padding dipengaruhu oleh background dari box

Ketika menentukan width dan height dari properti elemen dengan menerapkan CSS, sebenarnya itu hanya mendefiniskan area content saja sehingga jika menginginkan keseluruhan eleme box maka harus diperhitungkan juga marginborder- padding

2. Pengaturan Border Tabel
Border adalah properti CSS yang digunakan untuk menetapkan batas sebuah tabel. Dalam mengatur border kita menetapkan beberapa nilai ketebalan garis border, dengan satuan px misalnya 1px. style garis border, misalnya solid (garis penuh), dotted (titik-titik) atau dashed (strip-strip) warna garis border, misalnya red, blue atau #ff0000. Fungsi border collapse CSS ini adalah menghilangkan jarak antara cell pada  sebuah table dan membuat hanya ada satu border pada kedua cell yang bertemu.

Berikut adalah contoh penerapan style border pada tabel dengan style sebagai berikut {border:1px solid black;border-collapse:collapse;} dan listing kode lengkapnya seperti dibawah ini.
<html>
<head>
<style>
table,th,td {border:1px solid black; border-collapse:collapse;}
</style>
</head>
<body>
<table>
<tr>
<th>Nama Depan</th><th>Nama</th></tr>
<tr><td>Adelin</td><td>Larasati</td></tr><tr>
<td>Novero</td><td>Dayandra</td></tr>
<tr><td>Adika</td><td>Dayandra</td></tr>
</table>
</body>
</html>

Hasinya adalah sebagai berikut :
Nama DepanNama
AdelinLarasati
NoveroDayandra
AdikaDayandra

Pada saat memberikan style border {border:1px solid black;} seluruh border akan efek terkena 1px solid black; baik bagian atas (top),bagian bawah(bottom), bagian kiri (left)  ataupun kanan (right). Border dapat dikenai style untuk area tertentu saja karena border dapat diseting untuk border bawah atas kanan dan kiri seperti pada style berikut :
  • border-top: 2px solid red;
  • border-right: 2px solid green;
  • border-left: 2px solid blue;
  • border-bottom: 2px solid #DD4A04;

3. Pengaturan Lebar dan Tinggi Tabel
Properti CSS yang digunakan untuk menetapkan tinggi tabel atau tinggi baris pada tabel. Jadi properti height hanya bekerja pada selector table dan tr saja. Nilai height untuk tabel bisa dinyatakan dalam px (pixel).= atau % (persen) sedangkan nilai height untuk tr biasanya dinyatakan dalam px (pixel). Lebar dan tinggi dari sebuah tabel didefinisikan dalam property width dan height Contoh berikut ini mengatur lebar tabel 100% dan tinggi dari elemen th adalah 50px. table {width:100%; } th { height:50px; }.
Nama DepanNama
AdelinLarasati
NoveroDayandra
AdikaDayandra

4. Pengaturan Text-align pada Tabel
Teks dalam tabel diatur dengan properti.text-align dan vertical-align . Nilai dari properti text-align untuk horizontal alignment adalah left, right, atau center. Td { text-align:right; } Nilai dari properti text-align untuk horizontal alignment adalah top, bottom, or middle. Td {height:50px;vertical-align:bottom; } Berikut ini penerapan style text-align dalam sebuah tabel, dimana teks diatur dengan posisi rata kanan.
<html>
<head>
<style>
table,td,th {border:1px solid black; border-collapse:collapse;}
td {text-align:right;height:50px; vertical-align:bottom;}
</style>
</head>
<body>
<table>
<tr><th>Nama Depan</th><th>Nama</th></tr>
<tr><td>Adelin</td><td>Larasati</td></tr>
<tr><td>Novero</td><td>Dayandra</td></tr>
<tr><td>Adika</td><td>Dayandra</td></tr>
</table>
</body>
</html>

Hasilnya adalah sebagai berikut
Nama DepanNama
AdelinLarasati
NoveroDayandra
AdikaDayandra

5. Pengaturan Padding Tabel
Padding adalah jarak antara isi atau content, berupa teks ataupun gambar dengan batas dalam dari sel tersebut. Style padding ini dapat diterapkan pada elemen HTML <td> (kolom). Ukuran yang digunakan dapat berupa cm, atau px (piksel). Property style untuk pengaturan padding yang mengelilingi content adalah td{ padding:15px; }

Padding dapat pula diatur untuk bagian tertentu saja, misalnya adalah : padding-top adalah jarak dari atas sel, padding-bottom adalah jarak dari bawah sel, padding-right adalah jarak dari kanan sel, padding-left adalah jarak dari kiri sel.

6. Pengaturan Warna Pada Tabel
Pewarnaan pada tabel dapat digunakan untuk mengatur warna pada teks,background maupun border. Misalnya table, td, th { border:1px solid green; } Style diatas akan memberikan efek warna green pada border table,data (td) dan header tabel (th).

Style warna juga bisa diberikan hanya pada bagian tertentu saja, misalnya bagian header tabel (th) seperti pada listing css dibawah Th { background-color:green; color:white; }
<html>
<head>
<style>
table, td, th { border:1px solid green; }
th{background-color:green;color:white;}
</style>
</head>
<body>
<table>
<tr><th>Nama Depan</th><th>Nama</th></tr>
<tr><td>Adelin</td><td>Larasati</td></tr>
<tr><td>Novero</td><td>Dayandra</td></tr>
<tr><td>Adika</td><td>Dayandra</td></tr>
</table>
</body>
</html>

Hasilnya adalah sebagai berikut :
Nama DepanNama
AdelinLarasati
NoveroDayandra
AdikaDayandra

Buatlah tabel seperti berikut dengan mengatur warna di elemen tag <th> yaitu style="background-color: #03a9f4; color: white;".
Nama ComputerProsesorRamSistem Operasi
Clnt-1IP 4 1,8 Ghz10 GbRedhat Linux
Clnt-2IP 2 Ghz C6 GbMandrake Linux
Clnt-3XP 2000+20 GbWindows

Contoh tabel yang lain :
Kompetensi KeahlianKodeJumlah DiklatJumlah KaitanPencapaian (%)
AnimasiTIKAA073800
Teknik Komputer dan JaringanTIKKJ0712121100
Teknik MultimediaTIKMM0721000
Rekayasa Perangkat LunakTIKPL070211781
Teknik Jaringan AksesTITJA069000
Posted by Nanang_Ajim
Mikirbae.com Updated at: 11:03 AM

4 komentar:

  1. Nama Vendo
    https://mahasiswa.atmaluhur.ac.id
    Artikel Yang Bagus

    ReplyDelete
  2. Hallo kak..
    Nama saya Vinti
    Nim 2022500009
    Saya mau mengucapkan terimakasih karena artikelnya sangat membantu saya, dan tetap semangat buat kakak untuk membuat artikel selanjutnya.

    Dan jangan lupa berkunjung di
    https://www.atmaluhur.ac.id

    ReplyDelete

Mohon tidak memasukan link aktif.