Sabtu, 24 Desember 2011

Cara Membuat Tabel Sederhana Pada Postingan Blog


Dalam membuat suatu artikel di blog terkadang dibutuhkan sebuah tabel. Tabel tersebut dapat membuat tulisan menjadi rapi sehingga enak untuk dibaca.

Untuk membuat tabel sederhana, paling tidak dibutuhkan kode HTML seperti di bawah ini.

<table border="1" style="width: 400px;"><tbody>
<tr><td style="text-align: center;">ELEMEN SEL 1</td><td style="text-align: center;">ELEMEN SEL 2</td></tr>
<tr><td style="text-align: center;">ELEMEN SEL 3</td><td style="text-align: center;">ELEMEN SEL 4</td></tr>
</tbody></table>

Border menunjukkan ketebalan garis tepi tabel. Semakin besar angka atau nilainya maka semakin tebal garis tepi tabelnya. Bila nilainya diganti dengan nol (0px) maka garis tabelnya menjadi tidak terlihat.

Text-align: center; menunjukkan perataan sebuah teks berada di tengah-tengah. Kalau ingin teksnya menjadi rata kanan maka kata center diganti dengan right. Left untuk rata kiri dan justify untuk rata kiri-kanan.

Width menunjukkan lebar dari suatu tabel tersebut. Angka 400px dapat diganti sesuai keperluan. kalau mau menyamakan dengan lebar halaman posting, tinggal diganti saja angka 400px menjadi 100%.

<tr> ... </tr> menunjukkan baris sebuah tabel. Sedangkan <td> ... </td> menunjukkan sel sebuah tabel. Bentuk kode HTML di atas adalah tabel yang mempunyai 2 kolom dan 2 baris. ELEMEN SEL dapat diisi dengan teks, link, atau gambar. Bila ingin menambah jumlah baris atau kolom, tinggal ditambahkan saja kode HTML untuk membentuk baris dan kolom.

Bila kode HTML tabel di atas diletakkan pada menu Edit HTML, maka hasilnya akan terlihat seperti di bawah ini.

ELEMEN SEL 1ELEMEN SEL 2
ELEMEN SEL 3ELEMEN SEL 4


Share on Facebook
Share on Twitter
Share on Google+
Tags :

Baca Juga : Cara Membuat Tabel Sederhana Pada Postingan Blog



About - Disclaimer - Privacy Policy | Copyright © Kamu Klik