Modul RPL, Perintah Tag untuk Membuat Tabel pada Halaman Web
A. Perintah Tag untuk
Membuat Tabel pada Halaman Web
Pada saat menampilkan data yang terstruktur atau tampilan
dari database, umumnya akan dibuat dalam bentuk tabel. HTML juga menyediakan
tag tabel (tag table) digunakan untuk menampilkan data dalam bentuk tabel. Hal
ini karena CSS untuk mengatur tampilan halaman web sangat dianjurkan.
1. Perintah Tag untuk Membuat Tabel dalam HTML
Tabel diterjemahkan sebagai cara untuk menampilkan informasi dalam bentuk
sel (cell) yang terdiri atas baris dan kolom. Untuk menampilkan data dalam
bentuk tabel pada HTML, digunakan Tag <Table>. Sedangkan untuk membuat
tabel di HTML, minimal membutuhkan tiga tag utama, yaitu seperti yang disajikan
pada tabel berikut.
|
No. |
Tag |
Keterangan |
|
1. |
Tag <table> |
Digunakan untuk memulai tabel. |
|
2. |
Tag <tr> |
Singkatan dari table row, digunakan
untuk membuat baris dari tabel. |
|
3. |
Tag <td> |
Singkatan dari table data, digunakan
untuk menginput data ke tabel. |
<!DOCTYPE html>
<html>
<head>
<title>IMPLEMENTASI TAG TABEL</title>
</head>
<body>
<h1>BELAJAR TAG TABEL</h1>
<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>
</table>
</body>
</html>
2. Elemen Tabel Tbody, Thead, Tfoot, Tr, Th,
dan Td
Baris-baris yang ada pada tabel dapat dibagi menjadi tabel
thead, tabel tfoot, dan tabel tbody yang dinyatakan dengan elemen thead, tfoot,
dan tbody. Setiap thead, tfoot, dan tbody berisi grup baris dengan masing-masing
grup paling sedikit berisi satu baris yang di definisikan dengan elemen
<tr>.
Elemen <thead>, <tfoot>, dan <tbody> sangat berguna dalam penulisan sebuah tabel yang memiliki panjang, lebar, dan lebih dari satu halaman di mana masing-masing halaman tersebut, tabel head dan foot-nya tertulis juga.
b. Elemen TR (Table Row)
Pada elemen TR terdapat elemen TH dan TD dengan attribute yang terdapat pada elemen jenis berupa align, valign (posisi vertical), dan bgcolor. Elemen TR mendefinisikan baris pada tabel dan element ini harus berada di dalam elemen table.
Sintaks yang digunakan sebagai berikut
<tr
align=”left”|”center”|”right”
Valign=”top”|”middle”|”bottom”
Bgcolor=”color”>
…………………………
</tr>
c. Elemen TH (Table Header) dan TD (Table Data)
HTML3 dirilis pada 18 Desember 1997 (dikenal juga dengan HTML+). HTML3 telah menambah banyak fitur yang lebih fleksibel untuk membuat web yang interaktif. Versi ini tetap konsisten menambahkan fitur terbarunya. Salah satu fitur yang terkenal pada masa ini adalah fitur tabel di dalam paragraph. Versi HTML3.2 merupakan perkembangan dari HTML3 yang menambahkan sedikit atas kekurangan atau kesalahan pada HTML3.
3.
Cellpadding
Penggunaan atribut cellpadding hanya didukung oleh HTML4.01, namun tidak
di dukung oleh HTML5. Atribut cellpadding digunakan untuk menentukan jarak
spasi di dalam sel, yaitu di antara dinding sel dan isi sel. Penulisan kode
HTML atribut cellpadding sebagai berikut.
<table cellpadding=”pixel”>
Nilai dari atribut cellpadding dalam menentukan spasi di dalam sel adalah pixel. Perhatikan kode penulisan dan penggunaan cellpadding di HTML berikut.
<!DOCTYPE html><html><head><title>Penggunaan Atribut Cellpadding di HTML</title></head><body><table border=”2”cellpadding=”5”><tr><th width=”50”>No</th><th>NIM</th><th>Nama</th></tr><tr><td align=”center”>1</td><td>20180401</td><td>Nani</td></tr><tr><td align=”center”>2</td><td>20180402</td><td>Aisyah</td></tr></table></body></html>
4.
Cellspacing
Atribut cellspacing digunakan untuk menentukan jarak spasi antarsel. Sama
halnya dengan atribut cellspacing, atribut cellspacing juga tidak didukung oleh
HTML5. Nilai dari atribut cellspacing dalam menentukan spasi di dalam sel
adalah pixel. Bentuk penulisan atribut cellspacing di HTML sebagai berikut.
<table cellspacing=”pixel”>
Bentuk kode penulisan dan penggunaan cellspacing di HTML sebagai berikut.
<!DOCTYPE html><html><head><title>Penggunaan Atribut Cellspacing di HTML</title></head><body><table border=”2”cellspacing=”5”><tr><th width=”50”>No</th><th>NIM</th><th>Nama</th></tr><tr><td align=”center”>I</td><td>20180401</td><td>Siti</td></tr><tr><td align=”center”>2</td><td>20180402</td><td>Nani</td></tr></table></body></html>
5.
Border
Atribut border digunakan untuk membuat bingkai pada tabel dengan
menentukan tebal bingkai tersebut. Bentuk kode penulisan dan penggunaan atribut
border di HTML, yaitu sebagai berikut.
<!DOCTYPE html><html><head><title>Penggunaan Atribut Border di HTML</title></head><body><table border=”4”<tr><th>No</th><th>NIM</th><th>Nama</th></tr><tr><td>1</td><td>20180401</td><td>Siti</td></tr><tr><td>2</td><td>20180402</td><td>Aisyah</td></tr><tr><td>3</td><td>20180403</td><td>Deni</td></tr></table></body></html>
6.
Rowspan dan Colspan
Banyak browser seperti Firefox, Chrome, Opera, Safari, dan Internet
Explorer mendukung penggunaan colspan dan rowspan. Colspan dan rowspan juga
didukung oleh HTML5. Penggunaan atribut colspan dan rowspan diterapkan pada tag
<td> dan tag <th>.
a. Kode Penulisan Colspan
Penulisan sintaks colspan adalah
<td colspan=”number”>
Nilai “number” pada colspan dan rowspan menunjukan jumlah kolom ataupun baris yang akan digabungkan menjadi satu. Bentuk kode penulisan dan penggunaan colspan di HTML sebagai berikut.
<!DOCTYPE html><html><head><title>Penggunaan Colspan pada Tabel di HTML</title></head><body><table border=”1”><tr><th colspan=”2”>Data</th></tr><tr><th>Nama</th><th>NIM</th></tr><tr><td>Siti</td><td>20180401</td></tr><tr><td>Deni</td><td>20180402</td></tr><tr></table></body></html>
Penulisan sintaks rowspan adalah
<td rowspan=”number”>
Bentuk kode penulisan dan penggunaan rowspan di HTML sebagai berikut.
<!DOCTYPE html><html><head><title>Penggunaan Rowspan pada Tabel di HTML</title></head><body><table border=”1”><tr><th>No</th><th>Nama</th><th>Hobi</th></tr><tr><td rowspan=”2”>1</td><td rowspan=”2”>Susi</td><td>Bulu Tangkis</td></tr><tr><td>Traveling</td><td>20180401</td></tr></table></body></html>
0 Response to "Modul RPL, Perintah Tag untuk Membuat Tabel pada Halaman Web"
Post a Comment