Tampilan tabel HTML dapat sangat ditingkatkan dengan CSS:
Tabel Borders
Untuk menentukan batas tabel dalam CSS, menggunakan properti perbatasan.
Contoh di bawah ini menetapkan batas hitam untuk <table>, <th>, dan <td> elemen:
table, th, td {
border: 1px solid black;
}
Perhatikan bahwa tabel dalam contoh di atas memiliki batas ganda. Hal ini karena kedua tabel dan <th> / <td> elemen memiliki perbatasan terpisah.
Untuk menampilkan perbatasan tunggal untuk table, menggunakan properti border-collapse.
Collapse Borders
Properti border-collapse mengatur perbatasan tabel ke dalam perbatasan tunggal atau terpisah:
table{
border-collapse: collapse;
}
Table Width and Height
Lebar dan tinggi tabel didefinisikan oleh lebar dan tinggi sifat.
Contoh di bawah set lebar tabel untuk 100%, dan ketinggian <th> elemen untuk 50px:
table {
width:100%;
}
th {
height: 50px;
}
Horizontal Text Alignment
Properti text-align set alignment horisontal, seperti kiri, kanan, atau tengah.
Secara default, teks dalam <th> elemen adalah pusat-aligned dan teks dalam <td> elemen.
Contoh berikut kiri meluruskan teks dalam <th> elemen:
td {
text-align: left;
}
Vertical Text Alignment
Properti vertical-align menetapkan alignment vertikal, seperti atas, bawah, atau tengah.
Secara default, alignment vertikal teks dalam tabel adalah menengah (untuk <th> dan <td> elemen).
Contoh berikut menetapkan alignment teks vertikal ke bawah untuk <td> elemen:
td {
height: 50px;
vertical-align: bottom;
}
Table Padding
Untuk mengontrol ruang antara perbatasan dan konten dalam sebuah tabel, menggunakan properti padding di <td> dan <th> elemen:
td {
padding: 15px
}
Table Color
Contoh di bawah menentukan warna perbatasan, dan warna teks dan latar belakang <th> elemen:
table {
border: 1px solid green;
}
td {
background-color: green;
color: white;
}
0 komentar:
Posting Komentar