CSS Tables

Table Borders

Untuk menentukan batas tabel dalam CSS, menggunakan properti border.


Contoh dibawah ini, Nano mencoba menggunakan border pada table, th, dan td :

table, th, td{
border: 1px solid white;
}

Satu Dua
Tiga Empat

Perhatikan contoh diatas, tabel memiliki garis ganda. Karena table, th, dan td memiliki garis yang terpisah. Untuk menampilkan garis tidak ganda, gunakan properti border-collapse.


Contoh dibawah ini, menggunakan properti border-collapse :

table{
border-collapse:collapse;
}
table, th, td{
border: 1px solid white;
}

Satu Dua
Tiga Empat


Lebar dan Tinggi Tabel

Lebar dan tinggi tabel didefinisikan dengan properti width dan height.


Contoh dibawah ini, lebar tabel 100% dan tinggi th 50px :

table{
width:100%;
}
th{
height:50px;
}

Satu Dua Tiga Empat
Satu Satu Satu Satu
Dua Dua Dua Dua
Tiga Tiga Tiga Tiga


Perataan Teks Tabel

Properti text-align pada tabel mengatur perataan teks secara horizontal, seperti left, right, atau center :

td{
text-align:right;
}

Satu Dua
Satu Satu
Dua Dua
Tiga Tiga

Properti vertical-align pada tabel mengatur perataan teks secara vertikal, seperti top, bottom, atau middle :

td {
height:50px;
vertical-align:bottom;
}

Satu Dua
Satu Satu
Dua Dua
Tiga Tiga


Tabel Padding

Untuk memberi ruang antara garis dan konten dalam sebuah tabel, gunakan properti padding pada elemen th dan td :

td {
padding:10px;
}

Satu Dua
Satu Satu
Dua Dua
Tiga Tiga


Warna Tabel

Untuk lebih menarik, tabel diberi warna pada border, background, atau teks :

table, td, th {
border:1px solid yellow;
}
th {
background-color:yellow;
color:black;
}

Satu Dua
Satu Satu
Dua Dua
Tiga Tiga



Semua kembali pada kretifitas atau imajinasi anda untuk mengembangkannya.

Alhamdulillah

1 comments:


Posting Komentar


Creative Commons License
CSS Tables by Nano Yulianto is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at http://nanoyulianto.blogspot.com/2010/12/css-tables.html.
Permissions beyond the scope of this license may be available at http://nanoyulianto.blogspot.com/.