Just Another Place 2 Share


Belajar Bikin Website Yuk? [3] - Membuat Tabel

10 Nov 2011

Setelah belajar dasar-dasar HTML di Belajar Bikin Website Yuk? [1] dan cara membuat list di Belajar Bikin Website Yuk? [2], tutorial yang ketiga ini kita akan belajar membuat tabel.

Contoh tabel yang akan kita buat seperti ini :

No. Nama Pekerjaan
1 Fandhie Web Designer
2 Eyang Pejabat
3 Ani Berta Bandar Arisan

Tabel diatas terdiri dari 3 kolom (column) dan 4 baris (row) dimana baris pertama adalah baris judul, dengan warna latar belakang abu-abu (#666666) serta warna teks (font) putih (#FFFFFF). Posisi tabel (alignment) adalah di tengah halaman (center) dan lebar tabel 400 piksel.

Untuk membuat tabel kita menggunakan tag <table></table>, dan untuk membuat baris(row) kita menggunakan tag <tr></tr>;. Yuk langsung kita coba dengan menulis kode HTML sbb :

<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>

Kode diatas berarti tabel terdiri dari 4 baris(row), selanjutnya kita tambahkan kolom(column) menggunakan tag <td></td>. Perhatikan bahwa tag <tr></tr> selalu diapit oleh tag <table></table> sedangkan tag <td></td> harus berada di dalam tag <tr></tr>, sbb :

<table>
<tr> <!– baris pertama –>
<td></td> <!– kolom pertama –>
<td></td>
<!-- kolom kedua -->
<td></td> <!-- kolom ketiga -->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Nah kerangka tabelnya udah jadi. Tau ngga? Tulisan atau kode-kode di dalam tanda <!-- dan --> itu adalah penjelasan-penjelasan yang bisa kita tuliskan di kode/script HTML untuk mengingatkan kita aja dan tidak akan ditampilkan di browser. Selanjutnya kita isi tabel kita sbb :
<table>
<tr> <!– baris pertama –>
<td>No.</td> <!– kolom pertama –>
<td>Nama</td>
<!-- kolom kedua -->
<td>Pekerjaan</td> <!-- kolom ketiga -->
</tr>
<tr>
<td>1</td>
<td>Fandhie</td>
<td>Web Designer</td>
</tr>
<tr>
<td>2</td>
<td>Eyang</td>
<td>Pejabat</td>
</tr>
<tr>
<td>3</td>
<td>Ani Berta</td>
<td>Bandar Arisan</td>
</tr>
</table>

dan hasilnya akan muncul di browser sebagai berikut :

No. Nama Pekerjaan
1 Fandhie Web Designer
2 Eyang Pejabat
3 Ani Berta Bandar Arisan

hasil tabelnya masih default dan sederhana kan? alias masih jelek :-) nah berikut kita tambahkan settingan style ke tabel, kolom dan baris. Tag <table></table> kita tambahkan variabel sbb :
<table width="400" border="1" align="center">
Artinya lebar tabel diatur menjadi 400 pixel, tebal border = 1 (semakin besar nilai akan semakin tebal border) dan posisi tabel adalah di tengah halaman (center).

Kemudian pada baris pertama <tr></tr> kita tambahkan variabel sbb :
<tr bgcolor="#666666" style="color:#FFFFFF; font-weight:bold;">
Artinya baris bertama diberi warna dasar (bgcolor) abu-abu (#666666), warna huruf putih (color:#FFFFFF) dan huruf dicetak tebal (font-weight:bold)

Kode HTML selengkapnya akan menjadi seperti ini :
<table width="400" border="1" align="center">
<tr bgcolor=”#666666″ style=”color:#FFFFFF; font-weight:bold;”>
<td align=”center” width=”30″>No.</td>
<td width=”170″>Nama</td>
<td width=”200″>Pekerjaan</td>
</tr>
<tr>
<td align=”center”>1</td>
<td>Fandhie</td>
<td>Web Designer</td>
</tr>
<tr>
<td align=”center”>2</td>
<td>Eyang</td>
<td>Pejabat</td>
</tr>
<tr>
<td align=”center”>3</td>
<td>Ani Berta</td>
<td>Bandar Arisan</td>
</tr>
</table>

<td align="center"> artinya, teks dalam kolom tersebut diatur pada posisi tengah (center).
<td width="170"> artinya, lebar kolom diatur 170 piksel.

Hasil akhir tabel yang kita buat akan seperti contoh diatas. Yah memang masih cukup sederhana. Jangan kuatir, nanti pada tingkat yang lebih maju kita akan belajar bagaimana mengatur tampilan tabel menjadi lebih canggih dengan menggunakan CSS.

Biar ga ketinggalan tutorial-tutorial berikutnya yang lebih canggih, silahkan follow twitter @fandhie.


TAGS webdesign Belajar Bikin Website Yuk


-

Search

Latest