MENGENAL TAG TABLE PADA HTML

Melanjutkan artikel tentang Belajar HTML, sekarang saya akan informasikan fungsi tag table (tabel). Tabel di sini sama seperti tabel dalam MS Word atau Excel yang terdiri dari kolom dan baris. Dalam blog atau website tabel ini bisa dimanfaatkan dalam banyak hal, selain penampil informasi dalam sebuah tulisan atau artikel (body), tabel juga bisa dimanfaatkan pada bagian header, sidebar, atau footer dalam sebuah website atau blog.

Dalam tulisan saya ini, saya tidak akan membahas tentang penggunaan tabel dalam header, sidebar, atau footer, tapi saya hanya menginformasikan pembuatan tabel itu sendiri dalam bahasa HTML.

Pembuatan tabel dalam bahasa HTML pada dasarnya akan tertulis seperti di bawah ini:

01.<table> <!-- awal tabel -->

02.<tr> <!-- awal baris 1 -->

03.<td>Cell 1</td> <!-- kolom 1 baris 1 -->

04.<td>Cell 2</td> <!-- kolom 2 baris 1 -->

05.<td>Cell 3</td> <!-- kolom 3 baris 1 -->

06.</tr> <!-- akhir baris 1 -->

07.<tr> <!-- awal baris 2 -->

08.<td>Cell 4</td> <!-- kolom 1 baris 2 -->

09.<td>Cell 5</td> <!-- kolom 2 baris 2 -->

10.<td>Cell 6</td> <!-- kolom 3 baris 2 -->

11.</tr> <!-- akhir baris 2 -->

12.<tr> <!-- awal baris 3 -->

13.<td>Cell 7</td> <!-- kolom 1 baris 3 -->

14.<td>Cell 8</td> <!-- kolom 2 baris 3 -->

15.<td>Cell 9</td> <!-- kolom 3 baris 3 -->

16.</tr> <!-- akhir baris 3 -->

17.</table> <!-- akhir tabel -->

 

Perintah pembuatan tabel diawali dengan <table> dan diakhiri dengan </table>, <tr> dan </tr> adalah fungsi perintah pembuatan baris, sedangkan <td> dan </td> itu sendiri perintah pembuatan kolom dalam baris.

Dari  contoh tag html di atas akan menghasilkan tabel yang terdiri dari 3 baris dan 3 kolom dengan seperti ini:

Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6
Cell 7	Cell 8	Cell 9

Tag script di atas adalah adalah tag dasar, untuk pengembangannya ada beberapa atribut yang bisa digunakan seperti lebar (width), spasi (spacing), huruf (font), warna dasar (background), dan lain sebagainya.