-->

Iklan bawah header

Belajar HTML Part 10 - Cara Membuat Tabel di HTML

Tabel html

 Salah satu cara untuk menampilkan informasi secara singkat dan jelas di dalam web adalah dengan tabel. Tabel merupakan sebuah daftar yang berisi ikhtisar dari sebuah fakta dan juga informasi, informasi yang disajikan tersusun dalam urutan kolom dan baris.

Tabel terdiri dari 4 unsur utama:

  1. Baris
  2. Kolom
  3. Sel
  4. Garis

Lalu, bagaimanakah caranya untuk membuat tabel di HTML?

Untuk lebih jelasnya..

Mari kita bahas..

Cara Membuat Tabel di HTML

Tabel adalah susunan data di dalam baris dan kolom, atau mungkin juga pada struktur yang lebih kompleks. Dengan adanya tabel ini akan memberikan kemudahan dalam membaca data karena tersusun dengan sistematis sehingga memahaminya akan lebih mudah.

Untuk membuat tabel di web kita akan menggunakan beberapa tag yang sudah disediakan oleh HTML. Berikut tag untuk membuat tabel di HTML:

  1. <table> untuk membungkus tabelnya
  2. <thead> untuk membungkus bagian head dari tabel
  3. <tbody> untuk membungkus bagian body dari tabel
  4. <tr> (table row) untuk membuat baris
  5. <td> (table data) untuk membuat sel
  6. <th> (Table head) untuk membuat judul pada header

Tag utama untuk membuat tabel adalah Tag <table>, <tr>, dan <td>. Sedangkan tag lainnya merupakan tag tambahan (opsional), boleh digunakan boleh tidak.

Lihat contoh berikut:

<!DOCTYPE html>
<html>
    <head>
         <title>Membuat Table di HTML</title>
    </head>
    <body>
           <table border="1">
             <tr>
                  <td>baris 1 kolom 1</td>
                  <td>baris 1 kolom 2</td>
             </tr>
             <tr>
                  <td>baris 2 kolom 1</td>
                  <td>baris 2 kolom 2</td>
             </tr>
    </body>
</html>

Hasilnya:

tabel html

Mengatur Jarak Sel pada Tabel dengan Cellpadding

Untuk mengatur jarak teks dengan garis di dalam sel kita bisa menggunakan atribut cellpading pada tag <table>.

Lihat contoh berikut:

<table border="1" cellpadding="10">
       <tr>
          <td>baris 1 kolom 1</td>
          <td>baris 1 kolom 2</td>
        </tr>
        <tr>
           <td>baris 2 kolom 1</td>
           <td>baris 2 kolom 2</td>
        </tr>
</table>

hasilnya:

cellpadding

Menambahkan Warna pada Sel dan Baris

Untuk memberikan warna pada sel dan baris, kita bisa menambahkan atribut bgcolor di dalam tag <tr> (untuk baris) dan tag <td> untuk sel.

Lihat contoh berikut:

<table border="1" cellpadding="10">
       <tr>
          <td bgcolor="red">baris 1 kolom 1</td>
          <td>baris 1 kolom 2</td>
        </tr>
        <tr>
           <td bgcolor="#00ff80>baris 2 kolom 1</td>
           <td>baris 2 kolom 2</td>
        </tr>
</table>

Hasilnya:

color dan bgcolor

Menggabunkan Sel Tabel

Untuk menggabungkan sel, kita bisa menambahkan atribut rowspan dan colspan pada tag <td>atau <th>.

  • rowspan untuk menggabungkan baris
  • colspan untuk menggabungkan kolom.

Lihat contoh berikut:

<!DOCTYPE html>
<html>
   <head>
   <title>Membuat Table di HTML</title>
    </head>
    <body>
          <table border="1">
             <tr>
           <th rowspan="2" bgcolor="red"></th>
           <th colspan="2" bgcolor="#00ff80"></th>
             <tr>
             <tr>
           <th>head</th>
           <th>head</th>
             <tr>
                  <td>baris 1 kolom 1</td>
                  <td>baris 1 kolom 2</td>
                  <td>baris 1 kolom 3</td>
             </tr>
             <tr>
                  <td>baris 2 kolom 1</td>
                  <td>baris 2 kolom 2</td>
                  <td>baris 2 kolom 3</td>
             </tr>
             <tr>
                  <td>baris 3 kolom 1</td>
                  <td>baris 3 kolom 2</td>
                  <td>baris 3 kolom 3</td>
             </tr>
             <tr>
                  <td>baris 4 kolom 1</td>
                  <td>baris 4 kolom 2</td>
                  <td>baris 4 kolom 3</td>
             </tr>
           </table>
    </body>
</html>

Hasilnya:

atribut rowspan

Menyisipkan Elemen yang Lain ke dalam Sel

Di dalam sel pada tabel, kita bisa menambahkan atau menyisipkan elemen HTML yang lainnya, seperti gambar, video, link, dan sebagainya.

Lihat contoh berikut:

<!DOCTYPE html>
<html>
   <head>
   <title>Membuat Table di HTML</title>
    </head>
    <body>
          <table border="1">
             <tr>
           <th colspan="2" bgcolor="#00ff80"></th>
             <tr>
             <tr>
           <td rowspan="4">
              <img src=""/>
           </td>
             <tr>
                  <td>baris 1 kolom 1</td>
                  <td>baris 1 kolom 2</td>
             </tr>
             <tr>
                  <td>baris 2 kolom 1</td>
                  <td>baris 2 kolom 2</td>
             </tr>
             <tr>
                  <td>baris 3 kolom 1</td>
                  <td>
                       <ul>
                           <li></li>
                           <li></li>
                           <li></li>
                           <li></li>
                           <li></li>
                       </ul>
                  </td>
             </tr>
           </table>
    </body>
</html>

Hasilnya:

gambar di dalam tabel

Selanjutnya

Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel