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:
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.
Border pada bagian tertentu
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).
Mengatur lebar dan tinggi tabel
Untuk mengatur lebar dan
tinggi tabel dapat menggunakan property width dan height.
Pengaturan Text-Align pada tabel
Teks dalam tabel diatur
dengan properti.text-align dan vertical-align
Pengaturan Padding Pada Tabel
Padding adalah jarak
antara isi atau content, berupa teks ataupun gambar dengan batas dalam dari sel
tersebut.
Pengaturan Warna Pada Tabel
Pewarnaan pada tabel
dapat digunakan untuk mengatur warna pada teks,background maupun border.
Buatlah halaman web
sebagai berikut.
Simpan file tersebut
dengan nama border.html
Pada contoh diatas terlihat
bahwa border yang dihasilkan ada dua garis. Bila ingin membuat border dengan 1
garis maka dapat menggunakan properti border-collapse.
contoh penulisan: table {border-collapse: collapse;}
Maka tabel yang
dihasilkan akan menjadi seperti berikut.
Buatlah halaman web
sebagai berikut.
Simpan
file tersebut dengan nama border2.html
Buatlah halaman web
sebagai berikut.
Simpan file tersebut
dengan nama ukuran.html
Buatlah halaman web
sebagai berikut.
Simpan file tersebut
dengan nama align.html
Buatlah halaman web
sebagai berikut.
Simpan dengan nama
padding.html
Buatlah halaman web
sebagai berikut.
Simpan file tersebut
dengan nama warna1.html
Contoh 2
Simpan dengan nama
warna2.html
Senin, 24 Desember 2018
Cascading Style Sheet pada Tabel (CSS)
Tags
# Cascading Style Sheet (CSS)
About Anonim
Cascading Style Sheet (CSS)
Tags :
Cascading Style Sheet (CSS)
Langganan:
Posting Komentar (Atom)
Post Top Ad
Responsive Ads Here
Author Details
Templatesyard is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design. The main mission of templatesyard is to provide the best quality blogger templates which are professionally designed and perfectlly seo optimized to deliver best result for your blog.
Tidak ada komentar:
Posting Komentar