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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat tabel di html</title>
</head>
<body>
<table border="1">
<tr>
<td>baris1/kolom1</td>
<td>baris1/kolom2</td>
<td>baris1/kolom3</td>
</tr>
<tr>
<td>baris2/kolom1</td>
<td>baris2/kolom2</td>
<td>baris2/kolom3</td>
</tr>
<tr>
<td>baris3/kolom1</td>
<td>baris3/kolom2</td>
<td>baris3/kolom3</td>
</tr>
<tr>
<td>baris4/kolom1</td>
<td>baris4/kolom2</td>
<td>baris4/kolom3</td>
</tr>
</table>
</body>
</html>
Membuat Tabel Pada HTML
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 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.contoh
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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>
untuk membuat tampilan tabel yang lebih menarik saya sarankan anda untuk belajar CSS dasar di www.malasngoding.com (bisa dilihat disini).
Di tutorial ini teman-teman akan belajar membuat navbar responsive dengan HTML dan CSS. Dengan penggunaan website yang berkembang pesat saat ini, kita wajib memastikan website ...
Dari semua tutorial dasar HTML yang telah teman-teman pelajari di malasngoding.com, teman-teman bisa mencoba membuat halaman website sederhana untuk latihan. Pada tutorial ini saya akan ...
Pada tutorial ini kita akan Belajar Membuat Show Hide Password Di HTML dengan sangat mudah dan sederhana. Pada umumnya, inputan pada form password akan disamarkan ...
Halo sobat malasngoding.com pada artikel kali ini Kita akan pelajari bagaimana cara membatasi jumlah karakter yang di input kedalam form menggunakan HTML. Dalam membuat form ...
Download Ebook belajar HTML & CSS dasar untuk pemula gratis.
Ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana.
materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.
[…] teman-teman yang belum belajar membuat table dengan HTML, silahkan baca dulu tutorial cara membuat table dengan HTML di […]
Mantap