DaunKoder
HTML

Belajar HTML: Membuat Tabel di HTML

Tabel merupakan salah satu cara yang bisa kita lakukan untuk menampilkan data.

Tag untuk Membuat Tabel

Untuk membuat tabel sederhana di HTML kita bisa menggunakan tag-tag berikut:

  1. <table>, tag untuk membuat tabel
  2. <tr>, tag untuk membuat baris (row)
  3. <td> tag untuk membuat sel (data)

Contoh tabel sederhana seperi berikut:

<table>
  <tr>
    <td>Nama</td>
    <td>Usia</td>
  </tr>
  <tr>
    <td>Toni</td>
    <td>24 Tahun</td>
  </tr>
</table>

Menjadi:

Tabel Sederhana

Untuk membuat tabel yang lebih lanjut lagi kita bisa menggunakan tag-tag berikut:

  1. <thead>, tag untuk membuat kepala tabel
  2. <tbody>, tag untuk membuat tubuh tabel
  3. <tfoot>, tag untuk mebuat kaki tabel
  4. <th>, tag untuk membuat judul pada <thead>

Contoh tabel lebih lanjut seperti berikut:

<table>
  <thead>
    <tr>
      <th>Nama</th>
      <th>Penghasilan per bulan</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Toni</td>
      <td>3 Juta</td>
    </tr>
    <tr>
      <td>Romi</td>
      <td>5 Juta</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>8 Juta</td>
    </tr>
  </tfoot>
</table>

Menjadi:

Tabel Lebih Lanjut

Menambahkan Garis

Contoh-contoh tabel tadi kenapa tidak ada garisnya?. Itu karena kita belum menambahkan garisnya. Untuk menambahkan garis kita bisa menambahkan atribut border ke elemen <table>. Agar tabel mempunyai garis nilai atribut tersebut harus 1 atau lebih. Contoh

<table border="1">
  <tr>
    <td>Nama</td>
    <td>Usia</td>
  </tr>
  <tr>
    <td>Toni</td>
    <td>24 Tahun</td>
  </tr>
</table>

Menjadi:

Border

Mewarnai Sel atau baris

Untuk mewarnainya kita bisa menambahkan atribut bgcolor ke elemen <tr> (untuk baris) atau <td> (untuk sel). Nilai atribut tersebut merupakan warna HTML atau warna dalam format hex. Contoh:

<table border="1">
  <tr bgcolor="yellow">
    <td>Nama</td>
    <td>Usia</td>
  </tr>
  <tr>
    <td bgcolor="#ff0000">Toni</td>
    <td bgcolor="#00ff00">24 Tahun</td>
  </tr>
</table>

Menjadi:

Warna

Mengatur Padding Sel

Padding merupakan jarak antara sel dengan garis. Untuk mengaturnya kita dapat menambahkan atribut cellpading ke elemen <html>. Nilai atribut tersebut harus angka. Contoh:

<table border="1" cellpadding="10">
  <tr>
    <td>Nama</td>
    <td>Usia</td>
  </tr>
  <tr>
    <td>Toni</td>
    <td>24 Tahun</td>
  </tr>
</table>

Menjadi:

Padding

Merentangkan Sel

Untuk merentangkan (mepertinggi/memperlerbar) kita dapat menggunakan atribut berikut

  1. rowpan, merentangkan menjadi beberpa baris (mempertinggi)
  2. colspan, merentangkan menjadi beberapa kolom (memperlebar)

Nilai dua atribut tersebut harus angka. Contoh

<table border="1">
  <tr>
    <td rowspan="2">Nama</td>
    <td colspan="2">Penghasilan</td>
  </tr>
  <tr>
    <td>Blog</td>
    <td>YouTube</td>
  </tr>
  <tr>
    <td>Toni</td>
    <td>1,5 Juta</td>
    <td>1,5 Juta</td>
  </tr>
</table>

Menjadi:

Merentangkan Sel

Menambahkan Elemen Lain ke Sel

Sebernarya, kalian bisa menambhakan link, gambar, video, dsb ke sel. Kalian hanya menambahkan elemen tersebut ke sel. Conoth

<table border="1">
  <tr>
    <td>Gambar</td>
    <td>Nama</td>
    <td>Usia</td>
  </tr>
  <tr>
    <td>
      <img
        src="https://daunkoder.netlify.com/assets/static/favicon.7b22250.a84f0a46e1b3bb8f74d682591b53af4d.png"
      />
    </td>
    <td>Toni</td>
    <td>24 Tahun</td>
  </tr>
</table>

Menjadi:

Menambahkan elemen lain

Kesimpulan

Membuat tabel di HTML mudahkan?. Agar kalian lebih hebat kalian harus sering-sering latihan. Oke?