Membuat Tabel pada Posting di Blog

Bagi sobat yang masih kesulitan dalam membuat posting, berikut ini akan saya contohkan bagaimana cara membuat tabel dan kotak background pada Posting di Blog.

Membuat tabel di awali dengan tag di bawah ini :

<table width="450px" cellspacing="0px" cellpadding="5" border="2px">
<tr align="center" bgcolor="#39C5FF">
<td>judul kolom1</td>
<td>judul kolom2</td>
<td>judul kolom3</td>
</tr>
<tr align="left">
<td>isi kolom ke 1</td>
<td>isi kolom ke 2</td>
<td>isi kolom ke 3</td>
</tr>
</table>

Contoh:
Kita akan membuat tabel yang berisi nomor, nama, jenis kelamin dan alamat di bawah ini:

<table width="450px" cellspacing="0px" cellpadding="5px" border="2px">
<tr align="center" bgcolor="#39C5FF">
<td><b>No</b></td>
<td><b>Nama</b></td>
<td><b>Jenis Kelamin</b></td>
<td><b>Alamat</b></td>
</tr>
<tr align="left">
<td>1</td>
<td>Sarjono</td>
<td>Laki-laki</td>
<td>Jl. Jawa 290 Surabaya</td>
</tr>
</table>

Hasil :

No	Nama	Jenis Kelamin	Alamat
1	Sarjono	Laki-laki	Jl. Jawa 290 Surabaya

Penjelasan
width="450px" adalah lebar tabel sebesar 450 pixel anda bisa mengganti angka tersebut sesuai dengan keinginan anda
cellspacing="0" jarak antar cell pada tabel sebesar 0 pixel, boleh dikatakan tidak ada jarak.
cellpadding="5px" adalah jarak penulisan dari samping, atas dan bawah cell sebesar 5 pixel, anda bisa mengganti jarak tersebut sesuai dengan keinginan anda.
<tr align="center" bgcolor="#39C5FF"> adalah bahwa kepala tabel rata tengah dan berwarna biru muda.
border="2px" adalah garis tepi dari tabel dengan ketebalan 2 pixel
sedangkan <tr align="left"> adalah bahwa cell untuk isi dari tabel rata kiri dan tidak menggunakan warna.

Bagaimana bila kita menginginkan cell dari isi tabel berwarna putih?
Pada <tr align="left"> tinggal menambahkan bgcolor="#FFFFFF" sehingga menjadi <tr align="left" bgcolor="#FFFFFF">

Masih bingung, baiklah kita menggunakan contoh di atas dengan cell untuk isi tabel berwarna putih, sebagai berikut:

<table width="450px" cellspacing="0px" cellpadding="5px" border="2px">
<tr align="center" bgcolor="#39C5FF">
<td><b>No</b></td>
<td><b>Nama</b></td>
<td><b>Jenis Kelamin</b></td>
<td><b>Alamat</b></td>
</tr>
<tr align="left" bgcolor="#FFFFFF">
<td>1</td>
<td>Sarjono</td>
<td>Laki-laki</td>
<td>Jl. Jawa 290 Surabaya</td>
</tr>
</table>

Hasil :

No	Nama	Jenis Kelamin	Alamat
1	Sarjono	Laki-laki	Jl. Jawa 290 Surabaya

Bagaimana bila isi Tabel lebih dari satu?
Contoh:

<table width="450px" cellspacing="0px" cellpadding="5px" border="2px">
<tr align="center" bgcolor="#39C5FF">
<td><b>No</b></td>
<td><b>Nama</b></td>
<td><b>Jenis Kelamin</b></td>
<td><b>Alamat</b></td>
</tr>
<tr align="left" bgcolor="#FFFFFF">
<td>1<br/>2<br/>3<br/>4</td>
<td>Sarjono<br/>Sartono<br/>Jamilah<br/>Paiman</td>
<td>Laki-laki<br/>Laki-laki<br/>Perempuan<br/>Laki-laki</td>
<td>Jl. Jawa 290 Surabaya<br/>Jl. Bali 322 Surabaya<br/>Jl. Lombok 411 Surabaya<br/>Jl. Sumba 523 Surabaya</td>
</tr>
</table>

Hasil :

No	Nama	Jenis Kelamin	Alamat
1 2 3 4	Sarjono Sartono Jamilah Paiman	Laki-laki Laki-laki Perempuan Laki-laki	Jl. Jawa 290 Surabaya Jl. Bali 322 Surabaya Jl. Lombok 411 Surabaya Jl. Sumba 523 Surabaya

Bila anda menginginkan antar cell untuk isi tabel dipisahkan oleh garis, maka sebagai berikut:
Contoh :

<table width="450px" cellspacing="0px" cellpadding="5px" border="2px">
<tr align="center" bgcolor="#39C5FF">
<td><b>No</b></td>
<td><b>Nama</b></td>
<td><b>Jenis Kelamin</b></td>
<td><b>Alamat</b></td>
</tr>
<tr align="left" bgcolor="#FFFFFF">
<td>1</td>
<td>Sarjono</td>
<td>Laki-laki</td>
<td>Jl. Jawa 290 Surabaya</td>
</tr>
<tr align="left" bgcolor="#FFFFFF">
<td>2</td>
<td>Sartono</td>
<td>Laki-laki</td>
<td>Jl. Bali 322 Surabaya</td>
</tr>
<tr align="left" bgcolor="#FFFFFF">
<td>3</td>
<td>Jamilah</td>
<td>Perempuan</td>
<td>Jl. Lombok 411 Surabaya</td>
</tr>
<tr align="left" bgcolor="#FFFFFF">
<td>4</td>
<td>Paiman</td>
<td>Laki-laki</td>
<td>Jl. Sumba 523 Surabaya</td>
</tr>
</table>

Hasil :

No	Nama	Jenis Kelamin	Alamat
1	Sarjono	Laki-laki	Jl. Jawa 290 Surabaya
2	Sartono	Laki-laki	Jl. Bali 322 Surabaya
3	Jamilah	Perempuan	Jl. Lombok 411 Surabaya
4	Paiman	Laki-laki	Jl. Sumba 523 Surabaya

Semoga bermanfaat dan selamat mencoba!!!

Artikel Lain Yang Terkait :