Cara Menggunakan Tabel dalam Postingan Blog

Cara Menggunakan Tabel dalam Postingan Blog. Kalau yang ini asli sop, ga usah ragu, bukan artikel punya mama, paman ataupun ayah. Kita akan diajak mengenal format dasar sebuah Tabel. Tabel bisa disebut sebuah alat untuk menampilkan informasi dalam bentuk matriks. Tabel juga diartikan daftar. Dalam penulisan sebuah postingan blog seringkali kita butuh Tabel untuk mengorganisasikan data dalam struktur tabulator. Masalah Tabel ini mungkin saja nantinya, pembahasan ini akan merembet pada Cara Membuatan Frame.

Format sebuah Tabel sebenarnya cukup sederhana, akan tetapi akan menjadi rumit karena sifat struktur aslinya. Meski sederhana tetapi aturan mainya harus benar-benar di ikuti, seperti penggunaan tag-tag yang lain. Sebuah Tabel bisa dimulai dengan tag <table> dan diakhiri dengan tag  </table>. Setiap Baris Tabel dibentuk dengan tag <tr> dan diakhiri dengan tag  </tr> dan setiap Kolom Tabel dibentuk dengan tag <td> dan diakhiri dengan tag </tg>

Contoh penulisan untuk Tabel dengan 2 baris dan 2 kolom:

<table border="7" bordercolor="red" cellpadding="10"><tr>
<td>Cara Menggunakan Tabel  Blog 1</td>
<td>Cara Menggunakan Tabel  Blog 2</td>
</tr><tr>
<td>Cara Menggunakan Tabel  Blog 3</td>
<td>Cara Menggunakan Tabel  Blog 4</td>
</tr><tr>
</table>

Maka hasil pembacaan brower akan ditampilkan seperti ini:

Cara Menggunakan Tabel Blog 1	Cara Menggunakan Tabel Blog 2
Cara Menggunakan Tabel Blog 3	Cara Menggunakan Tabel Blog 4

Atribut border pada tag <table> akan membentuk border disekeliling tabel. Default atribut border adalah border=0 yang berarti tidak menggunakan border. Tabel dengan border dimatikan bisa dimanfaatkan untuk me-layout halaman dengan banyak gambar. Selain border, berikut adalah atribut yang dapat dipakai pada <table> :

bordercolor="kode warna" cellpadding="angka" cellspacing="angka" width="angka"	Mengatur warna border,jika border digunakan Mengatur jarak antara border dengan isi sel(vertikal,horisontal)dalam pixel Mengatur tebal frame dalam satuan pixel Mengatur lebar tabel dalam satuan pixel atau persen.

Sedang dalam atribut <tg> yang sering digunakan adalah :

bgcolor="kode warna" background="gambar" align="left / right / center" valign=top / bottom / middle" colspan="angka" width="angka"	Mengatur warna latar belakang sel Menggunakan gambar sebagai latar belakang Mengatur perataan isi sel secara horisontal Mengatur perataan isi sel secara vertikal Untuk menggabung sel kosong Mengatur lebar sel dalam satuan pixel atau persen

Semoga bisa dipahami dan tentunya bisa bermanfaat.

Cara Membuat Table Pada Postingan Blog, Blogspot

Cara Membuat Table Pada Postingan, ini mungkin berguna untuk sobat yang memposting seperti jadwal pertandingan sepalbola, kalender, daftar anggota, dan lain sebagainya, sebenernya cukup mudah sekali, tetapi walaupun mudah kalau kita tidak tau caranya sama saja bohong, dengan menggunakan table maka postingan seperti yang telah kita terakan diatas akan lebih rapih dan enak dipandang mata, baiklah kalau gitu kita lihat saja contohnya, lihat dibawah ini.

