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.

<td colspan=”3″>Menu Hari Ini<td rowspan=”4″>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,-

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″>
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,-

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.

<tr bgcolor=”#48e219″> <td rowspan="4" bgcolor=”#7dc368″>Minuman

<td bgcolor=”#00cf58″>Es Jeruk

<td bgcolor=”#b7f66f”>Es Teh<td bgcolor=”#00b30b”>Es Soda<td bgcolor=”#007d01″>Es Kelapa
Menu Hari Ini
Rp. 1.500,-
Rp. 1.500,-
Rp. 4.000,-
Rp. 4.500,-

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.

<tr align=”center”> <td rowspan="4" align=”center”>Minuman
Menu Hari Ini
Es Jeruk Rp. 1.500,-
Es Teh Rp. 1.500,-
Es Soda Rp. 4.000,-
Es Kelapa Rp. 4.500,-
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.

<tr style=”color: rgb(255, 102, 0);” align=”center”> <td rowspan="4" style=”color: rgb(0, 102, 0);” align=”center”>Minuman
Menu Hari Ini
Es Jeruk Rp. 1.500,-
Es Teh Rp. 1.500,-
Es Soda Rp. 4.000,-
Es Kelapa Rp. 4.500,-
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