Cara Membuat Tabel Di HTML 5

19/07/2017 HTML 5 Leave a comment 2,836 Views

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>

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>

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 :

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.

Lebak Cyber Tips dan Trik Komputer

Cara Membuat Tabel Di HTML 5