Achmad Hamdan,M.

Pd

MATERI

“PENERAPAN CSS PADA TABEL”

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 :

Keterangan gambar

Margin Daerah paling diluar yang membatasi dengan elemen HTML yang lainnya dan tidak
berwarna

Border Border mengelilingi padding dan content. Garis yang mempunyai warna dan
ketebalan

Padding Area yang mengelilingi content. Warna padding dipengaruhu oleh background dari
box

Content Isi dari box, bisa berupa teks maupun gambar

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 margin-border-padding.

Modul Pemrograman Web – CSS 2

Universitas Negeri Malang
 Achmad Hamdan,M.Pd

2. Pengaturan Border Tabel

CSS dapat digunakan untuk memformat border atau garis tepi dari sebuah tabel. Format yang
dapat dilakukan meliputi jenis garis (dotted, solid, dan lain-lain), warna border, ketebalan garis tepi dan
sebagainya. Demikian pula warna dari sebuah sel, dapat diatur dengan CSS.

Berikut adalah contoh penerapan style border pada tabel dengan style sebagai berikut {border:1px
solid black;} dan listing kode lengkapnya seperti dibawah ini.

Nama File: border.htm

Jika listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai berikut :

Modul Pemrograman Web – CSS 2

Universitas Negeri Malang
 Achmad Hamdan,M.Pd

Berikut ini contoh pengaturan property.

yang menghasilkan tampilan garis single pada tabel.

Nama File: borderCollapse.htm

Jika listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai berikut :

Modul Pemrograman Web – CSS 2

Universitas Negeri Malang
 Achmad Hamdan,M.Pd

Pada saat memberikan style border  {border:1px solid black;}

Hal ini berarti 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 :

3. Pengaturan Lebar Dan Tinggi Tabel

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.

Berikut ini penerapan style width dan height dalam sebuah tabel

Nama File: tinggiLebar.htm

Modul Pemrograman Web – CSS 2

Universitas Negeri Malang
 Achmad Hamdan,M.Pd

Jika listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai berikut :

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. Berikut ini penerapan style text-align dalam
sebuah tabel, dimana teks diatur dengan posisi rata kanan.

Nama File: textAlign.htm

Modul Pemrograman Web – CSS 2

Universitas Negeri Malang
 Achmad Hamdan,M.Pd

Jika listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai berikut :

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 :

Modul Pemrograman Web – CSS 2

Universitas Negeri Malang
 Achmad Hamdan,M.Pd

Berikut ini adalah beberapa contoh penggunaan style padding pada tabel :

Nama File: padding.htm

listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai berikut :

Modul Pemrograman Web – CSS 2

Universitas Negeri Malang
 Achmad Hamdan,M.Pd

Jika menginginkan padding diarea tertentu saja, misalnya padding untuk area kanan maka dapat diterap
padding-right.

Nama File: paddingRight.htm

Jika listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai berikut :

Modul Pemrograman Web – CSS 2

Universitas Negeri Malang
 Achmad Hamdan,M.Pd

6. Pengaturan Warna Pada Table

Pewarnaan pada tabel dapat digunakan untuk mengatur warna pada teks,background maupun border.

Header tabel akan berwarna green dan teksnya berwarna putih. Penerapan style diatas pada
sebuah tabel akan terlihat pada contoh berikut :

Nama File: warna.htm

Modul Pemrograman Web – CSS 2

Universitas Negeri Malang
 Achmad Hamdan,M.Pd

Jika listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai berikut :

Ketika pada td tidak diberi style seperti pada style berikut :

Akan menghasilkan tampilan tabel seperti berikut :

Modul Pemrograman Web – CSS 2

Universitas Negeri Malang
 Achmad Hamdan,M.Pd

KESIMPULAN

 Pada dasarnya elemen dari HTML adalah model box yang mempunyai properti
margin,border,padding dan content hal ini dapat digunakan untuk mendesain tampilan dari
tabel.
 CSS dapat digunakan untuk memformat border atau garis tepi dari sebuah tabel.
 penerapan style border pada tabel dengan style sebagai berikut {border:1px solid black;}
 Lebar dan tinggi dari sebuah tabel didefinisikan dalam property width dan height. Teks dalam
tabel diatur dengan properti.text-align dan vertical- align .
 Nilai dari properti text-align untuk horizontal alignment adalah left, right, atau center.
 Nilai dari properti text-align untuk horizontal alignment adalah top, bottom, or middle
 Padding adalah jarak antara isi atau content, berupa teks ataupun gambar dengan batas dalam
dari atau elemen HTML <td>.
 Pewarnaan pada tabel dapat digunakan untuk mengatur warna pada teks,background maupun
border
 Style warna akan memberikan efek warna pada tag table,data (td) dan header tabel (th).

TUGAS PRAKTIKUM

1. Buatlah tabel seperti berikut dengan mengatur warna di elemen tag <th>

2. Buatlah tabel seperti berikut dengan

Modul Pemrograman Web – CSS 2

Universitas Negeri Malang
 Achmad Hamdan,M.Pd

MATERI

“MENYAJIKAN CSS UNTUK MEMFORMAT TAMPILAN FORM”

1. Cascading style sheet pada elemen FORM

Dibawah ini adalah style yang bisa diberikan pada elemen form diantaranya pengaturan besar dan jenis
border, warna border, lebar form, batas form dari sisi layout, dan warna background dari form.

Sebenarnya masih banyak style lain yang bisa diberikan ke form.

Nama File: cssForm.htm

Modul Pemrograman Web – CSS 2

