Skip to main content

HTML Dasar Part 11: Cara Membuat Tabel di HTML

cara membuat tabel HTML

Sekarang kita belajar koding HTML, tentang bagaimana cara membuat tabel HTML. Sebuah tabel sangat diperlukan untuk menampilkan data secara struktural, misalnya daftar nilai mahasiswa, hasil laporan penelitian, dsb.


Struktur Tabel

Sebelum mempelajari bagaimana cara membuat tabel di HTML, ada baiknya dulu kita pelajari struktur dari sebuah tabel. Meskipun dari kalian sudah banyak yang tahu struktur dari sebuah tabel, namun tidak ada salahnya kita mengulang.

struktur tabel

Seperti pada gambar diatas, tabel terdiri tiga unsur yaitu : baris, kolom, dan cell.

Cara Membuat Tabel Pada HTML

Untuk cara bikin tabel di HTML, kita memerlukan minimal 3 jenis tag, yakni tag <table>, tag <tr>, dan tag <td> :

  • Tag <table> berfungsi sebagai pembungkus dan termasuk block level element
  • Tag <tr> merupakan singkatan dari table row, berfungsi untuk membuat baris
  • Tag <td> merupakan singkatan dari table data, berfungsi untuk membuat cell atau kolom

Agar lebih jelas, langsung saja kita praktekkan !

Contoh penggunaan membuat tabel html


<!DOCTYPE html>
<html>
<head>
   <title>Tabel HTML</title>
</head>
<body>
<h1>Cara Membuat Tabel HTML</h1>
<table>
    <tr>
        <td>Baris ke 1 - Kolom ke 1</td>
        <td>Baris ke 1 - Kolom ke 2</td>
    </tr>
    <tr>
        <td>Baris ke 2 - Kolom ke 1</td>
        <td>Baris ke 2 - Kolom ke 2</td>
    </tr>
</table>
</body>
</html>
 

Hasilnya :

cara membuat tabel HTML

Pada contoh diatas, kita membuat tabel dengan 2 baris dan 2 kolom, makanya kita memerlukan 2 tag <tr> yang berisikan 2 tag <td> juga.

Yang menjadi pertanyaan, apakah ini tabel? kok tidak ada garisnya?

Iya, memang seperti itulah tabel.

Untuk membuat garis tepi atau bingkai nya, kita memerlukan sebuah atribut yaitu atribut border.

Contoh penggunaan atribut border pada tabel


<!DOCTYPE html>
<html>
<head>
   <title>Tabel HTML</title>
</head>
<body>
<h1>Cara Membuat Tabel HTML</h1>
<table border="1">
    <tr>
        <td>Baris ke 1 - Kolom ke 1</td>
        <td>Baris ke 1 - Kolom ke 2</td>
    </tr>
    <tr>
        <td>Baris ke 2 - Kolom ke 1</td>
        <td>Baris ke 2 - Kolom ke 2</td>
    </tr>
</table>
</body>
</html>
 

Hasilnya :

tabel atribut border

Nah, setelah kita memberi atribut border="1" pada tag <table>, berarti kita memberitahu kepada browser untuk membuat garis tepinya sebesar 1 piksel.

Jika semakin besar nilai atribut border-nya, maka semakin tebal garis tepi atau bingkai dari tabel itu juga.


HTML menyediakan lebih banyak tag lagi agar dapat membuat tabel yang lebih kompleks. Untuk cara membuat tabel yang lebih kompleks, paltycox.com menyediakan belajar HTML Tabel Lanjutan


Sampai di sini kita sudah pelajari beberapa tag HTML yang kerap dipakai dalam pengerjaan halaman sebuah web. Selanjutnya kita akan membahas tentang cara membuat form HTML.


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar