Membuat Tabel Pada HTML

Membuat Tabel Pada HTML

Salah satu cara atau format untuk menampilkan informasi dalam web adalah dengan menggunakan tabel.

Tabel terdiri dari 4 unsur:

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

1. Tag untuk membuat tabel pada HTML

Ada beberapa tag untuk membuat tabel pada HTML:

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

Tag yang paling penting adalah tag <table>, <tr>, dan <td>. Sementara tag yang lainnya hanya tambahan (opsional), boleh digunakan boleh tidak.

Contoh:

<!DOCTYPE html>

<html>

<head>

         <title>Membuat Tabel</title>

</head>

<body>

       <table>

 

 

         <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>

</body>

</html>

Hasilnya:

Agar Tabelnya memiliki garis, Kalian bisa menambahkan atribut border="1" di dalam tag <table>.

<!DOCTYPE html>

<html>

<head>

         <title>Membuat Tabel</title>

</head>

<body>

       <table border=”8”>

         <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>

</body>

</html>

Hasilnya:

Nilai "8" pada atribut border adalah ukuran garisnya. Semakin besar ukuran atau nilainya, maka akan semakin besar pula ukuran garisnya.

Nilai "1" adalah ukuran garis yang paling kecil.

 

2. Mengatur jarak sel pada Cellpadding

Atribut cellpadding berfungsi mengatur jarak teks dengan garis di dalam sel. Atribut ini dapat ditempatkan pada tag <table>.

Contoh:

<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:

Nilai "10" pada cellpadding adalah ukuran jarak antara teks sel dengan garis.

3. Menambahkan warna pada sel dan baris

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

Contoh:

<table border=”1” cellpadding=”10”>

         <tr>

            <td bgcolor=”yellow”>Baris 1 Kolom 1</td>

            <td>Baris 1 Kolom 2</td>

       </tr>

       <tr bgcolor=”green”>

            <td>Baris 2 Kolom 1</td>

            <td>Baris 2 Kolom 2</td>

       </tr>

</table>

Hasilnya:

4. Menggabungkan sel tabel

Atribut yang digunakan untuk menggabungkan sel tabel yaitu rowspan dan colspan:

  • rowspan untuk menggabungkan baris;
  • colspan untuk menggabungkan kolom.

Atribut ini bisa ditempatkan pada tag <td> atau <th>.

<table border=”1”>

         <tr>

             <th rowspan=”2” bgcolor=”yellow”>Bulan</th>

             <th rowspan=”2” bgcolor=”green”>Hasil Panen</th>

        </tr>

         <tr>

             <th>Padi</th>

            <th>Kacang</th>

        </tr>

         <tr>

            <td>Januari</td>

            <td>500kg</td>

            <td>231kg</td>

       </tr>

       <tr>

            <td>Februari</td>

            <td>342kg</td>

            <td>423kg</td>

       </tr>

        <tr>

            <td>Maret</td>

            <td>432kg</td>

            <td>124kg</td>

       </tr>

       <tr>

            <td>April</td>

            <td>453kg</td>

            <td>523kg</td>

       </tr>

</table>

Hasilnya:

Download Tutorial