Universitas Negeri Malang
 Achmad Hamdan,M.Pd

Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut

2. Cascading style sheet pada input text

Textarea mendefinisikan kontrol input berupa area teks pada form .Elemen form textarea dapat diatur
stylenya dengan menggunakan selector textarea {…}. Berikut contoh penerapan CSS untuk elemen
textarea.

Nama File: input.htm

Modul Pemrograman Web – CSS 2

Universitas Negeri Malang
 Achmad Hamdan,M.Pd

Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut.

Modul Pemrograman Web – CSS 2

Universitas Negeri Malang
 Achmad Hamdan,M.Pd

3. Cascading style sheet pada Text Field

Extfield mendefinisikan kontrol input text pada form. Berikut ini adalah contoh format CSS pada input
yang membuat efek dari input textfield menjadi seperti sisi formulir cetakan. CSS untuk textfield
menggunakan selector input. Style yang diberikan pada input textfield diantaranya warna, background,
border, jenis serta ukuran font dan masih banyak atribut lainya yang bisa digunakan untuk style textfield.

Nama File: textfield.htm

Modul Pemrograman Web – CSS 2

Universitas Negeri Malang
 Achmad Hamdan,M.Pd

Bila listing kode dijalankan akan menampilkan tampilan berikut ini :

4. Cascading style sheet pada Button

Button merupakan tombol yang dapat diklik. Pada tombol, baik submit, reset maupun button, style CSS
dapat digunakan untuk menimbulkan efek pipih (flat) pada tombol. Berikut ini adalah contoh penggunaan
CSS pada tombol flat :

Nama File: button.htm

Modul Pemrograman Web – CSS 2

Universitas Negeri Malang
 Achmad Hamdan,M.Pd

Bila listing kode diatas dijalankan akan menampilkan style button dengan efek flat/pipih seperti berikut:

Efek style juga bisa diberikan saat button dilewati mouse. Untuk memberikan efek berbeda saat button
dilewati mouse dapat menggunakan selector CSS input.button:hover . Untuk listing kode lengkapnya
adalah sebagai berikut :

Modul Pemrograman Web – CSS 2

Universitas Negeri Malang
 Achmad Hamdan,M.Pd

Nama File: button2.htm

Modul Pemrograman Web – CSS 2

Universitas Negeri Malang
 Achmad Hamdan,M.Pd

Bila listing tersebut dijalankan akan muncul tampilan form dengan keadaan yang berbeda saat mouse
berada melewatinya dan tidak melewatinya. Dibawah ini keadaan button ketika mouse tidak berada
diatasnya.

Sehingga muncul tampilan sebagai berikut :

Saat mouse melewatinya, button yang semula berwarna orange berubah menjadi biru.

5. Cascading style sheet padaradio button

Radio button merupakan bagian dari elemen input form. Saat ingin memberikan style pada radio button
dapat menggunakan selector input.selector. Contoh berikut adalah style CSS pada input yang bertipe
pilihan radiobutton :

Modul Pemrograman Web – CSS 2

Universitas Negeri Malang
 Achmad Hamdan,M.Pd

Nama File: radio.htm

Modul Pemrograman Web – CSS 2

Universitas Negeri Malang
 Achmad Hamdan,M.Pd

Untuk menerapkan style input.rd1 dan input.rd2 maka pada tag <input type="radio" > perlu memanggil
style tersebut dengan cara class=”rd1” dan class=”rd2” . Sehingga ketika listing kode diatas dijalankan
akan muncul tampilan radio button seperti berikut ini :

6. Cascading style sheet pada chexbox

Checkbox merupakan bagian dari elemen input form. Saat ingin memberikan style pada Checkbox dapat
menggunakan selector input.selector. Contoh berikut adalah style CSS pada input yang bertipe pilihan
Checkbox.

Nama File: checkbox.htm

Modul Pemrograman Web – CSS 2

Universitas Negeri Malang
 Achmad Hamdan,M.Pd

Modul Pemrograman Web – CSS 2

Universitas Negeri Malang
 Achmad Hamdan,M.Pd

Bila listing kode diatas dijalankan akan muncul tampilan checkbox seperti berikut :

KESIMPULAN

Dari paparan materi pembahasan kegiatan belajar menyajikan cascading style sheet untuk memformat
tampilan formdapat dibuat rangkuman materi sebagai berikut :

 Agar form terlihat lebih indah menarik serta mudah dalam pengontrolan desain salah satunya
memberikan style CSS.
 Dengan menggunakan style CSS akan mengurangi bebanhalamandankonsumsi bandwidth.
 style yang bisa diberikan pada elemen form diantaranya pengaturan besar dan jenis
border,warna border, lebar form, batas form dari sisi layout, dan warna background dari
elemen-elemen form.
 Elemen form dapat diatur stylenya dengan menggunakan selector form {…}.
 Elemen form textarea dapat diatur stylenya dengan menggunakan selector textarea {…}.
 Style yang diberikan pada input textfield diantaranya warna, background, border, jenis serta
ukuran font dan masih banyak atribut lainya yang bisa digunakan untuk style textfield.

Modul Pemrograman Web – CSS 2

Universitas Negeri Malang
 Achmad Hamdan,M.Pd

TUGAS PRAKTIKUM

1. Buatlah form dilengkapi CSS dengan menggunakan elemen fieldset, textfield dan select.

2. Buatlah form ilengkapi CSS dengan menggunakan elemen textfield,radio button serta select seperti
contoh berikut ini

Modul Pemrograman Web – CSS 2

Universitas Negeri Malang