Kita akan membuat desain tabel. kita akan belajar tentang
mempercantik tabel menggunakan CSS pertama kita akan membuat sebuah tabel
seperti di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Cara
Design Table Dengan CSS | www.malasngoding.com</title>
<link
rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<h1>Cara Design
Table Dengan CSS | Ari Ilmu</h1>
<h4>Design
table 1</h4>
<table
class="table1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Usia</th>
</tr>
<tr>
<td>1</td>
<td>Andi
Saputra</td>
<td>Magelang</td>
<td>21</td>
</tr>
<tr>
<td>2</td>
<td>Budi
Budiman</td>
<td>Jakarta</td>
<td>24</td>
</tr>
<tr>
<td>3</td>
<td>Calvin
Sanusi</td>
<td>Malang</td>
<td>29</td>
</tr>
<tr>
<td>4</td>
<td>Diki</td>
<td>Bandung</td>
<td>24</td>
</tr>
<tr>
<td>5</td>
<td>Malas
Ngoding</td>
<td>Medan</td>
<td>23</td>
</tr>
</table>
</body>
</html>
sekarang buat CSS nya bisa langsung ke file index tabel nya tau bisa
buat baru. kalo kita buat baru cantungkan nama file tang di buat
seperti style.css
.table1 {
font-family:
sans-serif;
color: #444;
border-collapse:
collapse;
width: 50%;
border: 1px solid
#f2f5f7;
}
.table1 tr th{
background: #35A9DB;
color: #fff;
font-weight: normal;
}
.table1, th, td {
padding: 8px 20px;
text-align: center;
}
.table1 tr:hover {
background-color:
#f5f5f5;
}
.table1 tr:nth-child(even) {
background-color:
#f2f2f2;
}
hasil setelah di eksekusi di browser anda
___________________________________________________________________
Cara Design Table Dengan CSS | Ari Ilmu
___________________________________________________________________
Komentar
Posting Komentar