#HTML

Belajar HTML Dasar #8 - Membuat Tabel

Fahras Nur Hidayat
blog thumbnails

Tabel

Sebuah tabel digunakan untung menata data-data ataupun juga bisa digunakan untuk mengatur sebuah layout (tata letak) pada sebuah website.

Munkin cara ini sudah jarang dimanfaatkan, tapi dengan mengunakan sebuah tabel kita tetap bisa membuat situs website yang lebuh informatif.

Untuk membuat sebuah tabel ada beberapa tag yang harus dipakai secara struktural. Tag-tag itu sebagai berikut :

  1. <tabel> yang berfungsi untuk memulai proses pembuatan tabel.
  2. <tr> yang berfungsi untuk membuat baris baru.
  3. <td> adalah table data yang fungsinya untuk mengisi data-data ke dalam tabel.
  4. <th> adalah tabel header yang berfungsi untuk menandai header pada setiap data didalam tabel.

Pada versi HTML yang masih awal dikembangkan, dulu pembuatan tabel ini digunakan untuk membuat template ataupun menata layout sebuah halaman.

  
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>Belajar membuat Tabel</title>
      </head>
      <body>
        <header>
          Tabel
        </header>
        <tabel>
          <tr>
            <td>Kolom 1 Baris 1</td>
            <td>Kolom 2 Baris 1</td>
            <td>Kolom 3 Baris 1</td>
          </tr>
          <tr>
            <td>Kolom 1 Baris 2</td>
            <td>Kolom 2 Baris 2</td>
            <td>Kolom 3 Baris 2</td>
          </tr>
        </tabel>
      </body>
    </html>
  

Maka akan menampilkan seperti gambar dibwah ini.

Image Tabel.1

Untuk membuat garis tepi pada tabel yang kita buat, kita harus menambahkan atribut yang bernama border.

Agar tabel yang kita buat telihat lebih rapih dan mudah dibaca karna memisahkan data-data pada table.

Coba tambahkan border seperti code dibwah ini.

  
    <tabel border="1px">
      <tr>
        <td>Kolom 1 Baris 1</td>
        <td>Kolom 2 Baris 1</td>
        <td>Kolom 3 Baris 1</td>
      </tr>
      <tr>
        <td>Kolom 1 Baris 2</td>
        <td>Kolom 2 Baris 2</td>
        <td>Kolom 3 Baris 2</td>
      </tr>
    </tabel>
  

Dan taraa! akan menghasilkan tabel seperti ini.

Image Tabel.1

Terlihat lebih bagus bukan? jika kita menambahkan atribut border, data yang kita punya akan terlihat lebih mudah dibaca daripada kita tidak menggunakan atribut border.

Jika kita ingin membuat judul pada setiap data table, kita memerlukan tag untuk membuat header pada setiap data tabel.

Cara membuatnya coba tambahkan tag berikut dibawah tag <tabel>.

  
    <tr>
      <th>Kolom 1</td>
      <th>Kolom 2</td>
      <th>Kolom 3</td>
    </tr>
  

Jika kalian berhasil menampilakan hasil seperti ini.

Image Tabel.1

Selamat kalian berhasil membuat sebuah tabel yang sederhana.

Semoga artikel ini menjadi bermanfaat untuk kalian, Terima Kasih sudah membaca! 😉.