Tutorial HTML #07 – Membuat Tabel Pada HTML

Rengga Dev – Tabel merupakan struktur yang digunakan untuk menampilkan informasi dalam bentuk baris dan kolom. pada HTML, untuk pembuatan tabel menggunakan tag <table> utuk membuat table, <tr> untuk membuat baris dan <td> untuk membuat kolom.

untuk lebih memahami pembuata table pada HTML berikut saya sajikan penjelasan tag yang terlibat dalam pembuatan table pada HTML.

<table> merupakan tag pembuka dalam membuat sebuah table pada html, tanpa <table> ini, penggunaan <tr> dan <td> tidak bisa difungsikan dengan baik.
<tr> atau dikenal dengan table row merupakan tag yang digunakan untuk membuat baris dalam table HTML
<td> atau dikenal dengan table data merpakan tag yang digunakan untuk membuat kolom dalam baris dan untuk menampilkan data dalam table
<th> untuk membuat table head atau bagian kepala pada table.

perhatikan 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>

<br /> See the Pen <a href="https://codepen.io/renggagumilar/pen/qBoMaqJ"><br /> Tutorial HTML – Membuat Tabel Pada HTML</a> by Rengga Gumilar (<a href="https://codepen.io/renggagumilar">@renggagumilar</a>)<br /> on <a href="https://codepen.io">CodePen</a>.<br />
Dari contoh di atas dapat anda lihat sendiri fungsi dari masing-masing tag yang sudah kita bahas diatas. namun pada tag table saya memberikan atribut border=’1′. atribut border ini digunakan untuk memberika garis tepi pada table dan nilai 1 ini merupakan nilai dari garis tepi pada tabel yang kita buat tadi.

Dan berikut ini adalah contoh membuat tabel HTML dengan menggunakan tag head atau bagian kepala tabel lihat contoh di bawah ini.

<!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>

<br /> See the Pen <a href="https://codepen.io/renggagumilar/pen/gOedwWb"><br /> Tutorial HTML – Tabel HTML dengan menggunakan tag head</a> by Rengga Gumilar (<a href="https://codepen.io/renggagumilar">@renggagumilar</a>)<br /> on <a href="https://codepen.io">CodePen</a>.<br />
Untuk membuat tampilan tabel yang lebih menarik saya sarankan anda untuk belajar CSS dasar.