Nama : Fachri Eka Putra
NIM : 2015 12 101
Kelas : Pagi 2
Kali ini saya akan menjelaskan tentang cara mendesain sebuah tabel dengan menggunakan Cascading Style Sheet (CSS). Cara menggunakan CSS di HTML dapat dilakukan dengan tiga cara, yaitu :
Untuk kali ini kita menggunakan External style sheet dengan membuat sendiri file css dan html-nya. Tag-tag yang kita gunakan akan saya jelaskan di bawah skrip. Berikut skrip html untuk tabelnya :NIM : 2015 12 101
Kelas : Pagi 2
Kali ini saya akan menjelaskan tentang cara mendesain sebuah tabel dengan menggunakan Cascading Style Sheet (CSS). Cara menggunakan CSS di HTML dapat dilakukan dengan tiga cara, yaitu :
- External style sheet : File css dibedakan dengan html, skrip tidak berada dalam 1 file dan kedua file harus dihubungkan;
- Internal style sheet : Skrip css berada bersama dengan skrip html, harus menggunakan tag <style> dan letaknya di dalam tag <head>;
- Inline style sheet : Skrip css digunakan hanya pada satu elemen dan diletakkan di dalam tag sebagai atribut.
 |
| skrip HTML untuk tabel |
Dan berikut ini adalah skrip dari file tabel.css :
 |
| skrip css |
Hasil dari kedua skrip di atas adalah berikut ini :
 |
| Bentuk tabel |
 |
| Bila mouse diletakkan di baris genap |
 |
| Bila mouse diletakkan di baris ganjil |
Berikut ini adalah penjelasan dari beberapa tag-tag pada html di atas :
- <link rel="stylesheet" type="text/css" href="tabel.css"> digunakan untuk menghubungkan file html dengan file css dengan nama "tabel.css"
- <th class="no"> adalah pemberian class pada bagian No dengan nama "no"
- <th class="merk"> adalah pemberian class pada bagian Nama Merk dengan nama "merk"
- <th class="negara"> adalah pemberian class pada bagian Negara dengan nama "negara"
- <tr class="ganjil"> diberikan kepada semua baris ganjil pada tabel
- <tr class="genap"> diberikan kepada semua baris genap pada tabel
- Semua class yang telah diberikan nantinya akan digunakan pada CSS
- table{
border-style:none
}- css diterapkan pada tag table
- border-style:none untuk menghilangkan garis pada border
- th{
border-style:none;
background-color:#4677FF;
border-radius:5px 5px 0px 0px;
}- css diterapkan pada tag th
- border-style:none untuk menghilangkan garis pada border
- background-color:#4677FF digunakan untuk mengubah warna background th menjadi biru muda (#4677FF)
- border-radius untuk mengatur sudut-sudut pada border th
- th.no{
padding:3px 10px;
}- css diterapkan pada tag th dengan class no
- padding digunakan untuk mengatur jarak tulisan di dalam th terhadap border
- td{
border-style:none;
}- css diterapkan pada tag td
- border-style:none untuk menghilangkan garis pada border di setiap sel
- tr.ganjil{
background-color:#FFFFFF;
}- css diterapkan pada tag tr dengan class ganjil
- background-color:#FFFFFF digunakan untuk mengubah warna background th menjadi putih (#FFFFFF)
- tr.ganjil:hover{
background-color:#67FF90;
}- css diterapkan pada tag tr dengan class ganjil dan berfungsi ketika mouse diarahkan ke baris ganjil
- background-color:#67FF90 digunakan untuk mengubah warna background th menjadi hijau muda (#67FF90)
- tr.genap{
background-color:#CBCBCB;
}- css diterapkan pada tag tr dengan class genap
- background-color:#CBCBCB digunakan untuk mengubah warna background th menjadi abu-abu (#CBCBCB)
- tr.genap:hover{
background-color:#00D72C;
}- css diterapkan pada tag tr dengan class genap dan berfungsi ketika mouse diarahkan ke baris genap
- background-color:#00D72C digunakan untuk mengubah warna background th menjadi hijau (#00D72C)
Oke, sekian post kali ini. Terima kasih!
Tabel di bawah ini adalah hasil dari skrip-skrip di atas.
| No | Nama Merk | Negara |
|---|---|---|
| 1 | Samsung | Korea Selatan |
| 2 | Sony | Jepang |
| 3 | Xiaomi | China |
| 4 | ASUS | Taiwan |
| 5 | LG | Korea Selatan |
| 6 | ZTE | China |
| 7 | lenovo | China |
| 8 | Nokia | Finlandia |
Tidak ada komentar:
Posting Komentar