Membuat Tabel pada HTML 

 

 

Assalamu’alaikum…

A. Pendahuluan

    
kali ini saya akan mengajak teman-teman untuk belajar dan memahami bagaimana cara membuat tabel dengan benar. Kalian mungkin berfikir bagaimana sih membuat tabel biar jadi menarik dan bagus serta bisa menarik perhatian orang lain supaya melihat dan ingin tau cara membuatnya. Mari kita simak pembahasan kami kali ini.

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