Css : Table

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 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 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


Ayo Komentar...

Posted in: Css Tutorial