Monday , November 30 2020
Home » HTML 5 » Membuat Tabel di HTML

Membuat Tabel di HTML

Membuat Tabel di HTML

Lebakcyber.net – Membuat tabel di HTML. Oke jadi pada kesempatan kali ini kita akan mempelajari tentang bagaimana membuat tabel di HTML. Tabel adalah sebuah struktur yang dapat digunakan untuk menampilkan informasi dalam bentuk baris dan kolom.

Pada halaman HTML, untuk membuat sebuah tabel kita harus menggunakan tag <table>, tag <tr> untuk membuat baris dan juga tag <td> untuk membuat sebuah kolom.

Agar dapat lebih memahami mengenai bagaimana cara pembuatan tabel pada HTML, berikut ini adalah penjelasan tag yang biasanya digunakan dalam pembuatan sebuah tabel di HTML.

Advertisements
  • <table> adalah tag pembuka yang digunakan pada saat membuat sebuah tabel pada HTML, kalau kita tidak menggunakan tag <table> tersebut, maka penggunaan tag <tr> dan juga tag <td> tidak akan dapat difungsikan dengan baik.
  • <tr> merupakan sebuah tag pada HTML yang dikenal juga dengan istilah table row, tag <tr> merupakan tag yang bisa digunakan untuk membuat sebuah baris yang ada didalam tabel HTML.
  • <td> merupakan sebuah tag pada HTML yang dikenal juga dengan istilah table data, tag <td> tersebut merupakan sebuah tag yang bisa digunakan untuk membuat sebuah kolom yang ada didalam satu baris serta digunakan untuk menampilkan data kedalam tabel.
  • <th> merupakan seuah tag pada HTML yang juga dikenal dengan istilah table head atau bagian kepala yang ada pada suatu tabel.

Dan berikut ini adalah contoh bagaimana cara membuat sebuah tabel di HTML :

<html>

<head>
    <title>Membuat tabel di html - Lebak Cyber</title>
</head>

<body>
    <table border="1">
        <tr>
            <td>Ini adalah Baris 1 / kolom 1</td>
            <td>Ini adalah Baris 1 / kolom 2</td>
            <td>Ini adalah Baris 1 / kolom 3</td>
        </tr>
        <tr>
            <td>Ini adalah Baris 2 / kolom 1</td>
            <td>Ini adalah Baris 2 / kolom 2</td>
            <td>Ini adalah Baris 2 / kolom 3</td>
        </tr>
        <tr>
            <td>Ini adalah Baris 3/ kolom 1</td>
            <td>Ini adalah Baris 3/ kolom 2</td>
            <td>Ini adalah Baris 3/ kolom 3</td>
        </tr>
        <tr>
            <td>Ini adalah Baris 4/ kolom 1</td>
            <td>Ini adalah Baris 4/ kolom 2</td>
            <td>Ini adalah Baris 4/ kolom 3</td>
        </tr>
    </table>
</body>

</html>

Berdasarkan contoh pembuatan tabel HTML diatas bisa kita lihat sendiri masing-masing fungsi dari tag yang sebelumnya sudah kita bahas. Tapi pada tag <table> ditambahkan sebuah atribut border=”1″.

Advertisements

Atribut border=”1″ tersebut digunakan untuk memberikan sebuah garis tepi pada tabel yang dibuat serta nilai 1 yang diberikan pada atribut tersebut adalah nilai dari garis tepi pada tabel HTML yang kita buat.

Sekarang kita akan mencoba membuat sebuah tabel HTML dengan menggunakan tag <head> atau bagian kepala dari suatu tabel di HTML, contohnya seperti berikut ini :

<!DOCTYPE html>
<html>

<head>
    <title>Membuat tabel di html - Lebak Cyber</title>
</head>

<body>
    <table border="1">
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Kelas</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Ratna</td>
            <td>Lebak</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Dwi</td>
            <td>Rangkasbitung</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Sartika</td>
            <td>Banten</td>
        </tr>
    </table>
</body>

</html>

Nanti hasil dari perintah pembuatan tabel pada HTML diatas adalah seperti gambar dibawah ini :

Membuat Tabel di HTML

Oke sampai disini dulu pembahasan kita mengenai bagaimana cara membuat tabel pada halaman HTML. Pada kesempatan kali ini juga kitas sudah membahas beberapa tag yang biasanya dibutuhkan untuk membuat sebuah tabel pada halaman HTML yang sedang dibuat.

Semoga tutorial sederhana ini dapat bermanfaat, dan sampai jumpa pada tutorial belajar HTML selanjutnya.

About Firdan Ardiansyah

Admin di lebakcyber.net Untuk berhubungan dengan saya, silahkan kirim email ke : firdan@lebakcyber.net

Check Also

Menampilkan Gambar di HTML

Menampilkan Gambar di HTML

Menampilkan Gambar di HTML Lebakcyber.net – Menampilkan gambar di HTML. Pada kesempatan belajar HTML kali …

Leave a Reply

Your email address will not be published. Required fields are marked *