Cascading Style Sheet pada Tabel (CSS) - MastahTeknik

Breaking

Senin, 24 Desember 2018

Cascading Style Sheet pada Tabel (CSS)

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

Tidak ada komentar:

Posting Komentar

Post Top Ad

Responsive Ads Here