Techno

Tabel HTML: Pengertian, Elemen, Atribut Tabel, dan Tutorial Membuat Tabel HTML

×

Tabel HTML: Pengertian, Elemen, Atribut Tabel, dan Tutorial Membuat Tabel HTML

Share this article

HTML (Hypertext Markup Language) adalah bahasa markup standar untuk membuat halaman web. Dalam pembuatan halaman web, tabel adalah salah satu elemen HTML yang sering digunakan. Tabel digunakan untuk menampilkan data dalam bentuk baris dan kolom. Dalam artikel ini, kita akan membahas pengertian tabel HTML, elemen, atribut tabel, dan tutorial membuat tabel HTML.

Pengertian Tabel HTML

Tabel HTML adalah elemen HTML yang digunakan untuk menampilkan data dalam bentuk baris dan kolom. Tabel HTML terdiri dari beberapa elemen, seperti baris, kolom, sel, dan header. Dalam tabel HTML, data ditampilkan dalam bentuk struktur yang terorganisir dengan baik sehingga mudah dibaca dan dimengerti oleh pengguna.

Elemen Tabel HTML

Tabel HTML terdiri dari beberapa elemen, seperti:

  • <table>: Elemen ini digunakan untuk membuat tabel HTML.
  • <tr>: Elemen ini digunakan untuk membuat baris dalam tabel HTML.
  • <th>: Elemen ini digunakan untuk membuat header kolom dalam tabel HTML.
  • <td>: Elemen ini digunakan untuk membuat sel kolom dalam tabel HTML.

Atribut Tabel HTML

Tabel HTML juga memiliki beberapa atribut yang dapat digunakan untuk mengatur tampilan tabel, seperti:

  • border: Atribut ini digunakan untuk menentukan tebal garis yang digunakan untuk membatasi sel dalam tabel HTML.
  • cellpadding: Atribut ini digunakan untuk menentukan jarak antara isi sel dan batas sel dalam tabel HTML.
  • cellspacing: Atribut ini digunakan untuk menentukan jarak antara sel dalam tabel HTML.
  • width: Atribut ini digunakan untuk menentukan lebar tabel HTML.

Tutorial Membuat Tabel HTML

Berikut adalah langkah-langkah untuk membuat tabel HTML:

  1. Buat sebuah dokumen HTML baru.
  2. Tambahkan elemen <table> untuk membuat tabel.
  3. Tambahkan elemen <tr> untuk membuat baris dalam tabel.
  4. Tambahkan elemen <th> untuk membuat header kolom.
  5. Tambahkan elemen <td> untuk membuat sel kolom.
  6. Ulangi langkah 3-5 untuk menambahkan baris dan kolom dalam tabel.
  7. Tutup elemen <table> untuk menyelesaikan tabel.

Contoh Kode Tabel HTML

Berikut adalah contoh kode tabel HTML:

<table border="1" cellpadding="5" cellspacing="0" width="100%"><tr><th>Nama</th><th>Alamat</th><th>Telepon</th></tr><tr><td>Andi</td><td>Jalan Riau No. 10</td><td>08123456789</td></tr><tr><td>Budi</td><td>Jalan Sudirman No. 20</td><td>08234567890</td></tr><tr><td>Cindy</td><td>Jalan Thamrin No. 30</td><td>08345678901</td></tr></table>

Dalam contoh kode di atas, kita membuat tabel dengan tiga kolom dan tiga baris. Tabel memiliki tebal garis 1, jarak antara isi sel dan batas sel adalah 5, dan jarak antara sel adalah 0. Tabel juga memiliki lebar 100% dari lebar halaman web.

Kesimpulan

Tabel HTML adalah elemen HTML yang digunakan untuk menampilkan data dalam bentuk baris dan kolom. Tabel HTML terdiri dari beberapa elemen, seperti baris, kolom, sel, dan header. Dalam tabel HTML, data ditampilkan dalam bentuk struktur yang terorganisir dengan baik sehingga mudah dibaca dan dimengerti oleh pengguna. Tabel HTML juga memiliki beberapa atribut yang dapat digunakan untuk mengatur tampilan tabel, seperti border, cellpadding, cellspacing, dan width.

Dalam pembuatan tabel HTML, kita dapat menggunakan langkah-langkah sederhana, seperti menambahkan elemen <table>, <tr>, <th>, dan <td>. Dengan memahami pengertian, elemen, atribut tabel, dan tutorial membuat tabel HTML, kita dapat membuat tabel HTML dengan mudah dan efektif.