Tutorial Blog, Tips Blogging, SEO, Belajar Syntax HTML, PHP, CSS, dan Aktifitas Coding Lainnya

Mengatur Padding dan Color Table dengan CSS

Mengatur Padding dan Color Table dengan CSS - Melanjutkan pembahasan tentang CSS Table. Beberapa properti CSS untuk mengatur sebuah table sudah dibahas sebelumnya. Di antaranya ; Mengatur table border, mengatur lebar dan tinggi table, dan mengatur text alignment pada table.

Nah, masih ada sisa properti CSS yang lain. Yaitu padding dan color. Padding berfungsi untuk mengontrol ruang antara border dan konten dalam sebuah tabel pada elemen table data <td> dan table heading <th>. Semakin besar nilai padding (dalam ukuran pixel), maka semakin besar pula ruang jarak antara border dan konten pada tabel.

Sedangkan properti color, seperti namanya, berfungsi untuk mengatur warna pada elemen tabel. Bisa untuk mengatur warna border, warna teks, ataupun warna background.

Lebih jelasnya perhatikan struktur coding di bawah ini :


<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
    border: 1px solid red;
    border-collapse: collapse;
}

th {
    background-color: green;
    color: white;
    padding: 30px;
}
</style>
</head>

<body>
<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Usia</th>
  </tr>
  <tr>
    <td>Joko</td>
    <td>Pinter</td>
    <td>48</td>
  </tr>
  <tr>
    <td>Tejo</td>
    <td>Bodo</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Siti</td>
    <td>Sulastri</td>
    <td>32</td>
  </tr>
  <tr>
    <td>Yani</td>
    <td>Wati</td>
    <td>23</td>
</tr>
</table>

</body>
</html>

Maka hasilnya :

mengatur padding dan color table

Pada script kode tersebut, border diatur warna red dengan format penulisan kodenya seperti ini border: 1px solid red. Kemudian background pada table heading <th> diatur dengan warna green dengan penulisan kode background-color: green. Sedangkan teks pada table heading <th> diatur dengan warna white dengan penulisan color: white.

Gimana? mudah kan. Semoga sedikit ini bermanfaat untuk bekal belajar CSS konco sinahu semua. Semangat coding!



0 Komentar untuk "Mengatur Padding dan Color Table dengan CSS"

Back To Top