Belajar HTML Part 7 : Membuat Tabel Pada HTML

Membuat Tabel Pada HTML
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>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> |

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).
Tutorial HTML Dasar Lainnya
Belajar HTML Part 1 : Pengertian HTML
Belajar HTML Part 2 : Memilih Text Editor
Belajar HTML Part 3 : Mengenal Tag, Element, Atribut HTML
Belajar HTML Part 4 : Heading Pada HTML
Belajar HTML Part 5 : Format Text Pada HTML
Belajar HTML Part 6 : Membuat Paragraf Pada HTML
Belajar HTML Part 7 : Membuat Table Pada HTML
Belajar HTML Part 8 : Membuat Hyperlink Pada HTML
Belajar HTML Part 9 : Membuat List Pada HTML
Belajar HTML Part 10 : Membuat Format Code Pada HTML
Belajar HTML Part 11 : Membuat Form Pada HTML
Belajar HTML Part 12 : Atribut Form Pada HTML
Belajar HTML Part 13 : Membuat Symbol Pada HTML
Belajar HTML Part 14 :Menampilkan Gambar Pada HTML
Belajar HTML Part 15 : Tag Iframe Pada HTML
Tutorial Menarik Lainnya

Membuat Navbar Responsive dengan HTML dan CSS


Contoh Coding HTML Website Biodata, Dan Cara Membuatnya


Membuat Show Hide Password Di HTML


[…] teman-teman yang belum belajar membuat table dengan HTML, silahkan baca dulu tutorial cara membuat table dengan HTML di […]
Mantap