<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>

<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>