Bab VI : Belajar CSS bagian 5 ( List | Tabel )

Sebelumnya saya membahas :
Bab V : Belajar CSS bagian 4 ( Boder | Margin | Padding )
Mari kita lanjut ketahap berikutnya, yaitu : Bab VI : Belajar CSS bagian 5 ( List / Tabel )

Bab V : Belajar CSS bagian 4 ( List | Tabel )
Kalian akan mempelajari tentang :
A. Mendesain element list dengan CSS
B. Mendesain tabel dengan CSS

1. Cara mendesain border tabel dengan CSS
2. Mengatur border tabel menjadi satu garis border dengan CSS
3. Menentukan lebar dan tinggi tabel dengan CSS
4. Mengatur perataan tulisan dengan CSS
5. Membuat padding tabel dengan CSS
6. Mengatur warna tabel dengan CSS

Tahap Sebelumnya | Bab V : Belajar CSS bagian 4 ( Border | Margin | Padding ) |

Disini saya menggabungkan materi List dengan tabel karena materi list sangat sedikit maka saya gabungkan dengan materi tabel.

   A. Mendesain daftar (List)

     Pasti tahu kan list itu ada yang berupa titik, nomer tetapi bagaimana caranya menggantinya dengan yang lain ? Maka dari itu mari kita simak rumusnya bersama-sama :

ul {list-style-type:bentuknya;}

# Keterangan :
bentuknuya : dapat kamu gantidengan kode dibawah ini :

• circle : dalam bentuk lingkaran
• squeare : dalam bentuk persegi
• upper-roman : dalam bentuk angka romawi
• lower-alpha : dalam bentuk huruf alphabet kecil

   Atau bisa di ganti dengan gambar yang kamu inginkan (jangan terlalu besar gambarnya), Rumusnya yaitu :

a) ul { list-style-image: url('url gambarnya');}
cara diatas bisa diterapkan untuk firefox, chrome dan safari tetapi tidak untuk IE dan opera, maka menggunakan cara b

b) ul {list-style-type: none; padding: 0px; margin: 0px;}
li { background-image: url('url gambarnya');background-repeat: no-repeat;background-position: 0px 5px; padding-left: 14px; }

# Keterangan :
yang saya warnai biru itu kode dimana kamu atur besar kecilnya gambar dari list

yang c adalah cara yang lebih simple :
c) ul {list-style: square url("url gambarnya");}

   B. Mendesain Tabel


   1. Menentukan border tabel ( Table Borders )
     caranya sama dengan materi sebelumnya ( cara membuat border pada bweb ) , Rumusnya yaitu :

table, th, td {border:desain border;}

# Keterangan :
desain border  : dapat kamu isi sesuai keinginan kamu, besar border (px) jenis border dan warna border
untuk melihat kembali jenis border masuk ke materi sebelumnya

     
   2. Jadikan 1 border ( Collapse Table Border )
    Saya sedikit bingung saat menentukan judulnya, tetapi initinya yaitu mengatur border tabel menjadi 1 border (biasanya pada border tabel yang defauft memiliki  2 border ), untuk mengaturnya maka gunakan rumus di bawah ini :

table {border-collapse:collapse;}
table,th, td {border: 2px outline red;}

# Keterangan :
border-collapse:collapse; silahkan tambahkan kode ini

   3. Atur lebar dan tinggi Tabel ( Table Width & Height )
     Rumusnya yaitu :

table {width:lebarnya;}
th {height:Tingginya;}

#Keterangan :
lebarnya : silahkan kamu atur sendiri berapa (px)
tingginya : silahkan kamu atur sendiri berapa (px)

   4. Keselarasan tulisan Tabel ( Text-Alignment
     Rumusnya yaitu :

a) td {text-align:rataan;} 
b) td {height:tingginya;vertical-align:letaknya;}
    (yang b di gunakan jika kamu ingin mengatur rataan atas bawah )

# Keterangan :
rataan : diganti dengan keinginan kamu center, left, right, justify
tingginya : silahkan kamu atur sendiri berapa (px)
letaknya : bisa kamu masukan dengan kode bottom ( bawah ) middle ( tengah ) dan top ( atas )

   6. Atur padding tabel ( Table Padding )
    Padding yaitu jarak antara border dengan isi di dalam border, rumusnya yaitu :

td {padding:besar padding;}


# Keterangan :
besar padding : bisa kamu gandi sesuai keinginan kamu (px)

   7. Warna Tabel ( Table Color )
     cara ini merupakan gabungan antara desain border, warna tulisan dan warna background, rumusnya yaitu :

table, td, th {border:desain border;}
th {background-color:warna background;color:warna tulisan;}


# Keterangan :
warna tulisan : dapat kamu ganti dengan HEX, RGB atau kata warna b. inggris
warna background : dapat kamu ganti dengan HEX, RGB atau kata warna b. inggris
desain border : dapat kamu isi sesuai keinginan kamu, besar border (px) jenis border dan warna border

 

| Bab VII : Belajar CSS3 Bagian 1 ( Perkenalan | Box model | Box Shadow ) | Tahap Berikutnya

Farkryzer