Membuat Tabel dalam Blog (Tulisan Pertama)

Tips ini kami buat sehubungan dengan banyaknya permintaan rekan-rekan kami di lingkungan STAIN Jurai Siwo Metro. Seperti dimaklumi, dalam setiap postingan yg kita buat gak selamanya harus melulu dalam bantuk tulisan, tetapi juga akan memuat informasi dalambentuk table yg berisi kolom-kolom. Selain tampilan postingan terlihat cantik juga terkesan lebih menarik dan cantik…..tul khan….??????

Tulisan ini gak lepas dari refferensi para penulis lainnya yang sudah lebih dulu memuat tulisan tentang membuat table diblog, seprti Kang Rohman, Ade Sanusi, Herman, dan Maestro Blog. Hanya saja, di tulisan ini sedikit lebih di spesialisasi ke kebutuhan user di lingkungan STAIN Metro atau lembaga pendidikan lainnya.

Oke deh, itu sekedar intermezzo buat pembaca setia Blog Puskom STAIN Metro. Dalam Maestro Blog di jelasakn bahwa Setiap tabel minimal tersusun dari tiga tag dasar yaitu tag <TABLE> yang menandai sebuah tabel, tag <TR> yang membentuk baris dan tag <TD> yang membentuk kolom. Masing-masing tag tersebut harus memiliki tag penutup.

Untuk lebih jelasnya berikut contohnya :

<TABLE>

<TR>

<TD>kolom 1 dari baris 1</TD>

</TR>

</TABLE>

Susunan tag-tag di atas memerintahkan kepada browser untuk menampilkan sebuah tabel yang terdiri dari satu baris dan satu kolom yang diisi dengan tulisan: kolom 1 dari baris 1. Hasilnya sebagai berikut :

kolom 1 dari baris 1

Di dalam tabel, kita bisa bisa beberapa atribut di dalamnya, antara lain yaitu:

• bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".

• align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left""center""right" .
• cellpadding : untuk mengatur jarak antara tepi sel dengan isi sel di dalam sebuah tabel. Penempatan kodenya : cellpadding="pixel" .
• border : untuk mengatur tingkat ketebalan garis tepi pada tabel. Penempatan kodenya : border="pixel".
• cellspacing : untuk mengatur jarak antara sel. Penempatan kodenya : cellspacing="pixel" .
• height : untuk mengatur tinggi tabel. penempatan kodenya : height="pixel""%" .
• weight : untuk mengatur lebal tabel. Penempatan kodenya : height="pixel""%"

Sebagai Contoh awal berikut saya lampirkan script/HTML dasar dari tabel yang akan kita buat

DATA DOSEN STAIN JURAI SIWO METRO TAHUN 2009

<TABLE> <TR> <TD>NAMA</TD> <TD>GOL/PANGKAT</TD> </TR> <TR> <TD>Edi Kusnadi</TD> <TD>IV/d</TD> </TR> <TR> <TD>Isti Fatonah</TD> <TD>IV/c</TD> </TR> <TR> <TD>M. Ardi Rasyid</TD> <TD>IV/a</TD> </TR> <TR> <TD>Siti Nurjanah</TD> <TD>IV/b</TD> </TR> </TABLE>

Hasilnya seperti di bawah ini :

maka hasilnya akan seperti ini

DATA DOSEN STAIN JURAI SIWO METRO TAHUN 2009

NAMA	GOL/PANGKAT
Edi Kusnadi	IV/d
M. Makhrus Saadon	IV/a
M. Ardi Rasyid	IV/a
Siti Nurjanah	IV/b

Lebih lanjut dari tulisan ini akan dibahas dalam materi berikutnya.....biar penasaran yaaa....