Tutorial Membuat Tabel untuk Blog / Website

Saturday, June 2, 2012

Tutorial Membuat Tabel untuk Blog / Website

6:25:00 AM | Diposkan oleh Unknown | | Edit Post

Blog Tutorial - Tabel dalam posting blog dapat membantu penulis dalam menyusun suatu materi tertentu yang berupa data. Dengan demikian lebih mudah mengkomunikasikan maksud dan tujuan dari data yang ada kepada para pengunjung / pembaca. Berikut ini beberapa petunjuk tag HTML yang pernah saya pelajari untuk tabel secara sederhana dan juga tabel variatif.

Dalam membuat tabel, tag HTML utama yang digunakan adalah <table>...</table>, <tr>...</tr> dan <td>...</td>.

<table>...</table> (menunjukkan perintah untuk membuat tabel)
<tr>...</tr> (untuk membuat baris dalam tabel)
<td>...</td> (untuk membuat kolom dalam tabel)

Tabel terdiri dari Header yang terletak di baris paling atas. Nah, ini adalah contoh bentuk header tabel. Berikut ini susunan tag HTML dasar untuk tabel yang mengandung 2 baris dan 3 kolom :

<table><tbody>
<tr>
<td>Header kolom 1</td>
<td>Header kolom 2</td>
<td>Header kolom 3</td>
</tr>
<tr>
<td>Baris 2 kolom 1</td>
<td>Baris 2 kolom 2</td>
<td>Baris 2 kolom 3</td>
</tr>
</tbody></table>

Dari tag HTML di atas, tampilan tabelnya adalah seperti ini. Polos tanpa garis/ border maupun warna background.

Header kolom 1	Header kolom 2	Header kolom 3
Baris 2 kolom 1	Baris 2 kolom 2	Baris 2 kolom 3

Nah, agar lebih rapi dan menarik, anda bisa melakukan beberapa variasi untuk tabel di atas sebagai contohnya:

Untuk mengatur lebar tabel anda bisa tambahkan width="lebar dalam px"
Untuk mengatur garis border anda bisa tambahkan border="jenis border" (Jenis border dalam tabel adalah 1,2,3... dan seterusnya)
Untuk mengatur warna background tambahkan bgcolor="kode warna"
Posisi teks bisa diatur dengan tambahan align="left/center/right"

Sekarang kita akan mencoba membuat tabel lebih variatif, lihat contoh berikut ini.

Membuat tabel dengan lebar= 450px, jenis border= 1, warna background header pada baris pertama=red, warna background pada baris kedua=lightyellow, posisi teks di tengah (center).

Perhatikan penjelasan berikut ini.

Membuat tabel dengan lebar=450px, jenis border=1
Tag HTMLnya dituliskan seperti ini:

<table width="450" border="1"><tbody>
....
....
</tbody></table>

Membuat pengaturan tabel pada baris pertama/ header tabel
Warna background=red dan posisi teks di tengah
Tag HTMLnya dituliskan seperti di bawah ini:

<tr bgcolor="red">
<td align="center">Header kolom 1</td>
<td align="center">Header kolom 2</td>
<td align="center">Header kolom 3</td>
</tr>

Membuat pengaturan tabel pada baris kedua:
Warna background=lightyellow dan posisi teks di tengah

<tr bgcolor="lightyellow">
<td align="center">Baris 2 kolom 1</td>
<td align="center">Baris 2 kolom 2</td>
<td align="center">Baris 2 kolom 3</td>
</tr>

Jika digabungkan, maka tag HTML nya menjadi seperti ini.

<table border="1" style="width: 450px;"><tbody>
<tr bgcolor="red">
<td align="center">Header kolom 1</td>
<td align="center">Header kolom 2</td>
<td align="center">Header kolom 3</td>
</tr>
<tr bgcolor="lightyellow">
<td align="center">Baris 2 kolom 1</td>
<td align="center">Baris 2 kolom 2</td>
<td align="center">Baris 2 kolom 3</td>
</tr>
</tbody></table>

Dari susunan tag HTML di atas akan ditampilkan seperti di bawah ini.

Header kolom 1	Header kolom 2	Header kolom 3
Baris 2 kolom 1	Baris 2 kolom 2	Baris 2 kolom 3

Anda juga dapat menambahkan unsur style="color:kode warna" untuk mengatur warna teks di dalam tabel, misalkan dari tabel di atas untuk baris pertama akan kita rubah warna teks menjadi putih. Tag HTML pada baris pertama dari tabel di atas menjadi seperti ini

<tr bgcolor="red" style="color:white">
<td align="center">Header kolom 1</td>
<td align="center">Header kolom 2</td>
<td align="center">Header kolom 3</td>
</tr>

Sehingga susunan tag HTML tabel tersebut menjadi seperti ini.

<table border="1" style="width: 450px;"><tbody>
<tr bgcolor="red" style="color:white">
<td align="center">Header kolom 1</td>
<td align="center">Header kolom 2</td>
<td align="center">Header kolom 3</td>
</tr>
<tr bgcolor="lightyellow">
<td align="center">Baris 2 kolom 1</td>
<td align="center">Baris 2 kolom 2</td>
<td align="center">Baris 2 kolom 3</td>
</tr>
</tbody></table>

Dari tag HTML tersebut, tampilan tabel tampak seperti di bawah ini sobat.

Header kolom 1	Header kolom 2	Header kolom 3
Baris 2 kolom 1	Baris 2 kolom 2	Baris 2 kolom 3

Nah, sobat untuk variasi tabel bisa anda latih sendiri ya...
Ini saya kasih contoh hasil variasi tabel di atas dengan jenis border="5"

Header kolom 1	Header kolom 2	Header kolom 3
Baris 2 kolom 1	Baris 2 kolom 2	Baris 2 kolom 3

Untuk variasi warna anda bisa buka di Kode Warna HTML.
Oke sobat, selamat mengutak atik tabel ya...

Admin Blog Tutorial

Baca Juga » Info Kontes - Kompetisi Tingkat Nasional-International