Membuat Tabel pada HTML
Assalamu’alaikum…
A. Pendahuluan
B. Pengertian
Tabel merupakan
cara untuk menampilkan informasi dalam bentuk sel yang
terdiri atas baris
dan kolom. Untuk menampilkan data dalam bentuk table
pada HTML, digunakan
Tag<Table>.
C. Latar Belakang
Elemen table berisi
property <tr> untuk menentukan baris(table row) yang
didalamnya terdapat
properti <td> untuk menampkan data pada setiap sel
table(table data).
<table> <tr> <td>data baris 1 kolom 1</td> <td>data baris 1 kolom 2</td> </tr> </table> |
Struktur
elemen table adalah sebagai berikut:
| <table> <tr> <td>data baris 1 kolom 1</td> <td>data baris 1 kolom 2</td> </tr> </table> |
Untuk mendifinisikan
table heading atau judul tiap kolom menggunakan
tag <th>
..... </th>.
Atribut
Elemen Tabel
Width =panjang(lebar table, pixel atau persen) Height =panjang(tinggi table, pixel atau persen) Border =pixel(tebal garis tepi) Cellspacing =pixel(spasi antar sel) Cellpadding =pixel(spasi di dalam sel) Align =[left|center|right](perataan table) Bgcolor =warna(warna latar belakang table) |
Atribut
Table Row
Align =[left|center|right](perataan sebaris sel secara horizontal) Valign =[top|middle|bottom](perataaan sebaris sel secara vertical) Bgcolor =warna(warna latar belakang baris) |
Atribut
Tabel Data
Align =[left|center|right](perataan horizontal) Width =[top|middle|bottom](perataan vertical) Height =pixel(tinggi sel, pixel atau persen) Bgcolor =warna(warna latar belakang sel) |
Contoh
praktik tabel :
1.
Tabel1.html
Coding :
Hasil :
2.
Tabel2.html
Coding :
Hasil :
3.
Tabel3.html
Coding:
Hasil:
Coding :
Hasil :
Penggabungan baris dan kolom dengan menggunakan
Rowspan dan Colspan.
Rowspan = menggabungkan dua atau lebih baris
Colspan = menggabungkan dua atau lebih kolom.
Contoh
Rowspan dan Colspan sebagai berikut :
Contoh rowspan
Coding :
Hasil :
Contoh Colspan
Coding :
Hasil :
Tabel
di dalam Tabel (Tabel Bersarang)
Tabel Bersarang adalah dengan menuliskan HTML
Tabel di dalam sebuah sel dari tabel, letaknya adalah pada
<td>....</td>.Teknik tabel bersarang adalah salah satu
cara untuk menghasilkan layout
tabel yang kompleks tanpa membuat tabel yang
sangat kompleks. Sehingga ketika harus membuat tabel yang kompleks,
maka cara sederhananya adalah membuat tabel di dalam sebuah sel
(<td></td>).
Contoh
praktiknya :
Coding
:
<html>
<head>
<title> Tabel bersarang </title>
</head>
<table border="1" cellpadding="5">
<caption>Online der</caption>
<tr>
<th>Description</th>
<th>Qty</th>
<th>Price</th>
<th>Email Account Note</th>
</tr>
<tr>
<td>Email Account</td>
<td align="right">10</td>
<td align="right">$9.90</td>
<td rowspan="5">
<table border="1">
<tr><td>Mailbox</td><td>10GB</td></tr>
<tr><td>Webmail</td><td>Yes</td></tr>
<tr><td>POP3</td><td>Yes</td></tr>
<tr><td>IMAP</td><td>Yes</td></tr>
<tr><td>Anti-spam</td><td>Yes</td></tr>
</table>
</td>
</tr>
<tr>
<td>FYIcenter.com ad</td>
<td align="right">1</td>
<td align="right">$99.00</td>
</tr>
<tr>
<td>1-years Access</td>
<td align="right">1</td>
<td align="right">$199.00</td>
</tr>
<tr>
<td colspan="2"
align="right">Shipping</td>
<td align="right">$3.99</td>
</tr>
<tr>
<td colspan="2"
align="right">Tax</td>
<td align="right">$15.99</td>
</tr>
<tr>
<td colspan="2"
align="right">Shipping</td>
<td align="right">$3.99</td>
</tr>
<tr>
<td colspan="2"
align="right">Tax</td>
<td align="right">$15.99</td>
</tr>
</table>
</html>
Hasilnya
:
D. Maksud dan Tujuan
lebih memahami dan mengeri tentang apa
dan bagaimana caranya membuat tabel pada HTML dengan benar.
E. Alat dan Bahan
1. Laptop
2. File Items
F. Hasil yang diharpkan
bisa mempraktikkan dan paham tentang tag
yang ada pada saat pembuatan tabel dan paham apa guna dari tag
tersebut kenapa bisa digunakan.
G. Referensi
Tidak ada komentar:
Posting Komentar