Sekarang tag yang akan dipelajari adalah mengenai <table> Tabel.

Tabel di gunakan untuk mengolompokan data-data yang ada secara rapih dan mudah untuk di baca.

7. Table

– Tag tabel yang standar dipakai adalah :

<table>     :  membuat tabel

<caption> :  membuat judul tabel

<tr>          :  cell baris

<th>         :  heading

<td>         : cell data

– Atribut pada tag tabel seperti :

<bgcolor> : mengatur warna tabel

<border>  : mengatur ketebalan garis pada tabel

<cellspacing> : mengatur jarak spasi

<cellpadding> : mengatur jarak padding nya

<width> dan <height>

Sekarang kita akan mencoba membuatnya, contohnya adalah seperti ini :

<table bgcolor=”#00FF00″ border=”3″> 

<tr> <th> Nama </th> <th> Pekerjaan </th> <th> Umur </th> </tr>

<tr> <td> Evan </td> <td> Manager IT </td> <td> 19 Tahun </td> </tr>

<tr> <td> Valdius </td> <td> Office Boy </td> <td> 26 Tahun </td> </tr>

<tr> <td> Anto </td> <td> Analyst </td> <td> 21 Tahun </td> </tr>

<tr> <td> Nano </td> <td> Lobbyist </td> <td> 21 Tahun </td> </tr>

</table>

Hasilnya adalah seperti ini :

Nama Pekerjaan Umur
Evan Manager IT 19 Tahun
Valdius Office Boy 26 Tahun
Anto Analyst 21 Tahun
Nano Lobbyist 21 Tahun

Tabel pun bisa kita buat menjadi sebuah gambar atau animasi lainya dengan bantuan atrribut rowspan dan colspan yang dapat di pakai pada tag <th> atau <td>. Rowspan digunakan untuk menggabungkan baris menjadi 1 bagian, begitu juga colspan menggabungkan kolom.

Contoh nya sebagai berikut :

<table bgcolor=”green” border=”3″> 

<tr> <th rowspan=”2″ colspan=”2″ align=”center”> Mahasiswa Maranatha </th> <th colspan=”3″ align=”center”> Jurusan </th> </tr>

<tr> <th> IT </th> <th> Management </th> <th> Psikologi </th></tr>

<tr> <th rowspan=”2″> Jenis Kelamin </th> <th> Laki-laki </th> <td>1000</td> <td>500</td> <td>700</td> </tr>

<tr> <th> Perempuan </th> <td> 300 </td> <td> 1300 </td> <td> 700 </td> </tr>

</table>

Hasilnya adalah sebagai berikut :

Mahasiswa Maranatha Jurusan
IT Management Psikologi
Jenis Kelamin Laki-laki 1000 500 700
Perempuan 300 1300 700

Tabel ini dapat kita buat sebuah animasi atau gambar, saya mengambil contoh dari soal-soal praktikum Web kemaren yang saya kerjakan.^^ Ini beberapa contoh nya, coba kalian buat coding html nya sendiri…..he

TIPS !!!!

Biasakan dalam membuat sebuah tabel buat dahulu kerangka <tr> nya atau barisnya, misal contoh kita mau membuat gambar SpongeBob di atas memiliki 10 baris. Pertama -tama kita buat dahulu <tr></tr> sebanyak 10 biji, baru kita isikan di dalem <tr> nya sesuai yang diminta.