Didiek
Posted on
• HTML

HTML - Table

Author

📊 pada bagian kali ini kita akan belajar tabel HTML secara singkat, berikut materinya:

Struktur Dasar Tabel

HTML menggunakan elemen-elemen berikut untuk membentuk tabel:

Tag Fungsi
<table> Wadah utama tabel
<tr> Table row (baris)
<td> Table data (sel isi biasa)
<th> Table header (judul kolom, teks otomatis tebal dan rata tengah)

📌 Contoh penggunaannya dapat kita coba sebagai berikut :

<table>
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Budi</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Ani</td>
    <td>22</td>
  </tr>
</table>

Atribut Tabel

Tabel HTML secara default tidak memiliki garis, untuk itu kita membutuhkan yang namanya atribut tabel. untuk menambahkan sebuah garis kita bisa menambahkan atribut 'border' sehingga untuk tag table nya bisa kita sisipi sebuah atribut menjadi <table border="1"> maka akan otomatis muncul garis tepi pada tabel yang memiliki ketebalan 1 piksel.

jika kamu ingin mencobanya kamu bisa menambahkan border pada contoh code sebelumnya, seperti berikut ini, 

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Budi</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Ani</td>
    <td>22</td>
  </tr>
</table>

selain itu ada juga atribut lainnya yang disebutcolspan dan rowspan dengan fungsi:

  • colspan: Menggabungkan kolom secara horizontal
  • rowspan: Menggabungkan baris secara vertikal

📌 Contoh penggunaan colspan:

<tr>
  <th colspan="2">Data Siswa</th>
</tr>

📌 Contoh penggunaan rowspan:

<tr>
  <td rowspan="2">Rina</td>
  <td>90</td>
</tr>
<tr>
  <td>85</td>
</tr>

untuk contoh tampilannya langsung kita test di bagian akhir saja ya, kita lanjut ke bagian

Semantik Tambahan (Opsional)

  • <thead>: kepala tabel (judul kolom)
  • <tbody>: isi data utama
  • <tfoot>: footer tabel (misal total, ringkasan)

untuk bisa memahami setiap fungsinya kamu bisa mencoba kode tabel.html dibawah ini.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Contoh Tabel</title>
</head>
<body>

  <h1>Data Mahasiswa</h1>

  <table border="1">
    <thead>
      <tr>
        <th>Nama</th>
        <th>Jurusan</th>
        <th>IPK</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Andi</td>
        <td>Informatika</td>
        <td>3.7</td>
      </tr>
      <tr>
        <td>Budi</td>
        <td>Teknik Sipil</td>
        <td>3.4</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">Rata-rata IPK</td>
        <td>3.55</td>
      </tr>
    </tfoot>
  </table>

</body>
</html>

kemudian silahkan buka file tabel.html dengan browser kamu, semoga bisa kamu pahami.

terimakasih sudah membaca sampai bagian akhir 👋

Related posts