Judul Tabel
Tanggal	Kejuaraan	Sirkuit
20 Maret 2011	MotoGP	Losail
24 April 2011	MotoGP	Motegi
1 May 2011	MotoGP	Jerez
15 May 2011	MotoGP	Estoril
22 May 2011	MotoGP	Le Mans
5 June 2011	MotoGP	Mugello
19June 2011	MotoGP	Silverstone
25 June 2011	MotoGP	Assen
3 July 2011	MotoGP	Barcelona
17 July 2011	MotoGP	Sachsenring
24 July 2011	MotoGP	Laguna Seca
14 August 2011	MotoGP	Brno
28 August 2011	MotoGP	Indianapolis
4 September 2011	MotoGP	Misano
18 September 2011	MotoGP	Aragon
9 October 2011	MotoGP	Sepang
16 October 2011	MotoGP	Phillip Island
6 November 2011	MotoGP	Valencia Advertisement

Langkah1
Masuk kedasbor Blogger.
Langkah2
Pilih Rancangan Edit Html.
Langkah3
Masukkan Kode CSS dibawah ini di atas kode : ]]></b:skin>

table { color: #3E5867; width: 100%; }
caption { background-color: #E6F0F2; border-top: 1px solid #E6F0F2; text-align: center; }
thead { background-color: #F4F8F9; text-align: center; }
tbody { background-color: #f7f7f7; text-align: center; }
tfoot { background-color: #fff; text-align: left; }
td#next { text-align: right; }

Setelah itu Save template sobat, apabila template sobat sudah ada kode seperti diatas tidak usah dipasang kode CSS itu.

Sekarang kita Masuk ke Posting > Entrik Baru > Mode Edit HTML, jangan yang Compose, lalu masukkan Kode Table dibawah ini.

<table border="2"><caption>Judul Tabel</caption>
<tbody>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
<tr>
<td>20 Maret 2011</td>
<td>MotoGP</td>
<td>Losail</td>
</tr>
<tr>
<td>24 April 2011</td>
<td>MotoGP</td>
<td>Motegi</td>
</tr>
</tbody>
</table>

Setelah itu Sekarang Masuk Ke Mode Compose dan edit isi dari table tadi, untuk warna background, border, text, supaya sesuai dengan template kamu, ubah kode warna CSS diatas, silahkan di oprek lagi bila ingin lebih bagus, misalnya ingin menambah table kamu tambahin saja kode TR dan TD untuk membuat kolomnya, Semoga sukses yah selamat mencoba.

Cara membuat Tabel pada Posting Blog

Senin	Selasa	Rabu
Biologi	Bahasa Inggris	Olahraga
Bahasa Indonesia	PKN	Matematika
IPS	Fisika	Bahasa Indonesia
Matematika	Agama	Tidur

Dibawah ini ada Kode dari Tabel diatas :

<table border="1" style="width: 300px;"><tbody>
<tr bgcolor="#000fff"><td align="center"><b>Senin </b></td><td align="center"><b>Selasa</b></td><td align="center"><b>Rabu</b></td></tr>
<tr><td align="center">Biologi</td><td align="center">Bahasa Inggris</td><td style="text-align: center;">Olahraga</td></tr>
<tr><td align="center">Bahasa Indonesia</td><td align="center">PKN</td><td style="text-align: center;">Matematika</td></tr>
<tr><td align="center">IPS</td><td align="center">Fisika</td><td style="text-align: center;">Bahasa Indonesia</td></tr>
<tr><td align="center">Matematika</td><td align="center">Agama</td><td style="text-align: center;">Tidur</td></tr>
</tbody></table>

Catatan :

1. Kode dasar dalam tabel adalah <table> ... </table>.
2. Kode untuk membuat baris tabel <tr> ... </tr>.
3. Kode untuk membuat kolom tabel <td> ... </td>, ingat satu baris bisa terdiri dari beberapa kolom.
4. Kode umum yang menyertai dalam kode tabel adalah width (...px), border (...px), align (center, left, right) dan bgcolor (kode warna/#......).