Belajar HTML #5: Cara Menambahkan Gambar dan Tautan di HTML

Author Erick Irwansyah
25 Dec 2024
Html
Belajar HTML #5: Cara Menambahkan Gambar dan Tautan di HTML

Hai lagi! Gimana belajarnya? Semoga makin lancar, ya. Kali ini kita akan bahas cara membuat tabel di HTML. Tabel sering digunakan untuk menampilkan data dalam bentuk yang rapi dan terstruktur, misalnya jadwal, daftar harga, atau statistik. Yuk, kita bahas dari dasar sampai ke cara mempercantiknya!

Struktur Dasar Tabel di HTML

Di HTML, tabel dibuat dengan tag <table>. Di dalamnya, ada beberapa elemen penting:

  1. <tr> (Table Row): Untuk membuat baris tabel.
  2. <td> (Table Data): Untuk membuat sel (isi tabel).
  3. <th> (Table Header): Untuk membuat sel judul di tabel.
Contoh Dasar:
<table border="1">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
    <th>Pekerjaan</th>
  </tr>
  <tr>
    <td>Ani</td>
    <td>25</td>
    <td>Dokter</td>
  </tr>
  <tr>
    <td>Budi</td>
    <td>30</td>
    <td>Guru</td>
  </tr>
</table>

Hasilnya di browser:

Nama Umur Pekerjaan
Ani 25 Dokter
Budi 30 Guru

Keterangan:

  • <th> biasanya digunakan untuk header tabel (judul kolom). Teksnya otomatis tebal dan rata tengah.
  • <td> digunakan untuk data biasa (isi).
  • Atribut border="1" menambahkan garis tepi pada tabel (ini opsional).

Menambahkan Header dan Footer pada Tabel

Kalau tabelmu punya banyak baris, kamu bisa tambahkan bagian header atau footer supaya lebih jelas. Gunakan <thead> dan <tfoot>.

Contoh:
<table border="1">
  <thead>
    <tr>
      <th>Nama</th>
      <th>Umur</th>
      <th>Pekerjaan</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="3">Total: 2 Orang</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Ani</td>
      <td>25</td>
      <td>Dokter</td>
    </tr>
    <tr>
      <td>Budi</td>
      <td>30</td>
      <td>Guru</td>
    </tr>
  </tbody>
</table>

Hasilnya:
Tabel dengan header di atas dan footer di bawah.

Menggabungkan Sel dengan colspan dan rowspan

Kadang kamu perlu menggabungkan beberapa kolom atau baris di tabel. Gunakan atribut colspan (menggabungkan kolom) atau rowspan (menggabungkan baris).

Contoh:
<table border="1">
  <tr>
    <th>Nama</th>
    <th colspan="2">Informasi</th>
  </tr>
  <tr>
    <td>Ani</td>
    <td>25</td>
    <td>Dokter</td>
  </tr>
  <tr>
    <td rowspan="2">Budi</td>
    <td>30</td>
    <td>Guru</td>
  </tr>
  <tr>
    <td>35</td>
    <td>Dosen</td>
  </tr>
</table>

Hasilnya:

Nama Informasi
Ani 25 Dokter
Budi 35 Guru
35 Dosen

Mempercantik Tabel dengan CSS

Tabel bawaan HTML mungkin terlihat biasa aja. Tambahkan gaya dengan CSS untuk mempercantik tampilannya.

Contoh:
<table style="border-collapse: collapse; width: 100%;">
  <thead>
    <tr style="background-color: #f2f2f2;">
      <th style="border: 1px solid #ddd; padding: 8px;">Nama</th>
      <th style="border: 1px solid #ddd; padding: 8px;">Umur</th>
      <th style="border: 1px solid #ddd; padding: 8px;">Pekerjaan</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px;">Ani</td>
      <td style="border: 1px solid #ddd; padding: 8px;">25</td>
      <td style="border: 1px solid #ddd; padding: 8px;">Dokter</td>
    </tr>
    <tr style="background-color: #f9f9f9;">
      <td style="border: 1px solid #ddd; padding: 8px;">Budi</td>
      <td style="border: 1px solid #ddd; padding: 8px;">30</td>
      <td style="border: 1px solid #ddd; padding: 8px;">Guru</td>
    </tr>
  </tbody>
</table>

Hasilnya: Tabel lebih rapi dengan garis halus dan warna latar bergantian.

Praktik Langsung

Coba buat file baru dan tambahkan kode berikut:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Belajar HTML: Tabel</title>
  </head>
  <body>
    <h1>Tabel Sederhana</h1>

    <table border="1">
      <thead>
        <tr>
          <th>Nama</th>
          <th>Umur</th>
          <th>Pekerjaan</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Ani</td>
          <td>25</td>
          <td>Dokter</td>
        </tr>
        <tr>
          <td>Budi</td>
          <td>30</td>
          <td>Guru</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Simpan dan buka file ini di browser. Tabel sederhana akan muncul.

Tantangan untuk Kamu

  1. Buat tabel untuk jadwal harian kamu (misalnya Senin sampai Minggu).
  2. Tambahkan fitur seperti header, footer, dan penggabungan sel.
  3. Eksperimen dengan CSS untuk memperindah tampilan tabel.

Membuat tabel di HTML itu penting banget buat menampilkan data dengan rapi. Artikel ini membahas dasar-dasarnya sebelum kamu lanjut ke tutorial berikutnya di www.code80vity.com.

Tutorial Terkait Lainnya

Belajar HTML #1: Pengenalan HTML
Belajar HTML #1: Pengenalan HTML

Hai, gimana kabarnya? Kali ini, kita mulai dari dasar banget, yaitu HTML. Kalau kamu pernah dengar i...

Baca Tutorial
Belajar HTML #3: Cara Menambahkan Gambar dan Tautan di HTML
Belajar HTML #3: Cara Menambahkan Gambar dan Tautan di HTML

Hai lagi! Kali ini kita akan belajar bagaimana cara menambahkan gambar ke halaman web kamu. Gambar b...

Baca Tutorial
Belajar HTML #2: Struktur dasar dan Tag HTML
Belajar HTML #2: Struktur dasar dan Tag HTML

Hai! Semoga semangat belajarnya tetap tinggi. ? Kali ini kita akan membahas struktur dasar HTML lebi...

Baca Tutorial

Comments

Please login to post a comment.
No comments yet. Be the first to comment!
Previous Next
Tutorial Terkait
Belajar HTML #1: Pengenalan HTML
Belajar HTML #2: Struktur dasar dan Tag HTML
Belajar HTML #3: Cara Menambahkan Gambar dan Tautan di HTML
Belajar HTML #6: Membuat Formulir di HTML
Tutorial Terbaru
Tutorial PHP Dasar #13: Upload File dengan PHP
25 Dec 2024 Php
Tutorial PHP Dasar #12: php security (sql injection & hashing)
25 Dec 2024 Php
Tutorial PHP Dasar #11: CRUD dengan PHP dan MySQL
25 Dec 2024 Php
Tutorial PHP Dasar #10: Session dan Cookie di PHP
25 Dec 2024 Php
Tutorial PHP Dasar #9: Validasi Form di PHP
25 Dec 2024 Php