Cara Membuat Tabel Sederhana Di Postingan Blog

Tabel diperlukan untuk membuat semacam laporan atau sekedar ingin membuat postingan terlihat lebih rapi. Buat yang bingung cara membuat tabel, berikut langkah - langkahnya. Untuk membuat tabel sederhana dibutuhkan kode HTML seperti di bawah.

<table border="1" style="width: 400px;"><tbody>
<tr><td style="text-align: center;">NAMA</td><td style="text-align: center;">MARK ZUCKERBERG</td></tr>
<tr><td style="text-align: center;">JENIS KELAMIN</td><td style="text-align: center;">PRIA</td><tr>
</tbody></table>

Maka hasilnya akan seperti ini.

NAMA	MARK ZUCKERBERG
JENIS KELAMIN	PRIA

Untuk menambah kolom ke bawah maupun ke samping, tinggal kita copy kode yang diperlukan dengan melihat rincian di atas.

<table border="1" style="width: 400px;"><tbody>
<tr><td style="text-align: center;">NAMA</td><td style="text-align: center;">MARK ZUCKERBERG</td><td style="text-align: center;">TAMBAHAN</td></tr>
<tr><td style="text-align: center;">JENIS KELAMIN</td><td style="text-align: center;">PRIA</td><td style="text-align: center;">TAMBAHAN</td><tr>
</tbody></table>

NAMA	MARK ZUCKERBERG	TAMBAHAN
JENIS KELAMIN	PRIA	TAMBAHAN

<table border="1" style="width: 400px;"><tbody>
<tr><td style="text-align: center;">NAMA</td><td style="text-align: center;">MARK ZUCKERBERG</td></tr>
<tr><td style="text-align: center;">JENIS KELAMIN</td><td style="text-align: center;">PRIA</td><tr>
<tr><td style="text-align: center;">TAMBAHAN</td><td style="text-align: center;">TAMBAHAN</td><tr>
</tbody></table>

NAMA	MARK ZUCKERBERG
JENIS KELAMIN	PRIA
TAMBAHAN	TAMBAHAN

Keterangan :

• 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.