Belajar CSS : Table

posted in: Tutorial Pemrograman | 0

Tampilan tabel HTML dapat dibuat style-nya dengan CSS. Properti yang tersedia untuk table cukup lengkap, seperti: border, lebar dan tinggi, alignment teks, padding, warna.

Table Borders

Property border dipakai untuk menentukan border table dalam CSS.

Contoh di bawah ini menetapkan border black untuk elemen table, th, dan td:


table, th, td {
border: 1px solid black;
}

Perhatikan bahwa hasil dalam contoh diatas akan double border. Hal ini karena baik eleman table dan th  atau td memiliki border yang terpisah.

Untuk menampilkan boder tunggal untuk tabel, menggunakan properti border-collapse.

Collapse Borders

properti border-collapse mengatur apakah border tabel akan di satukan atau di pisahkan :


table {
border-collapse: collapse;
}

table, th, td {
border: 1px solid black;
}

Table Width dan Height

Lebar dan Tinggi table didefinisikan dengan width dan height properti.

Contoh di bawah ini menetapkan lebar tabel sampai 100%, dan tinggi  th menjadi 50px:


table {
width: 100%;
}
th {
height: 50px;
}

Table Text Alignment

Posisi teks dalam tabel dapat diatur secara horizontal dan vertical. Properti text-align menetapkan alignment horisontal, seperti kiri, kanan, atau tengah:


td {
text-align: right;
}

Properti vertical-align menetapkan alignment vertikal, seperti atas, bawah, atau tengah:


td {
height: 50px;
vertical-align: bottom;
}

Table Padding

Untuk mengontrol ruang antara border dan konten dalam sebuah tabel, gunakan properti padding di td dan th elemen:


td {
padding: 15px;
}

Table Color

Untuk menentukan warna border, dan warna teks dan latar belakang elemen th:


table, td, th {
border: 1px solid green;
}

th {
background-color: green;
color: white;
}

Leave a Reply