Membuat Tabel dengan HTML

June 20, 2018
Sekarang kita lanjutkan pembahasan kita tentang materi ini, di sini kita akan mempelajari tentang Tabel.
Tabel merupakan struktur yang digunakan untuk menampilkan 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 memahami dalam pembuatan table pada HTML, berikut saya sajikan penjelasan tag yang terlibat dalam pembuatan table pada HTML.
Tag <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 merupakan tag yang digunakan untuk membuat kolom dalam baris. Dan tag <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>
Dan coba jalankan pada browser.
outputnya akan seperti ini
Dari contoh diatas 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 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 berikut ini adalah contoh membuat tabel HTML dengan menggunakan tag head atau bagian kepala tabel.
contoh
<!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>
coba jalankan di browser anda, perhatikan dan cobalah membuat tabel sendiri untuk latihan. untuk mempercantik tampilan tabel akan kita lanjutkan di pembahasan selanjutnya menggunakan CSS.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Wickey

Author:

Facebook Comment

Inside Post