Kamis, 30 Agustus 2018

PRAKTIKUM 10 - CSS Pada Tabel

yoo halo halo kembali lagi bersama saya disini, ya jadi di kesempatan kali ini saya akan menshare kepada kalian yaitu membuat tabel lalu memodifnya dengan css di pertemuan sebelumnya saya sudah membahas apa itu css dan kegunaanya pada html.
nah disini saya akan mengimplementasikan css tersebut kedalam bentuk tabel , fungsinya ga lain ya  untuk merapihkan dan mempercantik dokumen HTML. karena disni saya tidak akan menshare semuanya disni maka kalian bisa melihat semua kodingan dan hasilnya di LINK INI

pertama disini saya akan menjelaskan atribut pada html
Margin : "". marigin diguankan untuk menentukan ukuran pada tabel tetapi mengacu pada halaman web tersebut
Border: menentukan ukuran yang ada di bagian paling luar sebuah kontent
padding: mentukan ukuran lapisan luar sebuah konten secara kasarnya
content: konent itu sendiri

 


dapat diilustraksikan seperti itu.

 lalu kalian juga dapat memvariaskan style border contohnya yaiut
border-syle: dotted; atau dashed dan lain , dotted adalah table yang terdiri dari titik titik dan dashed terbuat dari garis lurus
disni saya akan menunjukan kepada anda border-collapse: colapse;, apa ittu border collapse  ? border collapse berfungsi untuk memisahkan setiap kollom dan row nya , terpisah disni bukan bermaksud terpisah secara harfiah dengan kata lain yaitu untuk membuat spasi pada tabble menghilang
contohnya seperti ini


 berikut adalah kodingannya
























lalu berikutnya kalian dapat memasukan gambar pada suatu tabel contoh kodingannya yaitu seperti ini





 














lalu hal terakhir yang akan saya bahas disini yaitu kombinasi pengedittan tabel dengan html dan css mulai dari warna yang ada dalam setiap kolom , pemasukkan gambar , menenutkan tabel data
kodigannya seperti ini

berikut adalah tampilan kodigan html dan cssnya, dan berikut merupakan hasil dari kodingan tersebut



mungkin sekian saja yang dapat saya sampaikan, untuk semua kodingannya anda bisa melihatnya di link diatas , termakasih telah mengunjungi blog ini
i'll  see you the next one!
waalaikumsalam



0 komentar:

Posting Komentar