Tabel sederhana ini menggunakan kode HTML dan CSS untuk mempercantik tampilannya.
Tabel Posting Artikel Seri Belajar HTML Dasar
| No | Judul Posting | Tanggal Terbit | Link |
|---|---|---|---|
| 1 | Pengenalan HTML | 19 Desember 2024 | 🔗 |
| 2 | Struktur Dasar HTML | 19 Desember 2024 | 🔗 |
| 3 | Elemen Teks di HTML | 19 Desember 2024 | 🔗 |
| 4 | Link dan Navigasi di HTML | 19 Desember 2024 | 🔗 |
| 5 | Gambar dalam HTML | 19 Desember 2024 | 🔗 |
| 6 | Membuat Tabel di HTML | 19 Desember 2024 | 🔗 |
| 7 | Formulir di HTML | 19 Desember 2024 | 🔗 |
| 8 | Elemen Multimedia di HTML | 19 Desember 2024 | 🔗 |
Kode HTML tabel yang saya gunakan:
- Kode html ini copy paste di posting mode tampilan HTML
<div class="tabel-artikel">
<h2>Tabel Posting Artikel Seri Belajar HTML Dasar</h2>
<table>
<thead>
<tr>
<th>No</th>
<th>Judul Posting</th>
<th>Tanggal Terbit</th>
<th>Link</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Pengenalan HTML</td>
<td>19 Desember 2024</td>
<td><a href="#" class="icon-link" title="Buka Pengenalan HTML">🔗</a></td>
</tr>
<tr>
<td>2</td>
<td>Struktur Dasar HTML</td>
<td>19 Desember 2024</td>
<td><a href="#" class="icon-link" title="Buka Struktur Dasar HTML">🔗</a></td>
</tr>
<tr>
<td>3</td>
<td>Elemen Teks di HTML</td>
<td>19 Desember 2024</td>
<td><a href="#" class="icon-link" title="Buka Elemen Teks di HTML">🔗</a></td>
</tr>
<tr>
<td>4</td>
<td>Link dan Navigasi di HTML</td>
<td>19 Desember 2024</td>
<td><a href="#" class="icon-link" title="Buka Link dan Navigasi di HTML">🔗</a></td>
</tr>
<tr>
<td>5</td>
<td>Gambar dalam HTML</td>
<td>19 Desember 2024</td>
<td><a href="#" class="icon-link" title="Buka Gambar dalam HTML">🔗</a></td>
</tr>
<tr>
<td>6</td>
<td>Membuat Tabel di HTML</td>
<td>19 Desember 2024</td>
<td><a href="#" class="icon-link" title="Buka Membuat Tabel di HTML">🔗</a></td>
</tr>
<tr>
<td>7</td>
<td>Formulir di HTML</td>
<td>19 Desember 2024</td>
<td><a href="#" class="icon-link" title="Buka Formulir di HTML">🔗</a></td>
</tr>
<tr>
<td>8</td>
<td>Elemen Multimedia di HTML</td>
<td>19 Desember 2024</td>
<td><a href="#" class="icon-link" title="Buka Elemen Multimedia di HTML">🔗</a></td>
</tr>
</tbody>
</table>
</div>Untuk mempercantik tampilan tabelnya, silakan terapkan kode css berikut ini sebelum kode <head> di mode edit html tema.
<style>
.tabel-artikel {
font-family: Arial, sans-serif;
margin: 20px auto;
width: 90%;
max-width: 800px;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.tabel-artikel h2 {
text-align: center;
margin-bottom: 15px;
color: #333;
}
.tabel-artikel table {
border-collapse: collapse;
width: 100%;
}
.tabel-artikel th, .tabel-artikel td {
border: none;
text-align: left;
padding: 10px 15px;
}
.tabel-artikel th {
background-color: #007bff;
color: white;
text-align: center;
}
.tabel-artikel tr:nth-child(even) {
background-color: #f9f9f9;
}
.tabel-artikel tr:nth-child(odd) {
background-color: #ffffff;
}
.tabel-artikel tr:hover {
background-color: #f1f1f1;
}
.icon-link {
text-decoration: none;
font-size: 16px;
color: #007bff;
transition: color 0.3s ease;
}
.icon-link:hover {
color: #0056b3;
}
</style>
Tinggalkan komentar: