Belajar HTML5 - Cara Mudah Membuat Tabel Langsung Praktek

Tutorial Hari Ini

Cara Membuat Tabel pada HTML5
Memahami Elemen Tabel pada HTML5
Mempercantik Tampilan Tabel pada HTML5
Penerapan Ke Aplikasi
Pembahasan Materi Selanjutnya
Penutup

Cara Membuat Tabel pada HTML5

Hai sahabat semua, apa khabar? Tutorial hari ini lanjutan dari tutorial sebelumnya, pada kesempatan ini penulis akan berbagi kembali pengalaman kecil, bagaimana cara membuat tampilan web yang sederhana dengan 4 langkah dengan menggunakan tambahan TAG Tables pada HTML5, tentunya tampilan yang sederhana ini dapat lebih dikembangkan lagi dengan memanfaatkan TAG -TAG yang lain(sebagai catatan belum menggunakan CSS). Sahabat waktu yang digunakan untuk menyelesaikan materi ini kira-kira 25 menit, selamat mencoba.

Baca juga: Tutorial HTML Tables

Memahami Elemen Tabel pada HTML5

Untuk memahami elemen tabel langkah yang paling baik dilakukan adalah dengan latihan menyusun script HTML dan langsung mencoba praktek di komputer. Berikut merupakan daftar TAG-TAG HTML yang berkaitan dengan pembuatan table, sbb:

Daftar TAG Table

TAG Table

Fungsi atau Kegunaan

TAG ini, berfungsi untuk membuat/mendeklarasikan tabel
TAG ini, berfungsi untuk membuat sebuah judul tabel
TAG ini, berfungsi untuk membuat sebuah judul pada kolom tabel
TAG ini, berfungsi untuk membuat baris dalam sebuah tabel
TAG ini, berfungsi untuk membuat kolom sel dalam sebuah tabel
TAG ini, berfungsi mengelompokan isi header dalam sebuah tabel
TAG ini, berfungsi mengelompokan isi tubuh dalam sebuah tabel
TAG ini, berfungsiMengelompokan isi footer dalam sebuah tabel
TAG ini, berfungsiMenentukan properti kolom untuk setiap kolom dalam elemen <colgroup>
TAG ini, berfungsiMenentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk diformat

Latihan-1: Pada latihan pembuatan tabel yang pertama ini berfungsi untuk memahami pembentukan eleman-eleman tabel pada baris dan kolom. Berikut scriptnya:

File: tabel1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Latihan1 Struktur Tabel</title>
</head>
<body>
   <table border="1">
   <tr>
       <td>1. Alpukat Kelud</td>
       <td>15</td>
       <td>Bibit Wisata Jambu Kediri</td>
   </tr>
   <tr>
       <td>2. Alpukat Kahyangan</td>
       <td>5</td>
       <td>Bibit Bendungan Jawa Tengah</td>
   </tr>
   <tr>
       <td>3. Alpukat Red Vietnam</td>
       <td>10</td>
       <td>Bibit Asal Vietnam</td>
   </tr>
   <tr>
       <td>4. Alpukat Sub 034</td>
       <td>15</td>
       <td>Bibit Asal Vietnam</td>
   </tr>
   <tr>
       <td>5. Alpukat Miki</td>
       <td>25</td>
       <td>Bibit Depok</td>
   </tr>
   </table>
</body>
</html>

Penjelasan:
TAG <table border="1"> </table>, berfungsi untuk membuat/ mendefinisikan sebuah tabel dengan ketebalan garis=1
TAG <tr> </tr>, berfungsi untuk pembuatan baris
TAG <td> </td>, berfungsi untuk pembuatan kolom

Bila dieksekusi file tabel1.html, hasilnya, sbb:

Mempercantik Tampilan Tabel pada HTML5

Halo sahabat kalau diperhatikan hasil dari eksekusi/RUN tampilan tabel sangat sederhana dimana baru terbentuk baris dan kolom. Baris dengan menggunakan TAG <tr> . . . </tr> sedangkan Kolom menggunakan TAG <td> . . . </td>. Selanjutnya kita akan mempercantik tabel diatas dengan menambahkan judul tabel dengan menggunakan TAG <caption> . . . </caption> sedangkan untuk judul kolom pada table menggunakan TAG <th> . . . </th>.

Latihan-2: Pada latihan kedua menambah judul/caption pada tabel serta menambahkan judul pada setiap kolomnya. Berikut scriptnya:

File: tabel11.html (pengembangan dari file tabel1.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Latihan11 Struktur Tabel</title>
</head>
<body>
<table border="1">
<!—menambahkan judul pada table -->
<caption><h2><b>.: Latihan Tabel Kesatu:.</b></h2></caption>
<!—menambahkan judul kolomnya -->
<th>No.</th>
<th>Jenis Alpukat</th>
<th>Keterangan</th>
<tr>
   <td>1. Alpukat Kelud</td>
   <td>15</td>
   <td>Bibit Wisata Jambu Kediri</td>
</tr>
<tr>
   <td>2. Alpukat Kahyangan</td>
   <td>5</td>
   <td>Bibit Bendungan Jawa Tengah</td>
</tr>
<tr>
   <td>3. Alpukat Red Vietnam</td>
   <td>10</td>
   <td>Bibit Asal Vietnam</td>
</tr>
<tr>
   <td>4. Alpukat Sub 034</td>
   <td>15</td>
   <td>Bibit Asal Vietnam</td>
</tr>
<tr>
   <td>5. Alpukat Miki</td>
   <td>25</td>
   <td>Bibit Depok</td>
</tr>
</table>
</body>
</html>

Penjelasan:
TAG <caption> </caption>, berfungsi untuk memberikan judul pada sebuah tabel.
TAG <tr> </tr>, berfungsi untuk memberikan judul pada kolom- kolom tabel. Juga dapat menambahkan dengan TAG mewarnai, mengatur posisi garis pada setiap tabel

Hasil setelah dieksekusi di browser, sbb:

Penerapan Ke Aplikasi

Pada penerapan pembuatan table ke aplikasi web, pada kasus disini akan menggunakan rancangan yang sebelumnya, langkah kerjanya, sbb:

Langkah-1: Buat folder baru, disini menggunakan nama dan directory C:\laragon\www\HTML5

selanjutnya buat subfolder dengan nama aplikasi2 dan img masing-masing digunakan untuk menyimpan file .html pada folder aplikasi2 dan file-file gambar disimpan di img. Buka kembali 4 file utama masing-masing: index.html, logo.html, menu.html, dan home.html, selanjutnya ada beberapa yang di edit, sbb:

File: index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <meta name="generator" content="PSPad editor, www.pspad.com">
   <title>Wisata Alam Bandung</title></head>
   <frameset rows="23%,*" border="0">
       <frame name="header" src="logo.html">
   <frameset cols="20%,*">
       <frame name="menu" scrolling="no" src="menu.html">
       <frame name="isi" scrolling="no" src="home.html">
   </frameset>
   </frameset>
</html>

File: logo.html

File: menu.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body bgcolor="#0033FF">
<h2><font color="#FFFFFF">.:Wisata Alam:.</font></h2>
<a href="bdg_utara.html" target="isi"><font size="4">
<h3><font color="#FFFFFF">Bandung Utara</font></a><br>
<a href="bdg_selatan.html" target="isi"><font size="4">
<h3><font color="#FFFFFF">Bandung Selatan</font></a><br>
<a href="bdg_timur.html" target="isi"><font size="4">
<h3><font color="#FFFFFF">Bandung Timur</font></h3></a><br>
<a href="bdg_barat.html" target="isi"><font size="4">
<h3><font color="#FFFFFF">Bandung Barat</strong></font></h3></a>
<hr>
<h3>Informasi jadwal:</h3>
<ul>
<li><h4>Senin, 07.30-09.30 Wib</h4></li>
<li><h4>Rabu, 07.30-09.30 Wib</h4></li>
<li><h4>Jumat, 07.30-09.30 Wib</h4></li><br>
<li><a href="mailto: darmayuda.telkomuniversity@gmail.com">Informasi hubungi</a></li>
</ul>
</body>
</html>

File: home.html

--- isinya silahkan dikembang sendiri ---.

pada contoh dibawah ini menggunakan sumber data dari
https://jabarprov.go.id/index.php/news/9371/Pengunjung_Padati_Sejumlah_Obyek_
Wisata_di_Bandung_Utara

Setelah di eksekusi hasilnya, sbb:

Contoh untuk script Wisata Alam Bandung Utara menggunakan TAG Table, sbb:

File: bdg_utara.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Daftar Link Gambar</title>
</head>
<body>
<h3>Lokasi Tempat Wisata Bandung Utara</h3>

<table border="1" width="100%">

<tr>
<th>No.</th>
<th>Nama Wisata</th>
<th>Lokasi Wisata</th>
<th>Jadwal Dibuka</th>
</tr>

<tr>
<td>1.</td>
<td align="center">
<img src="wisata_alam/curug1.jpg" width="250" height="150" alt="Curug Aleh"">
</td>
<td>Curug Bandung Utara</td>
<td align="left">Hari Senin-Minggu, Jam: 08.00 - 18.00 Wib.</td>
</tr>
<tr>
<td>2.</td>
<td align="center">
<img src="wisata_alam/tprahu.jpg" width="250" height="150" alt="Kawah Tangkuban Prahu">
</td>
<td>Kawah Tangkuban Prahu</td>
<td align="left">Hari Senin-Minggu, Jam: 08.00 - 18.00 Wib.</td>
</tr>
<tr>
<td>3.</td>
<td align="center">
<img src="wisata_alam/lembang.jpg" width="250" height="150" alt="Lembang Baru">
</td>
<td>Kawasan Lembang Baru</td>
<td align="left">Hari Senin-Minggu, Jam: 08.00 - 18.00 Wib.</td>
</tr>
<tr>
<td>4.</td>
<td align="center">
<img src="wisata_alam/lembang2.jpg" width="250" height="150" alt="Lembang Baru">
</td>
<td>Kawasan Lembang Baru</td>
<td align="left">Hari Senin-Minggu, Jam: 08.00 - 18.00 Wib.</td>
</tr>
<tr>
<td>5.</td>
<td align="center">
<img src="wisata_alam/lembang3.jpg" width="250" height="150" alt="Lembang Baru">
</td>
<td>Kawasan Lembang Baru</td>
<td align="left">Hari Senin-Minggu, Jam: 08.00 - 18.00 Wib.</td>
</tr>
</body>
</html>

Setelah di eksekusi hasilnya, sbb:

Contoh untuk script Wisata Alam Bandung Selatan menggunakan TAG Table, sbb:

File: bdg_selatan.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Daftar Ling Gambar</title>
</head>
<body>
<h3>Lokasi Tempat Wisata Bandung Selatan</h3>

<table border="1" width="100%">

<tr>
<th>No.</th>
<th>Nama Wisata</th>
<th>Lokasi Wisata</th>
<th>Jadwal Dibuka</th>
</tr>

<tr>
<td>1.</td>
<td align="center">
<img src="wisata_alam/sel1-kawah-putih.jpg" width="250" height="150" alt="Ciwidey"">
</td>
<td>Wisata Kawah Putih</td>
<td align="left">Hari Senin-Minggu, Jam: 08.00 - 18.00 Wib.</td>
</tr>
<tr>
<td>2.</td>
<td align="center">
<img src="wisata_alam/sel2-rancabali.jpg" width="250" height="150" alt="Kebun Teh">
</td>
<td>Kawasan Kebun Teh Rancabali</td>
<td align="left">Hari Senin-Minggu, Jam: 08.00 - 18.00 Wib.</td>
</tr>
<tr>
<td>3.</td>
<td align="center">
<img src="wisata_alam/sel3-rancabali.jpg" width="250" height="150" alt="Vila">
</td>
<td>Vila Kawasan Kebun Teh Rancabali</td>
<td align="left">Hari Senin-Minggu, Jam: 08.00 - 18.00 Wib.</td>
</tr>
<tr>
<td>4.</td>
<td align="center">
<img src="wisata_alam/lembang2.jpg" width="250" height="150" alt="Lembang Baru">
</td>
<td>Kawasan Lembang Baru</td>
<td align="left">Hari Senin-Minggu, Jam: 08.00 - 18.00 Wib.</td>
</tr>
<tr>
<td>5.</td>
<td align="center">
<img src="wisata_alam/lembang3.jpg" width="250" height="150" alt="Lembang Baru">
</td>
<td>Kawasan Lembang Baru</td>
<td align="left">Hari Senin-Minggu, Jam: 08.00 - 18.00 Wib.</td>
</tr>
</body>
</html>

Setelah di eksekusi hasilnya, sbb:

Materi Selanjutnya

Penutup

Sekian pembahasan tutorial Belajar HTML5, Cara Mudah Membuat Tabel Langsung Praktek bagi Pemula, dengan menggunakan TAG (penanda) yang berkaitan dengan tabel pada HTML5, untuk penggunaan gambar dan folder dapat disesuaikan. Selanjutnya akan dibahas tentang penggunaan formulir (Form). Sekian dan terima kasih sudah mengikuti terus tutorial diblog ini, semoga bermanfaat. Salam.