Sunday , September 24 2017
Home / HTML 5 / Cara Membuat Tabel Di HTML 5

Cara Membuat Tabel Di HTML 5

Cara Membuat Tabel Di HTML 5

Lebakcyber.net – Tabel merupakan sebuah struktur yang dapat digunakanan untuk menampilkan informasi dalam bentuk baris dan kolom. Pada kesempatan kali ini kita akan mencoba bagaimana cara membuat tabel di html 5.

Untuk membuat sebuah tabel di htmla kita membutuhkan tag <table> untuk membuat tabel, tag <td> untuk membuat kolom dan tag <tr> untuk membuat baris.

Berikut ini penjelesan lebih lengkapnya mengenai tag yang dibutuhkan untuk membuat sebuah tabel di html :

  • <table> = Tag <table> merupakan tag pembuka jika kamu ingin membuat sebuah tabel di html, tanpa menggunakan tag <table> ini penggunaan fungsi tag <td> dan <tr> tidak akan berjalan dengan baik.
  • <td> = Tag <td> merupakan tag yang digunakan untuk membuat sebuah kolom pada tabel di html.
  • <tr> = Tag <tr> merupakan tag yang digunakan untuk membuat sebuah baris pada tabel di html.
  • <th> = Tag <th> merupakan tag yang digunakan untuk membuat header di html.

Contoh Pembuatan Tabel Di HTML :

<!DOCTYPE html>
<html>

<head>
<title>Lebakcyber.net - Cara Membuat Tabel Di HTML 5</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>
<td>baris 1 / kolom 4</td>
<td>baris 1 / kolom 5</td>
</tr>

<tr>
<td>baris 2 / kolom 1</td>
<td>baris 2 / kolom 2</td>
<td>baris 2 / kolom 3</td>
<td>baris 2 / kolom 4</td>
<td>baris 2 / kolom 5</td>
</tr>

<tr>
<td>baris 3 / kolom 1</td>
<td>baris 3 / kolom 2</td>
<td>baris 3 / kolom 3</td>
<td>baris 3 / kolom 4</td>
<td>baris 3 / kolom 5</td>
</tr>

<tr>
<td>baris 4 / kolom 1</td>
<td>baris 4 / kolom 2</td>
<td>baris 4 / kolom 3</td>
<td>baris 4 / kolom 4</td>
<td>baris 4 / kolom 5</td>
</tr>

<tr>
<td>baris 5/ kolom 1</td>
<td>baris 5/ kolom 2</td>
<td>baris 5/ kolom 3</td>
<td>baris 5 / kolom 4</td>
<td>baris 5 / kolom 5</td>
</tr>
</table>

Cara Membuat Tabel Di HTML 5

Itulah Contoh bagaimana cara membuat tabel di HTML dengan menggunakan tag <table>, <td> dan <tr>. Sekarang kita akan coba menambahkan tag <th> agar tabel yang kita buat mempunya header. Contohnya seperti berikut ini :

<!DOCTYPE html>
<html>
<head>
<title>lebakcyber.net Cara Membuat Tabel Di HTML 5</title>
</head>

<body>
<table border="1">

<tr>
<th>No</th>
<th>Judul Buku</th>
<th>Stok</th>
<th>Harga</th>
</tr>

<tr>
<td>1</td>
<td>Belajar VB.Net</td>
<td>30</td>
<td>Rp. 55.000</td>
</tr>

<tr>
<td>2</td>
<td>Belajar PHP</td>
<td>50</td>
<td>Rp. 45.000</td>
</tr>

<tr>
<td>3</td>
<td>Belajar MySQL</td>
<td>40</td>
<td>Rp. 70.000</td>
</tr>

<tr>
<td>4</td>
<td>Belajar Oracle</td>
<td>80</td>
<td>Rp. 120.000</td>
</tr>

</table>
</body>
</html>

Cara Membuat Tabel Di HTML 5

 

Sekarang misalnya kita ingin memiliki tabel yang ukurannya memenuhi ukuran di browser dan bersifat dinamis. Maka kita tinggal tambahkan saja perintah width =”100%” pada tag <table>. Contohnya seperti berikut ini :

<!DOCTYPE html>
<html>

<head>
<title>lebakcyber.net Cara Membuat Tabel Di HTML 5</title>
</head>

<body>
<table border="1" width="100%">
<tr>
<th>No</th>
<th>Judul Buku</th>
<th>Stok</th>
<th>Harga</th>
</tr>

<tr>
<td>1</td>
<td>Belajar VB.Net</td>
<td>30</td>
<td>Rp. 55.000</td>
</tr>

<tr>
<td>2</td>
<td>Belajar PHP</td>
<td>50</td>
<td>Rp. 45.000</td>
</tr>

<tr>
<td>3</td>
<td>Belajar MySQL</td>
<td>40</td>
<td>Rp. 70.000</td>
</tr>

<tr>
<td>4</td>
<td>Belajar Oracle</td>
<td>80</td>
<td>Rp. 120.000</td>
</tr>

</table>
</body>
</html>

Nanti hasilnya seperti pada gambar dibawah ini :

Cara Membuat Tabel Di HTML 5

Oke seperti itulah bagaimana cara membuat tabel di HTML 5. Semoga tutorial sederhana ini dapat membantu kalian yang sedang mempelajari HTML. Sampai bertemu di tutorial belajar PHP lainnya ya.

About Firdan Ardiansyah

Admin di lebakcyber.net Untuk berhubungan dengan saya, silahkan kirim email ke : firdan@lebakcyber.net

Leave a Reply

Your email address will not be published. Required fields are marked *