Dasar Paling Sederhana Table HTML

Kalau berbicara tentang pelajaran script atau kode HTML, tentu tidak akan terlewatkan pelajaran tentang table. Ingat waktu dulu, pelajaran table HTML ini merupakan pelajaran kedua dari dasar-dasar HTML yang saya pelajari. Materi ini sangat mudah dipelajari apalagi bagi yang terbiasa dengan Microsoft Excel, pasti akan lebih mudah mempelajarinya, semuanya berhubungan dengan kolom, baris, cell, data, dan sebagainya. Intinya apa yang tampak di MS. Excel akan bisa ditampilkan di browser.

Dulu table ini digunakan untuk membuat layout atau kerangka sebuah website. Space untuk header, menu, widget, isi, footer semua di set oleh script table ini. Tapi belakangan ini layout menggunakan table tidak populer lagi, digantikan pengaturannya oleh CSS. Sekarang banyak template CSS bertebaran di dunia online baik versi gratis maupun versi berbayar.

Kali ini kita akan fokus dulu ke pembahasan table walaupun nanti akan disisipkan sedikit pengaturan oleh CSS.

Dasar-Dasar Table HTML. 

Penulisan area table diawali dengan <table> dan diakhiri atau ditutup dengan </table>.

Pada dasarnya tag yang ada di dalam tag table hanya ada tiga yaitu:

Table baris <tr>  

Ini untuk membuat atau menambah baris. Untuk menghafalnya cukup kita ingat huruf akhirnya yaitu 'r' row yang artinya baris.

Table kolom <td> 

Ini untuk menambah atau membuat sebuah kolom.

Table judul atau header <th>

Nah kalau yang ini berguna untuk membuat header suatu kolom, hasil cetaknya akan becetak tebal.

Contoh penggunaan ketiga tag diatas sebagai berikut:

Contoh table 1 kolom dan satu baris.

<table border=1>

<tr>

     <td> Percobaan tabel dengan 1 kolom dan 1 baris</td>

</tr>

</table>

Hasilnya di browser:

Percobaan tabel dengan 1 kolom dan 1 baris

Contoh table 2 kolom dan satu baris.

<table border=1>

<tr>

     <td> Kolom 1</td>
     <td> Kolom 2</td>

</tr>

</table>

Hasilnya sebagai berikut :

Kolom 1

Kolom 2

Contoh table 1 kolom dan 2 baris.

<table border=1>

<tr>

     <td> Kolom ke-1 baris ke -1 </td>

</tr>

<tr>

     <td> Kolom ke-1 baris ke -2 </td>

</tr>

</table>

Hasilnya:

Kolom ke-1 baris ke -1

Kolom ke-1 baris ke -2

Contoh table 2 kolom dan 2 baris.

<table border=1>

<tr>

     <td> Kolom ke-1 baris ke -1 </td>

     <td> Kolom ke-2 baris ke -1 </td>

</tr>

<tr>

     <td> Kolom ke-1 baris ke -2 </td>

     <td> Kolom ke-2 baris ke -2 </td>

</tr>

</table>

Jika dibuka di browser maka hasilnya:

Kolom ke-1 baris ke -1	Kolom ke-2 baris ke -1
Kolom ke-1 baris ke -2	Kolom ke-2 baris ke -2

Contoh penggunaan table header.

<table border=1>

<tr>

     <th> Kolom header ke - 1 </th>

     <th> Kolom header ke - 2</th>

</tr>

<tr>

     <td> Kolom ke-1 </td>

     <td> Kolom ke-2 </td>

</tr>

</table>

Hasilnya akan seperti ini:

Kolom header ke - 1	Kolom header ke - 2
Kolom ke-1	Kolom ke-2

Terlihat bahwa header akan bercetak tebal, mudah buakan!

Contoh penggabungan dua kolom menjadi satu kolom.

Contoh berikun akan ditujukan bagaimana menggabungakan dua kolom kedalm satu kolom. Ini sama fungsinya dengan fungsi "Merge" di dalam MS. Excel.

<table border=1>

<tr>

     <th colspan="2"> Merege </th>

     

</tr>

<tr>

     <td> Kolom ke-1 </td>

     <td> Kolom ke-2 </td>

</tr>

</table>

Hasilnya menjadi :

Merege
Kolom ke-1	Kolom ke-2

Nilai colspan mengikuti jumlah kolom dibawahnya, kalau kolom di bawahnya ada lima, maka nilai colspan diubah menjadi lima " colspan="5".

Contoh penggabungan dua baris menjadi satu baris.

Sama halnya dengan penggabungan beberapa kolom, kita juga bisa menggabungkan beberapa baris kedalam satu baris. Caranya  colspan drubah menjadi rowspan.

<table border=1>

<tr >

     <td rowspan="2"> Data 1 </td>

     <td> Data 2 </td>

     <td> Data 3 </td>

     

</tr>

<tr>

     <td> Data 4 </td>

     <td> Data 5 </td>

</tr>

</table>

Hasilnya akan seperti dibawah ini:

Data 1	Data 2	Data 3
	Data 4	Data 5

Mewarnai cell table.

Attribute untuk mewarnai cell di table HTML adalah bgcolor. Berikut kita akan praktekan didalam contoh berikut:

<table border=1>

<tr >

      <td bgcolor="yellow"> Yellow </td>

     <td bgcolor="green"> Green </td>

</tr>

<tr>

     <td bgcolor="blue"> <font color="Red"> Blue</font></td>

     <td bgcolor="blac"><font color="white"> Black</font></td>

</tr>

</table>

Maka hasil yang akan kita lihat sebagai berikut:

Yellow	Green
Blue	Black