Tips Membuat Tabel Bagian Dua

Postingan ini merupakan kelanjutan dari postingan sebelumnya tentang pembuatan tabel dalam blog. Pada postingan yang kedua ini, Tips dan Trik Blog masih akan membicarakan seputar pembuatan tabel terutama yang berhubungan dengan pembuatan merger cells (penggabungan beberapa cell) juga kustomasi warna teks dan background pada tabel. Jika masih membutuhkannya, silakan ikuti tipsnya berikut ini.

MENGGABUNGKAN BEBERAPA CELL (MERGER CELLS)

Ketika membuat tabel, kita mungkin menginginkan penggabungan beberapa cell (merger cells) pada bagian kepala baris atau juga pada bagian kepala kolom sedemikian rupa tampilan tabel menjadi lebih variatif dan tentunya menjadikan tabel lebih mudah dipahami oleh pengunjung. Untuk penggabungan beberapa baris cell, kita menggunakan atribut rowspan dan untuk penggabungan beberapa kolom cell, kita menggunakan atribut colspan.

Contoh aplikasinya rowspan dan colspan adalah seperti di bawah ini.

<table border="1" cellpadding="2" cellspacing="0" width="400"><tbody><tr><td colspan="3">Menu Hari Ini</td></tr><tr><td rowspan="4">Minuman</td><td>Es Jeruk</td><td>Rp. 1.500,-</td></tr><tr><td>Es Teh</td><td>Rp. 1.500,-</td></tr><tr><td>Es Soda</td><td>Rp. 4.000,-</td></tr><tr><td>Es Kelapa</td><td>Rp. 4.500,-</td></tr><tr><td rowspan="3">Makanan</td><td>Nasi Pecel</td><td>Rp. 3.000,-</td></tr><tr><td>Nasi Soto</td><td>Rp. 5.000,-</td></tr><tr><td>Nasi Rawon</td><td>Rp. 5.500,-</td></tr></tbody></table>

Hasilnya menjadi seperti di bawah ini.

Menu Hari Ini
Minuman	Es Jeruk	Rp. 1.500,-
	Es Teh	Rp. 1.500,-
	Es Soda	Rp. 4.000,-
	Es Kelapa	Rp. 4.500,-
Makanan	Nasi Pecel	Rp. 3.000,-
	Nasi Soto	Rp. 5.000,-
	Nasi Rawon	Rp. 5.500,-

Jika kita mendapati hasil tabel yang tidak rapi atau terdapat gap di antara border-bordernya maka seperti yang pernah Tips Trik Blog sampaikan pada postingan yang lalu, kita harus menghilangkan line break antar baris, pada mode “Edit HTML” kemudian rapatkan semua kode html sedemikian rupa sehingga tidak ada ada spasi dan line break yang memisahkan antar semua kode tersebut. Lebih jelasnya silakan lihat pada postingan yang lalu di bagian bawah.

WARNA BORDER DAN BACKGROUND TABEL

Untuk membuat lebih terlihat menarik, kita dapat memberikan warna baik pada border maupun pada backround tabel.

Contoh aplikasinya seperti di bawah ini.

<table border="4" bordercolor="#0B610B" bgcolor="#BEF781" cellpadding="2" cellspacing="0" width="400"><tbody><tr><td colspan="3">Menu Hari Ini</td></tr><tr><td rowspan="4">Minuman</td><td>Es Jeruk</td><td>Rp. 1.500,-</td></tr><tr><td>Es Teh</td><td>Rp. 1.500,-</td></tr><tr><td>Es Soda</td><td>Rp. 4.000,-</td></tr><tr><td>Es Kelapa</td><td>Rp. 4.500,-</td></tr><tr><td rowspan="3">Makanan</td><td>Nasi Pecel</td><td>Rp. 3.000,-</td></tr><tr><td>Nasi Soto</td><td>Rp. 5.000,-</td></tr><tr><td>Nasi Rawon</td><td>Rp. 5.500,-</td></tr></tbody></table>

Keterangan

Kita dapat mengganti warna border dan background sesuai dengan selera masing-masing, dengan cara mengganti kode warna pada atribut bordercolor dan atribut background dan ntuk mengetahui kode warna, silakan berkunjung di sini.

Hasilnya seperti di bawah ini di mana warna border menjadi hijau tua dan warna background menjadi hijau muda.

Menu Hari Ini
Minuman	Es Jeruk	Rp. 1.500,-
	Es Teh	Rp. 1.500,-
	Es Soda	Rp. 4.000,-
	Es Kelapa	Rp. 4.500,-
