Tutorial Tutorial HTML

Tutorial HTML Table: Cara Membuat Tabel di HTML

/ by | Leave a comment

Tutorial HTML

Tabel digunakan untuk menampilkan data dalam bentuk kolom dan baris.

Mendefinisikan Tabel

Untuk membuat tabel pada HTML, kita bisa menggunakan tag <html>. Tambahkan tag <tr> untuk membuat baris dan tag <td> untuk membuat sel. Semua teks yang ada dalam tag <td> adalah reguler dan rata kiri.

<!DOCTYPE html>
<html>

<head>
   <title>HTML Table</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:

HTML Tabel

Memberi Kotak/Garis pada Tabel

Untuk menambahkan kotak/garis pada tabel, bisa menggunakan atribut border="1" pada tag <table>, tetapi ini tidak disarankan untuk HTML 5 gunakan css border.

<!DOCTYPE html>
<html>

<head>
   <title>HTML Table</title>
</head>
<style>
   table,
   th,
   td {
      border: 1px solid black;
   }
</style>

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

HTML Table dengan Border

Border dalam tabel memiliki dua garis (double), untuk menyatukan garis supaya menjadi satu garis saja, bisa mengatur property border-collapse: collapse dengan css.

<!DOCTYPE html>
<html>

<head>
   <title>HTML Table</title>
</head>
<style>
   table,
   th,
   td {
      border: 1px solid black;
      border-collapse: collapse;
   }
</style>

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

HTML Table dengan Border Collapse

Memberi Judul Tabel

Tag <th> dapat digunakan untuk membuat judul tabel yang biasanya digunakan di baris pertama sebagai baris judul. Tag <th> akan menghasilkan sel dengan teks rata tengah dan tebal.

<!DOCTYPE html>
<html>

<head>
   <title>HTML Table Header</title>
</head>
<style>
   table,
   th,
   td {
      border: 1px solid black;
   }
</style>

<body>
   <table>
      <tr>
         <th>CustomerName</th>
         <th>ContactName</th>
      </tr>
      <tr>
         <td>Alfreds Futterkiste</td>
         <td>Maria Anders</td>
      </tr>
      <tr>
         <td>Ana Trujillo Emparedados y helados</td>
         <td>Ana Trujillo</td>
      </tr>
   </table>
</body>

</html>

Hasilnya:

HTML Table Heading

Menambahkan Jarak anter Cell

Cellpadding digunakan untuk mengatur jarak antar kotak sel dengan tulisan di dalamnya. Cellspacing berfungsi untuk mengatur jarak antar garis kotak sel.

<!DOCTYPE html>
<html>

<head>
    <title>HTML Table Cellpadding</title>
</head>

<body>
    <table border="1" cellspacing="5" cellpadding="5">
        <tr>
            <th>CustomerName</th>
            <th>ContactName</th>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
        </tr>
        <tr>
            <td>Ana Trujillo Emparedados y helados</td>
            <td>Ana Trujillo</td>
        </tr>
    </table>
</body>

</html>

Pada HTML 5, Anda disarankan mengganti cellpadding dan cellspacing menggunakan css padding dan border-spacing.

<!DOCTYPE html>
<html>

<head>
    <title>HTML Table Cellpadding</title>
</head>
<style>
    table,
    th,
    td {
        border: 1px solid black;
        border-spacing: 5px;
        padding: 5px;
    }
</style>

<body>
    <table>
        <tr>
            <th>CustomerName</th>
            <th>ContactName</th>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
        </tr>
        <tr>
            <td>Ana Trujillo Emparedados y helados</td>
            <td>Ana Trujillo</td>
        </tr>
    </table>
</body>

</html>

Hasilnya kedua code di atas sama yaitu:

HTML Table Cellpadding Cellspacing

Menggabungkan Beberapa Sel

Kita bisa menggunakan atribut colspan pada td atau th untuk menggabungkan dua sel atau lebih menjadi satu dalam 1 kolom.

<!DOCTYPE html>
<html>

<head>
    <title>HTML Table Colspan</title>
</head>
<style>
    table,
    th,
    td {
        border: 1px solid black;
    }
</style>

<body>
    <table>
        <tr>
            <th>SupplierName</th>
            <th colspan="2">Phone</th>
        </tr>
        <tr>
            <td>Exotic Liquid</td>
            <td>(171) 555-2222</td>
            <td>(100) 555-4822</td>
        </tr>
    </table>
