Tabel Perbandingan
Pertama, salin kode css di bawah ini.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<meta content="width=device-width, initial-scale=1" name="viewport"></meta>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
text-align: center;
padding: 16px;
}
th:first-child, td:first-child {
text-align: left;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
.fa-check {
color: green;
}
.fa-remove {
color: red;
}
</style>
<head>
<body>
<h2>Tabel perbandingan</h2>
<table>
<tr>
<th style="width: 50%;">Fitur</th>
<th>Basis</th>
<th>Pro</th>
</tr>
<tr>
<td>contoh teks</td>
<td><i class="fa fa-remove"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td>contoh teks</td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td>contoh teks</td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td>contoh teks</td>
<td><i class="fa fa-remove"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td>contoh teks</td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
</table></body></head>Tabel perbandingan
| Fitur | Basis | Pro |
|---|---|---|
| contoh teks | ||
| contoh teks | ||
| contoh teks | ||
| contoh teks | ||
| contoh teks |
0 Response to "Tabel Perbandingan"
Post a Comment