Freedom Chat

Membuat CV dengan Tabel HTML

Dalam materi ini, kita akan memanfaatkan tabel HTML untuk membuat layout Curriculum Vitae (CV) yang menarik tanpa menggunakan CSS. Tabel akan membantu kita mengatur informasi dengan rapi dan terstruktur.

Struktur CV dengan Tabel

Berikut adalah contoh struktur CV sederhana yang dibuat dengan tabel HTML:

html<!DOCTYPE html>
<html>
<head>
  <title>CV - Nama Anda</title>
</head>
<body>
  <table width="800" border="0" cellpadding="10">
    <tr>
      <td rowspan="6" width="200">
        <img src="foto.jpg" alt="Foto Anda" width="200" height="200">
      </td>
      <td colspan="2">
        <h1>Nama Anda</h1>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <strong>Alamat:</strong> Jalan Contoh 123, Kota Anda
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <strong>Telepon:</strong> 0812-3456-7890 | <strong>Email:</strong> nama@example.com
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <h2>Tentang Saya</h2>
        <p>Tuliskan paragraf singkat tentang diri Anda, latar belakang pendidikan, dan tujuan karier.</p>
      </td>
    </tr>
    <tr>
      <td><h2>Pendidikan</h2></td>
      <td><h2>Pengalaman Kerja</h2></td>
    </tr>
    <tr>
      <td>
        <table border="0" cellpadding="5">
          <tr>
            <td><strong>2020-2024</strong></td>
            <td>Sarjana Komputer, Universitas XYZ</td>
          </tr>
          <tr>
            <td><strong>2017-2020</strong></td>
            <td>SMA Negeri 1, Kota Anda</td>
          </tr>
        </table>
      </td>
      <td>
        <table border="0" cellpadding="5">
          <tr>
            <td><strong>2023-Sekarang</strong></td>
            <td>Programmer, Perusahaan ABC</td>
          </tr>
          <tr>
            <td><strong>2022-2023</strong></td>
            <td>Magang, Perusahaan XYZ</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <h2>Keterampilan</h2>
        <ul>
          <li>Pemrograman: Java, Python, HTML/CSS</li>
          <li>Desain Grafis: Adobe Photoshop, Illustrator</li>
          <li>Bahasa: Inggris (Fluent), Jepang (Dasar)</li>
        </ul>
      </td>
    </tr>
  </table>
</body>
</html>

Penjelasan Kode:

- Tag `<img>` digunakan untuk menampilkan foto profil dengan ukuran 200x200 piksel. Ganti "foto.jpg" dengan nama file foto kamu.
- Tag `<h1>` dan `<h2>` digunakan untuk judul dan subjudul.
- Tag `<strong>` digunakan untuk menonjolkan teks penting seperti alamat dan kontak.
- Tag `<table>` dalam `<table>` digunakan untuk membuat struktur data yang lebih kompleks, seperti bagian pendidikan dan pengalaman kerja.
- Atribut `border="0"` digunakan untuk menghilangkan garis tepi tabel, sedangkan `cellpadding` digunakan untuk mengatur jarak antara tepi sel dan isi sel.

Praktik: Membuat CV Sendiri

1. Buka editor teks dan buat file HTML baru.
2. Salin dan tempel kode di atas ke dalam file tersebut.
3. Ganti teks placeholder dengan informasi pribadi kamu.
4. Sesuaikan bagian pendidikan, pengalaman kerja, dan keterampilan sesuai dengan riwayatmu.
5. Simpan foto profil dengan nama "foto.jpg" dalam folder yang sama dengan file HTML.
6. Simpan dan buka file HTML di browser untuk melihat CV yang telah kamu buat.

Dengan menggunakan tabel HTML, kamu dapat membuat CV yang terstruktur dan informatif tanpa memerlukan pengetahuan CSS yang mendalam. Selamat mencoba dan semoga sukses dalam membuat CV yang menarik!