Makanan	Nasi Pecel	Rp. 3.000,-
	Nasi Soto	Rp. 5.000,-
	Nasi Rawon	Rp. 5.500,-

Kita juga dapat mengkustomasi masing-masing baris cell dengan warna yang berbeda, dengan cara menyisipkan pada tag ataupun .

Aplikasinya seperti di bawah ini.

<table border="4" border cellpadding="2" cellspacing="0" width="400"><tbody><tr bgcolor="#48e219"><td colspan="3">Menu Hari Ini</td></tr><tr><td rowspan="4" bgcolor="#7dc368">Minuman</td><td bgcolor="#00cf58">Es Jeruk</td><td>Rp. 1.500,-</td></tr><tr><td bgcolor="#b7f66f">Es Teh</td><td>Rp. 1.500,-</td></tr><tr><td bgcolor="#00b30b">Es Soda</td><td>Rp. 4.000,-</td></tr><tr><td bgcolor="#007d01">Es Kelapa</td><td>Rp. 4.500,-</td></tr></tbody></table>

Hasilnya seperti di bawah ini. Silakan diganti sendiri warnanya, ini hanya contoh saja.

Menu Hari Ini
Minuman	Es Jeruk	Rp. 1.500,-
	Es Teh	Rp. 1.500,-
	Es Soda	Rp. 4.000,-
	Es Kelapa	Rp. 4.500,-

PENGATURAN PERATAAN TEKS PADA CELL

Secara default, perataan teks pada cell adalah left (rata kiri) namun jika menginginkan kita dapat melakukan pengaturan sesuai selera sehingga tabel akan menjadi lebih estetis.

Contoh aplikasinya seperti di bawah ini.

<table border="1" cellpadding="2" cellspacing="0" width="400"><tbody><tr align="center"><td colspan="3">Menu Hari Ini</td></tr><tr><td rowspan="4" align="center">Minuman</td><td>Es Jeruk</td><td>Rp. 1.500,-</td></tr><tr><td>Es Teh</td><td>Rp. 1.500,-</td></tr><tr><td>Es Soda</td><td>Rp. 4.000,-</td></tr><tr><td>Es Kelapa</td><td>Rp. 4.500,-</td></tr></tbody></table>

Hasilnya seperti di bawah ini di mana teks “Menu Hari Ini” dan juga “Minuman” telah menjadi rata tengah sehingga terlihat lebih estetis.

Menu Hari Ini
Minuman	Es Jeruk	Rp. 1.500,-
	Es Teh	Rp. 1.500,-
	Es Soda	Rp. 4.000,-
	Es Kelapa	Rp. 4.500,-

WARNA FONT ATAU TEKS

Jika menginginkan kita dapat mengubah warna sesuai dengan selera masing-masing, dengan cara menambahkan atribut warna dengan format “style=”color:rgb(R,G,B)” (tanpa tanda petik). Untuk melihat kode warna RGB, dapat dilihat di sini.

Aplikasinya seperti di bawah ini.

<table border="1" cellpadding="2" cellspacing="0" width="400"><tbody><tr style="color: rgb(255, 102, 0);" align="center"><td colspan="3">Menu Hari Ini</td></tr><tr><td rowspan="4" style="color: rgb(0, 102, 0);" align="center">Minuman</td><td>Es Jeruk</td><td>Rp. 1.500,-</td></tr><tr><td>Es Teh</td><td>Rp. 1.500,-</td></tr><tr><td>Es Soda</td><td>Rp. 4.000,-</td></tr><tr><td>Es Kelapa</td><td>Rp. 4.500,-</td></tr></tbody></table>

Hasilnya seperti di bawah ini di mana warna teks “Menu Hari Ini” dan “Minuman” telah berubah menjadi warna seperti yang kita inginkan.

Menu Hari Ini
Minuman	Es Jeruk	Rp. 1.500,-
	Es Teh	Rp. 1.500,-
	Es Soda	Rp. 4.000,-
	Es Kelapa	Rp. 4.500,-

Pada postingan kali ini, kiranya sampai di sini dahulu, Insya Allah postingan tentang pembuatan tabel ini akan kita lanjutkan pada postingan berikutnya.

Terima kasih atas atensinya dan semoga bermanfaat!!

Bersambung ke Pembuatan Tabel Bagian Ketiga

Harus dibaca yang ini.

Cara Membuat Tabel Bag. Pertama
Cara Pembuatan Tabel Bag. Kedua
Cara Pembuatan Tabel Bag. Ketiga
Cara Pembuatan Tabel Bag. Keempat
Description: Tips Membuat Tabel Bagian Dua Rating: 4.5 Reviewer: Unknown - ItemReviewed: Tips Membuat Tabel Bagian Dua