</body>

</html>

Hasilnya:

HTML Table Colspan

Kita bisa menggunakan atribut rowspan pada td atau th untuk menggabungkan dua sel atau lebih menjadi satu dalam satu baris.

<!DOCTYPE html>
<html>

<head>
    <title>HTML Table Rowspan</title>
</head>
<style>
    table,
    th,
    td {
        border: 1px solid black;
    }
</style>

<body>
    <table>
        <tr>
            <th>CategoryName</th>
            <th>ProductName</th>
        </tr>
        <tr>
            <td rowspan="2">Beverages</td>
            <td>Chais</td>
        </tr>
        <tr>
            <td>Chang</td>
        </tr>
        <tr>
            <td>Condiments</td>
            <td>Aniseed Syrup</td>
        </tr>
    </table>
</body>

</html>

Hasilnya:

HTML Table Rowspan

Mengatur Latar Belakang Tabel

Kita bisa mengatur warna latar belakang tabel menggunakan atribut bgcolor. Taruh di tag <table> jika ingin mengatur warna 1 tabel, tag <tr> jika ingin mengatur warna 1 baris, tag <td> jika ingin mengatur warna 1 sel saja.

<!DOCTYPE html>
<html>

<head>
    <title>HTML Table bgcolor</title>
</head>

<body>
    <table border="1" bgcolor="yellow">
        <tr bgcolor="blue">
            <th>CategoryID</th>
            <th>CategoryName</th>
            <th>Description</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Beverages</td>
            <td>Soft drinks, coffees, teas, beers, and ales</td>
        </tr>
        <tr>
            <td>2</td>
            <td bgcolor="red">Condiments</td>
            <td>Sweet and savory sauces, relishes, spreads, and seasonings</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Confections</td>
            <td>Desserts, candies, and sweet breads</td>
        </tr>
    </table>
</body>

</html>

Hasilnya:

HTML Table bgcolor

Pada HTML 5 disarankan menggunakan css background-color daripada atribut bgcolor dengan hasil yang sama, seperti berikut:

<!DOCTYPE html>
<html>

<head>
    <title>HTML Table bgcolor</title>
</head>
<style>
    table,
    th,
    td {
        border: 1px solid black;
    }
</style>

<body>
    <table style="background-color: yellow">
        <tr style="background-color: blue">
            <th>CategoryID</th>
            <th>CategoryName</th>
            <th>Description</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Beverages</td>
            <td>Soft drinks, coffees, teas, beers, and ales</td>
        </tr>
        <tr>
            <td>2</td>
            <td style="background-color: red">Condiments</td>
            <td>Sweet and savory sauces, relishes, spreads, and seasonings</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Confections</td>
            <td>Desserts, candies, and sweet breads</td>
        </tr>
    </table>
</body>

</html>

Selain bgcolor, kita juga bisa mengisi latar dengan gambar menggunakan atribut background pada tag table, mengatur warna garis dengan atribut bordercolor pada tag table. Tetapi, tidak disarankan di HTML 5.

Mengatur Lebar dan Tinggi

Gunakan atribut height untuk mengatur tinggi tabel dan width untuk mengatur lebar tabel. Satuan lebar dan tinggi adalah pixel, sedangkan jika diisi % maka lebar dan tinggi merupakan persentase dari lebar dan tinggi elemen di luarnya.

<!DOCTYPE html>
<html>

<head>
    <title>HTML Width Height</title>
</head>
<style>
    table,
    th,
    td {
        border: 1px solid black;
    }
</style>

<body>
    <table width="300" height="200">
        <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:

HTML Table Width Height

Menambahkan Caption

Tag <caption> menentukan caption dari tabel. Tag <caption> harus diisi tepat setelah tag table. Secara default caption pada tabel muncul di atas dengan rata tengah.

<!DOCTYPE html>
<html>

<head>
    <title>HTML Table Caption</title>
</head>
<style>
    table,
    th,
    td {
        border: 1px solid black;
    }
</style>

<body>
    <table>
        <caption>Tabel Data Customer</caption>
        <tr>
            <th>CustomerName</th>
            <th>ContactName</th>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
        </tr>
        <tr>
            <td>Ana Trujillo Emparedados y helados</td>
            <td>Ana Trujillo</td>
        </tr>
    </table>
