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