Home › Blogging

Cara Membuat Tabel Dengan Kode HTML

Ketika kita ingin menampilkan tabel pada web maka diperlukan kode HTML tertentu agar bisa tampil secara benar. Berbeda dengan aplikasi word di mana kita hanya perlu menyisipkan "tabel" agar bisa memunculkan tabel.

Contoh Tabel

Untuk membuat tabel menggunakan HTML, kita dapat menggunakan elemen <table> bersama dengan elemen-elemen lain seperti <tr> (table row), <th> (table header), dan <td> (table data). Berikut adalah contoh dasar pembuatan tabel HTML untuk menampilkan tabel:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Tabel HTML</title>
</head>
<body>
    <h2>Contoh Tabel HTML</h2>

    <table border="1">
        <thead>
            <tr>
                <th>No</th>
                <th>Nama</th>
                <th>Usia</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Andi</td>
                <td>25</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Budi</td>
                <td>30</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Citra</td>
                <td>28</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Penjelasan:

<table>: Elemen utama untuk membuat tabel.
border="1": Menambahkan garis batas di sekitar tabel (opsional).
<thead>: Bagian ini berisi baris judul tabel.
<tbody>: Bagian ini berisi data tabel yang akan ditampilkan dalam baris-baris.
<tr>: Digunakan untuk membuat baris dalam tabel.
<th>: Sel dalam baris yang berfungsi sebagai judul kolom (biasanya tampil lebih tebal).
<td>: Sel dalam baris yang berisi data tabel.

Setiap baris pada bagian <tbody> akan mewakili satu entri data. Perlu diingat bahwa <th> harus berada di dalam <thead> dan <td> berada di dalam <tr>. Hasilnya akan berupa tabel sederhana dengan tiga kolom: "No", "Nama", dan "Usia". Setiap entri tabel yang berwarna merah bisa diganti sesuai yang kita inginkan. Berikut tampialnnya:

Contoh Tabel HTML

No	Nama	Usia
1	Andi	25
2	Budi	30
3	Citra	28

Apabila kita ingin menambahkan garis baru maka gunakan kode <tr> dan apabila ingin menambahkan kolom gunakan kode <td>. Kode HTML di atas merupakan kode dasar dan belum ditambahkan variasi lainnya seperti border, lebar kolom, posisi teks, dll. Semoga bermanfaat!

Belum ada tanggapan untuk "Cara Membuat Tabel Dengan Kode HTML"

Post a Comment