CSS Tutorial : Bagaimana Meperindah Table dengan CSS

Table adalah kotak-kotak yang besarnya pasti sama besar dengan kolom dan barisnya. hanya saja table kurang sedap dipandang, terlihat membosankan seperti tanpa seni. Jadi, Saya akan menjelaskan cara mempercantik Table agar rapi dan enak dilihat dengan CSS...

Penjelasannya...


Garis Table

Cara Penggunaan :

table, td {
border: 1px solid #0000ff;
}

HTML :
<table><tr><td>1</td><td>2</td></tr></table>

Hasil :

1

2

Collapse Borders

Saya Bingung Menjelaskannya Tapi Coba Lihat Perbedaannya...

Jika Memakai :

table {
border-collapse:collapse;
}
table, td {
border: 1px solid #0000ff;
}

Hasil :

1	2
3	4

Kesimpulan : border-collapse digunakan untuk border supaya tidak double...



Ukuran Table

Cara Penggunaan :

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

HTML :
<table><tr><th>1</th><th>2</th></tr>
<tr><td>3</td><td>4</td></tr></table>

Hasil :

1	2
3	4

Posisi Horizontal Tulisan

Cara penggunaan :

table {
text-align: center;
}

Ini mudah Seperti Posting Sebelumnya Tentang Css : Text....



Warna Table

Cara Penggunaan :

th, td {
background: #8CB5D8;
color: #000;
}

Hasil :

1	2

Untuk Warna Tulisan Telah Dijelaskan Juga Di Css : Text

Kegampangan Kayanya...