Mengatur Lebar dan Tinggi Table dengan CSS - Postingan ini adalah kelanjutan dari postingan sebelumnya tentang Mengatur table border dengan CSS. Setelah mengatur border atau batas tepi, hal lain yang bisa kita lakukan pada table dengan CSS adalah mengatur lebar dan tingginya.
Untuk mengatur lebar dan tinggi table ini menggunakan properti CSS width dan height. Baik itu table rows <tr>, table data <td>, atau table heading <th>. Ukuran bisa ditentukan dalam percent ataupun pixel.
Sebagai contoh, di bawah ini adalah table dengan lebar 100% dan tinggi table heading <th> dengan ukuran 50px.
Maka hasilnya
Untuk memahami lebih jauh, konco sinahu bisa gunakan script coding di atas sebagai latihan. Silahkan diutak-atik dan ubah data-datanya. Good luck guys.
Untuk mengatur lebar dan tinggi table ini menggunakan properti CSS width dan height. Baik itu table rows <tr>, table data <td>, atau table heading <th>. Ukuran bisa ditentukan dalam percent ataupun pixel.
Sebagai contoh, di bawah ini adalah table dengan lebar 100% dan tinggi table heading <th> dengan ukuran 50px.
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 100%;
}
th {
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Pekerjaan</th>
</tr>
<tr>
<td>Paijo</td>
<td>30</td>
<td>Kuli Bangunan</td>
</tr>
<tr>
<td>Yanto</td>
<td>40</td>
<td>Tukang Kebun</td>
</tr>
<tr>
<td>Semprul</td>
<td>24</td>
<td>Pengangguran Sukses</td>
</tr>
</table>
</body>
</html>
Maka hasilnya
Untuk memahami lebih jauh, konco sinahu bisa gunakan script coding di atas sebagai latihan. Silahkan diutak-atik dan ubah data-datanya. Good luck guys.
1 Komentar untuk "Mengatur Lebar dan Tinggi Table dengan CSS"
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa