» » Table Element

Table Element

By Fadli_Computer Labels: at Januari 27, 2026

Assalamu’alaikum Wr. Wb

Pengantar

Hai bagaimana kabarnya? Semoga baik-baik saja ya teman-teman. Melanjutkan artikel yang sebelumnya membahas tentang Audio dan Video. Dan pada kesempatan kali ini akan membahas Table Element pada HTML.

Harapan saya teman-teman dapat mempraktekan dan lebih baik lagi memahami materi kali ini dengan catatan di ulang pelajaran yang sudah dipraktekan agar tidak lupa. Teman-teman mulai dari sini harus membaca dengan teliti agar tidak salah memahami materinya. Semoga sukses dan berhasil, Amin.

Praktik HTML

Pada praktik kali kita akan membahas Table yang dimana digunakan untuk menampilkan data yang disusun secara rapi agar mudah dibaca atau dimengerti.

Di dalam membuat tabel di perlukan 3 element yaitu:

1. <table> : Tag ini digunakan untuk membuat tabel yang membungkus baris dan kolom di dalamnya.
2. <tr> : Singkatan dari "tabel row" dan digunakan untuk membuat baris di dalam tabel.
3. <td> : Mewakili "tabel data" dan digunakan untuk membuat sel standar di dalam baris.

Baik kita langsung praktiknya sebagai berikut:

Contoh :
Kode html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Belajar HTML di Alami Computer</title>
</head>
<body>
    <h2>Belajar atribut table di HTML</h2>
    <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> 

Gambar 1 kode table

Gambar 2 hasil kode table

Disini tampilan bisa saja yaa!!
Baik kita akan tambahkan dengan tab border untuk melihat hasilnya.
Contoh:
Kode HTML 

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Belajar HTML di Alami Computer</title>
</head>
<body>
    <h2>Belajar atribut table di HTML</h2>
    <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>
    </table>
</body>
</html>

Gambar 3 kode table dengan menggunakan border

Gambar 4 hasil kode table dengan menggunakan border
Catatan:
Jika kita merubah nilai pada border, akan ada perubahan pada hasil kodenya atau garis pada tablenya akan lebih besar atau tebal.

Lanjut lagi membuat table menggunakan atribut cellpadding dalam HTML.
Cellpadding digunakan untuk mengatur jarak dari border sisi dalam tabel dengan isi text. Contoh kode html:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Belajar HTML di Alami Computer</title>
</head>
<body>
    <h2>Belajar atribut cellpadding dalam Tabel</h2>
    <table border="2" cellpadding="0">
        <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 3, Kolom 3</td>
        </tr>
    </table>
    <br>

    <table border="3" cellpadding="3">
        <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 3, Kolom 3</td>
        </tr>
    </table>
</body>
</html>

Gambar 5 kode-table-1-border-cellpadding.png

Gambar 6 hasil kode-table-1-border-cellpadding.png
CATATAN:
Untuk nilai atribut yang diberikan di ukur dalam satuan pixel.

Selanjutnya atribut cellspacing dalam table HTML
Cellspacing digunakan untuk mengukur jarakantara garis tepi (border) bagian dalam dan luar. Contoh kode HTML:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Belajar HTML di Alami Computer</title>
</head>
<body>
    <h2>Belajar atribut cellspacing dalam Tabel</h2>
    <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>
    </table>

    <h3>Atribut boder=1, cellspacing = 0</h3>
    <table border="1" cellspacing="0">
        <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>
    
    <h3>Atribut border=1, cellspacing = 6</h3>
    <table border="1" cellspacing="6">
        <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>

Gambar 7 kode table menggunakan spacing

Gambar 8 hasil kode table menggunakan spacing

Kesimpulan

Pembahasan tentang tabel yang digunakan untuk keperluan menampilkan data yang terstuktur dan dapa mudah dibaca atau dianalisa. Tujuan teman-teman yang membuat file html atau pemograman bisa menggunakan dengan baik dan sesuai dengan fungsi dan kelayakan pada sebuah kode-kode program yang akan dijalankan.
 
Terimakasih sudah berkunjung sampai ketemu di artikel selanjutnya, jangan lupa ikuti chanel kami yaitu : 

YouTube: Alami Computer
Website: www.alamicomputer.id
Instagram: chaerullah.fadli

Daftar Pustaka: Tim Riset Alami Computer

 

3 komentar:

  1. Anonim27 Januari 2026 pukul 20.47

    artikelnya barunya keren min sudah dipraktik

    BalasHapus
  2. Anonim27 Januari 2026 pukul 21.17

    Artikelnya keren bang, jadi lebih mudah unttuk belajar

    BalasHapus
  3. afarin28 Januari 2026 pukul 03.15

    keren pak artikelnya saya sudah praktik, ditunggu artikel yg lain 8-)

    BalasHapus

Berkomentar dengan baik dan benar

Back to Top