CSS table
Hri ini saya akan belajar tentang css table.
1. Contoh table pertama yang saya pejajari
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Contoh table Pertama:</h2>
<table>
<tr>
<th>Nama depan</th>
<th>Nama Belakang</th>
</tr>
<tr>
<td>Lutfi</td>
<td>Zakariya</td>
</tr>
<tr>
<td>Lutfi</td>
<td>Zakariya</td>
</tr>
</table>
</body>
</html>
Dari script diatas, bisa dilihat bahwa <tr> adalah kolom, dan <th> adalah baris
2. contoh table 2 :
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
height: 50px;
}
</style>
</head>
<body>
<h1>Contoh table 2:</h1>
<table>
<tr>
<th>Nama</th>
<th>Kelas</th>
<th>Nilai</th>
</tr>
<tr>
<td>Lutfi</td>
<td>X rpl</td>
<td>9,5</td>
</tr>
<tr>
<td>Bagus</td>
<td>X rpl</td>
<td>9,6</td>
</tr>
<tr>
<td>Miko</td>
<td>X rpl</td>
<td>9,7</td>
</tr>
</table>
</body>
</html>
Note : Kenapa kolom Nama, Kelas, Nilai kok besar? Karena kita menggunakan th, th adalah untuk menampilkan kolom besar.
3. contoh table 3:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 8px solid #ddd;
text-align: center;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 25px;
}
</style>
</head>
<body>
<h1>Contoh table 3:</h1>
<table>
<tr>
<th>Nama</th>
<th>Kelas</th>
<th>Absen</th>
</tr>
<tr>
<td>Lutfi</td>
<td>X rpl</td>
<td>21</td>
</tr>
<tr>
<td>Bagus</td>
<td>Tata boga</td>
<td>21</td>
</tr>
<tr>
<td>Miko</td>
<td>TKR</td>
<td>21</td>
</tr>
</table>
</body>
</html>
0 komentar:
Posting Komentar