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