Create Table With Properti Border

Jumat, Agustus 02, 2013

Mand4rt | Untuk menentukan batas tabel dalam CSS, menggunakan properti border.

Contoh dibawah ini, utta 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 red;
}
th {
background-color:red;
color:white;
}

SATU	DUA
Satu	Satu
Dua	Dua
Tiga	Tiga

---

Semua kembali pada kretifitas atau imajinasi anda untuk mengembangkannya
.

Buruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.

Buruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.