Belajar CSS Table, Mengatur Tabel dengan CSS

By Adhi P. - Last updated: Friday, January 20, 2012 - Save & Share - Comments

banner438kursus Belajar CSS Table, Mengatur Tabel dengan CSS

468 60banner Belajar CSS Table, Mengatur Tabel dengan CSS

Seperti yang telah saya sampaikan di materi sebelumnya, materi belajar css kali ini membahas tentang belajar CSS table. Tabel yang terlihat biasa saja jika dibuat menggunakan html, akan terlihat lebih bagus dan meriah apabila menggunakan css. Tabel berguna sekali untuk memuat data agar terlihat lebih rapi. Untuk mengaplikasikan table dalam css, kita menggunakan table property. Contoh dibawah ini table menggunakan garis luar hitam, serta elemen th dan td


table, th, td

{

border: 1px solid black;

}

Okey, berikut ini property umum yang sering digunakan dalam table.

Border – Colaps , property ini digunakan untuk memformat tampilan border menjadi single atau double line.


table

{

border-collapse:collapse;

}

table,th, td

{

border: 1px solid black;

}

Border – Spacing, property ini digunakan untuk mengatur jarak spasi antara border dengan isi cell.


td

{

padding:15px;

}

Tabel text algiment , mengatur text dalam table. Untuk horizontal mengatur teks kanan, kiri atau tengah


td

{

text-align:right;

}

Sedangkan untuk texs align vertical mengatur teks keatas, bawah :

td

{

height:50px;

vertical-align:bottom;

}

Table – Color, digunakan untuk mengatur warna dar border, teks maupun background


table, td, th

{

border:1px solid green;

}

th

{

background-color:green;

color:white;

}

Nah, dengan berakhirnya materi CSS table ini maka berakhir juga materi belajar macam-macam style pada css. Sekedar untuk mereview, kita telah belajar dasar-dasar css dan juga style css. Saya yakin, anda sudah bisa bereksperimen dengan skrip-skrip css. Materi belajar css selanjutnya adalah mengatur model box atau kotak dalam css. Nantikan artikel-artikel kami selanjutnya!

Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.
Cara Cepat menguasai bahasa Inggris KLIK DI SINI!

 

Posted in Belajar CSS • Tags: Top Of Page