Minggu, 29 Mei 2022

Cara membuat Tabel dengan HTML

Untuk membuat tabel dengan mengunakan HTML (Hypertext Markup Language) hal yang perlu disiapkan adalah Aplikasi Teks Editor seperti Notepad, Notepad++ Downloads  atau bisa juga menggunakan Sublime Download

Sebelumnya temen - temen harus memahami Tag - tag yang digunakan dalam pembutan sebuah tabel dengan menggunakan bahasa pemrograman HTML, berikut ini Tag - tag yang digunakan dalam pembuatan tabel dengan HTML :

Untuk membuat tabel di dalam HTML, kita membutuhkan tag-tag berikut:

Tag <table>
Tag <thead>
Tag <tbody>
Tag <tfoot>

Tag <table> sebagai kontainer.
Sedangkan tag <thead> sebagai tempat kita meletakkan nama kolom (baris paling atas sendiri).
dan tag <tbody> adalah tempat kita menampilkan data.
dan yang terakhir adalah tag <tfoot> untuk membuat “footer” atau bagian bawah dari suatu tabel.
4 tag di atas adalah tag yang mendefinisikan struktur dasar untuk setiap bagian dari tabel.

Sedangkan untuk mendefinikan baris dan kolom, kita membutuhkan tag-tag berikut:
Tag <tr> (table row) untuk mendefinisikan tiap baris pada tabel.
Tag <td> (table data) untuk mendefinisikan tiap sel pada tabel.
Tag <th> (table head) untuk mendefinisikan tiap nama kolom pada tabel.

Contoh : 

<table>
  <!-- Bagian kepala tabel -->
  <thead>
    <tr>
      <th>Baris</th>
      <th>Kolom</th>
    </tr>
  </thead>
  <!-- Bagian body tabel -->
  <tbody>
    <tr>
      <td>Baris 1, Kolom 1</td>
      <td>Baris 1, Kolom 2</td>
    </tr>
    <tr>
      <td>Baris 2, Kolom 1</td>
      <td>Baris 2, Kolom2</td>
    </tr>
    <tr>
      <td>Baris 3, Kolom 1</td>
      <td>Baris 3, Kolom2</td>
    </tr>
  </tbody>
</table>

Maka hasilnya adalah sebagai berikut : 

BarisKolom
Baris 1, Kolom 1Baris 1, Kolom 2
Baris 2, Kolom 1Baris 2, Kolom 2
Baris 3, Kolom 1Baris 3, Kolom 2

Selain tag yang perlu temen ketahui adalah Atribut dari masing - masing tag, diantaranya adalah sebagai berikut : 

  1. width : untuk mengatur lebar tabel
  2. height : untuk mengatur tinggi table
  3. border : untuk memberi dan mengatur garis tabel
  4. cellspacing : untuk mengatur spasi antar cell
  5. cellpadding : untuk mengatur garis dengan isi tabel
  6. colspan : untuk menggabungkan kolom
  7. rowspan : untuk menggabungkan baris
  8. dsb. (silahkan temen - temen browsing lagi di mbah google)


Latihan :


<html>
<h2 align='center'> LATIHAN MEMBUAT TABEL </h2>
<table align='center' width='500' border='1' cellspacing='2'>
  <!-- Bagian kepala tabel -->
  <thead>
    <tr>
      <th align='center'>No</th>
      <th>Nama</th>
  <th align='center'>L/P</th>
  <th>Alamat</th>
  <th>Keterangan</th>
    </tr>
  </thead>
  <!-- Bagian body tabel -->
  <tbody>
    <tr>
      <td align='center'>1</td>
      <td>Malla </td>
  <td align='center'>P </td>
  <td>Lampung </td>
  <td>Anggota </td>
    </tr>
    <tr>
      <td align='center'>2</td>
      <td>Rendy</td>
  <td align='center'>L </td>
  <td>Jakarta </td>
  <td>Anggota </td>
    </tr>
    <tr>
      <td align='center'>3</td>
      <td>Ari</td>
  <td align='center'>L </td>
  <td>Surabaya </td>
  <td>- </td>
    </tr>
  </tbody>
</table>
</html>

Kalo temen sudah mengerti, silahkan temen - temen buka Aplikasi tersebut dan kemudian ketikan script sebagai mana contoh latihan diatas, kemudian simpan dengan nama file misalnya (contoh.html) lalu buka dengan aplikasi Browser seperti Chrome, Edge, Firefox atau yang lainnya dan taraaaaaa lihat hasilnya.

Demikian sedikit penjelasan tentang cara membuat tabel dengan HTML, mudah - mudahan bermanfaat.

By at

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)