</body>

</html>

Hasilnya:

HTML Table Caption

Header, Body, Footer Tabel

Secara umum tabel dibagi menjadi 3 bagian yaitu bagian atas (header), bagian isi (body) dan bawah (footer). Isi dari tabel biasanya dipisahkan dari header dan footer. Isi merupakan data utama, header sebagai judul atau nama atribut dari data. Footer biasanya berisi informasi tentang tabel atau kalkulasi dari data dan tabel.

Berikut tag yang digunakan antara lain:

  • <thead> membuat header yang terpisah
  • <tbody> menaruh isi data dari tabel
  • <tfoot> membuat footer yang terpisah
<!DOCTYPE html>
<html>

<head>
    <title>HTML Table</title>
</head>
<style>
    table,
    th,
    td {
        border: 1px solid black;
    }
</style>

<body>
    <table width="400">
        <thead>
            <tr>
                <td colspan="4">Ini adalah header tabel</td>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <td colspan="4">Ini adalah footer tabel</td>
            </tr>
        </tfoot>

        <tbody>
            <tr>
                <td>Baris 1, Sel 1</td>
                <td>Baris 1, Sel 2</td>
                <td>Baris 1, Sel 3</td>
                <td>Baris 1, Sel 4</td>
            </tr>
            <tr>
                <td>Baris 2, Sel 1</td>
                <td>Baris 2, Sel 2</td>
                <td>Baris 2, Sel 3</td>
                <td>Baris 2, Sel 4</td>
            </tr>
        </tbody>

    </table>
</body>

</html>

Hasilnya:

HTML Table Header Body Footer

Tag <thead> dan <tfoot> ditulis sebelum tag <tbody>, tapi <tfoot> akan tetap muncul di bagian bawah.

Tabel Bersarang

Kita bisa menambahkan tabel ke dalam tabel dengan mengisi tag <table> di dalam tag <td> atau <th> dari tabel induk.

<!DOCTYPE html>
<html>

<head>
    <title>HTML Table Nested</title>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <table width="400">
        <tr>
            <th colspan="2">My Database</th>
        </tr>

        <tr>
            <td>
                <table>
                    <tr>
                        <td>Categories</td>
                    </tr>
                    <tr>
                        <td>Products</td>
                    </tr>
                    <tr>
                        <td>Customer</td>
                    </tr>
                </table>
            </td>
            <td>
                <table width="100%">
                    <caption>Customers</caption>
                    <tr>
                        <th>CustomerName</th>
                        <th>ContactName</th>
                    </tr>
                    <tr>
                        <td>Alfreds Futterkiste</td>
                        <td>Maria Anders</td>
                    </tr>
                    <tr>
                        <td>Ana Trujillo Emparedados y helados</td>
                        <td>Ana Trujillo</td>
                    </tr>
                </table>
            </td>
        </tr>

    </table>
</body>

</html>

Hasilnya:

HTML Table Nested

Kesimpulan

  • Gunakan tag HTML <table> untuk mendefinisikan tabel
  • Gunakan tag HTML <tr> untuk membuat baris
  • Gunakan tag HTML <td> untuk membuat sel
  • Gunakan atribut HTML border atau atribut css border untuk memberikan kotak
  • Gunakan atribut CSS border-collapse untuk membuat garis tabel satu
  • Gunakan tag HTML <th> untuk membuat judul tabel
  • Gunakan atribut HTML cellpadding atau atribut CSS padding untuk memberikan jarak kotak dan tulisan
  • Gunakan atribut HTML cellspacing atau atribut CSS border-spacing untuk memberikan jarak antar garis kotak
  • Gunakan atribut HTML colspan untuk menggabungkan kolom
  • Gunakan atribut HTML rowspan untuk menggabungkan baris
  • Gunakan atribut CSS background-color untuk mengisi latar daripada atribut HTML bgcolor
  • Gunakan atribut HTML width dan height untuk mengatur lebar dan tinggi tabel
  • Gunakan tag HTML <caption> untuk memberikan caption pada tabel
  • Gunakan tag HTML <thead>, <tbody>, <tfoot> untuk memisahkan tabel antara header, isi dan footer

Leave a Comment

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

To top