Belajar HTML Dasar #6 - Membuat Tabel Pada HTML

Membuat Tabel Pada HTML

Tabel merupakan struktur yang digunakan untuk nmenampilkan informasi dalam bentuk baris dan kolom. Pada html, untuk pembuatan tabel menggunakan tag <table> dan menggunakan tag <tr>  untuk membuat baris dan <td> untuk membuat kolom. Untuk lebih mudah dalam memahami pembuatan table pada html, berikut ini akan saya sajikan penjelasan tag yang terlibat dalam pembuatan table pada HTML.

Tag <table> merupakan tag pembuka dalam pembuatan sebuah table pada html, tanpa tag <table>  ini, penggunaan <tr> dan <td> tidak bisa digunakan dengan baik. <tr> atau dikenal dengan table row merupakan tag yang digunakan untuk membuat baris dalam table html. <td> atau dikenak dengan tabel data merupakan tag yang digunakan untuk membuat kolom  dalam baris dan tag <th> untuk membuat tablehead atau bagian kepala pada table.

Dibawah ini adalah contoh pembuatan table pada HTML berikut :

<!DOCTYPE html>

<html>

<head>

<title>belajar membuat tabel di html</title>

</head>

<body>

<table border="1">

<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 2 / kolom 3</td>

</tr>

<tr>

<td>baris 3/ kolom 1</td>

<td>baris 3/ kolom 2</td>

<td>baris 3/ kolom 3</td>

</tr>

<tr>

<td>baris 4/ kolom 1</td>

<td>baris 4/ kolom 2</td>

<td>baris 4/ kolom 3</td>

</tr>

</table>

</body>

</html>

Hasil Outputnya

Dari contoh diatas dapat anda lihat semdiri fungsi dari masing-masing tag yang sudah kita bahas diatas. Namun pada tag table saya memberikan atribut border='1'. Atribut border ini digunakan untuk memberikan garis pada table dan nilai 1 ini merupakan nilai dari garis tepi pada tabel yang kita buat tadi ( 1 untuk membuat garis, dan 0 jika tidak ingin menggunakan garis ).

Dan dibawah ini adalah contoh membuat table html dengan menggunakan tag head atau bagian kepala tabel :

<!DOCTYPE html>

<html>

<head>

    <title>belajar membuat tabel di html</title>

</head>

<body>

    <table border="1">

        <tr>

        <th>No</th>

        <th>Nama</th>

        <th>Alamat</th>

        </tr>

    <tr>

        <td>1</td>

        <td>Badrul</td>

        <td>Sumedang</td>

        </tr>

    <tr>

        <td>2</td>

        <td>Andi</td>

        <td>Jakarta</td>

        </tr>

    <tr>

        <td>3</td>

        <td>Budi</td>

        <td>Bandung</td>

        </tr>

    </table>

</body>

</html>

Hasil Outputnya 

Mungkin cukup sampai disini dulu mengenai pembahasan mengenai membuat tabel pada HTML, untuk selanjutnya kita akan belajar mengenai membuat hyperlink dan list pada HTML. Semoga sampai disini teman-teman bisa mengikutinya dengan baik, kalo ada yang mau ditanyakan bisa tinggalkan komentar di bawah ini iya teman-teman nanti akan saya jawab satu-satu ko pertanyannya.

Sekian dan terimakasih...

Daftar Belajar HTML Dasar

1. Belajar HTML Dasar  #1 - Belajar HTML Dasar Untuk Pemula
2. Belajar HTML Dasar  #2 - Membuat Mengenal Tag, Element, Dan Atribut Pada HTML
3. Belajar HTML Dasar  #3 - Membuat Heading Pada HTML
4. Belajar HTML Dasar  #4 - Membuat Format Text Pada HTML
5. Belajar HTML Dasar  #5 - Membuat Paragraf Pada HTML
6. Belajar HTML Dasar #6 -  Membuat Tabel Pada HTML