Close Menu

Tabel HTML

Table of Contents

Tabel dalam HTML digunakan untuk menampilkan data dalam format grid yang terdiri dari baris dan kolom. Tabel dapat digunakan untuk berbagai tujuan, seperti menampilkan data statistik, daftar produk, atau jadwal. Berikut adalah cara membuat dan mengatur tabel dalam HTML.

Struktur Dasar Tabel #

Elemen <table> #

Elemen <table> adalah elemen pembungkus untuk seluruh konten tabel. Ini adalah elemen utama untuk mendefinisikan sebuah tabel.

<table>
    <!-- Elemen lain akan ditempatkan di sini -->
</table>

    Elemen <tr> #

    Elemen <tr> digunakan untuk mendefinisikan baris dalam tabel. Setiap baris dalam tabel harus berada di dalam elemen <tr>.

    <tr>
    <!-- Sel dalam baris ini akan ditempatkan di sini -->
</tr>

    Elemen <th> #

    Elemen <th> digunakan untuk mendefinisikan sel header dalam tabel. Sel header biasanya berada di baris pertama dan digunakan untuk memberikan judul kolom.

    <th>Judul Kolom</th>

    Elemen <td> #

    Elemen <td> digunakan untuk mendefinisikan sel data dalam tabel. Ini adalah elemen yang digunakan untuk menampilkan data di setiap baris dan kolom.

    <td>Data Sel</td>

    Membuat Tabel Sederhana #

    Berikut adalah contoh tabel sederhana yang menampilkan daftar siswa dengan nama dan umur mereka:

    <!DOCTYPE html>
<html>
<head>
    <title>Contoh Tabel Sederhana</title>
</head>
<body>
    <h1>Daftar Siswa</h1>
    <table border="1">
        <tr>
            <th>Nama</th>
            <th>Umur</th>
        </tr>
        <tr>
            <td>Ali</td>
            <td>15</td>
        </tr>
        <tr>
            <td>Budi</td>
            <td>16</td>
        </tr>
        <tr>
            <td>Cici</td>
            <td>17</td>
        </tr>
    </table>
</body>
</html>

    Penjelasan:

    • border="1": Atribut border digunakan untuk menambahkan garis batas di sekitar tabel dan sel-selnya.
    • <th>: Sel header digunakan untuk memberikan judul kolom.
    • <td>: Sel data digunakan untuk menampilkan data dalam tabel.

    Atribut Tabel #

    Atribut border #

    Atribut border digunakan untuk menentukan ketebalan garis batas tabel.

    <table border="1">

      Atribut cellpadding #

      Atribut cellpadding digunakan untuk menentukan jumlah ruang di dalam setiap sel tabel.

      <table cellpadding="10">

      Atribut cellspacing #

      Atribut cellspacing digunakan untuk menentukan jumlah ruang antara sel-sel tabel.

      <table cellspacing="5">

      Atribut width dan height #

      Atribut width dan height digunakan untuk menentukan lebar dan tinggi tabel.

      <table width="100%" height="200">

      Atribut align #

      Atribut align digunakan untuk menentukan perataan tabel secara keseluruhan (kiri, tengah, atau kanan).

      <table align="center">

      Menggabungkan Sel (Colspan dan Rowspan) #

      Menggabungkan Kolom (Colspan) #

      Atribut colspan digunakan untuk menggabungkan beberapa kolom menjadi satu sel.

      <tr>
    <td colspan="2">Sel ini menggabungkan dua kolom</td>
</tr>

        Menggabungkan Baris (Rowspan) #

        Atribut rowspan digunakan untuk menggabungkan beberapa baris menjadi satu sel.

        <tr>
    <td rowspan="2">Sel ini menggabungkan dua baris</td>
    <td>Baris 1, Kolom 2</td>
</tr>
<tr>
    <td>Baris 2, Kolom 2</td>
</tr>

        Contoh Tabel Lengkap #

        Berikut adalah contoh lengkap dari tabel HTML dengan berbagai atribut dan penggunaan colspan serta rowspan:

        <!DOCTYPE html>
<html>
<head>
    <title>Contoh Tabel Lengkap</title>
</head>
<body>
    <h1>Informasi Produk</h1>
    <table border="1" cellpadding="10" cellspacing="0" width="80%" align="center">
        <tr>
            <th>Produk</th>
            <th>Harga</th>
            <th>Kategori</th>
        </tr>
        <tr>
            <td>Produk A</td>
            <td>Rp 50.000</td>
            <td rowspan="2">Kategori 1</td>
        </tr>
        <tr>
            <td>Produk B</td>
            <td>Rp 75.000</td>
        </tr>
        <tr>
            <td colspan="2">Total</td>
            <td>Rp 125.000</td>
        </tr>
    </table>
</body>
</html>

        Dengan memahami dan menggunakan elemen-elemen ini, Anda dapat membuat tabel yang informatif dan terstruktur dengan baik di halaman web Anda. Jika ada pertanyaan lebih lanjut atau bagian yang perlu diperjelas, jangan ragu untuk bertanya.

        What are your Feelings