Langsung ke konten utama

Cara Membuat Tabel Di Blogger

Bagaimana ya cara bikin tabel di blog bloger?...
Mungkin pertanyaan ini pernah muncul di fikiran anda, yah tentunya ini di sebabkan karena artikel atau isi blog kita tersebut memerlukan adanya tabel.

Tapi ga pakai tabel kan bisa juga?...

Bisa sih... tapi kan kurang bagus di lihatnya dan kurang jelas, dengan adanya tabel kita bisa memperjelas tujuan kita, selain itu akan terlihat lebih mantap, iya to...

Contoh:

Misalnya ketika kita menjual beberapa produk di blog kita, dan kita ingin membuat sebuah halaman kusus dimana halaman tersebut akan kita isi dengan semua produk yang kita tawarkan, tentu kita perlu membuat tabel, iya kaga?...


Okey, mari kita kembali ke topik utama yaitu Cara Membuat Tabel Di Blog Blogger.

Untuk membuat tabel di blogger kita hanya perlu beberapa kode html saja, yang nantinya akan kita gunakan dalam pembuatan tabel, berikut kode-kode html tersebut:


<table> dan </table>
<tr> dan </tr>
<td> dan </td>
Beneran cuma itu saja kode yang di perlukan untuk membuat tabel?...

YA... cukup dengan 3 atau 6 kode tersebut saja kita bisa membuat tabel. tapi ada sedikit kode tambahan sih...
:ahaha:
Mari kita mulai praktek. Silahkan sambil di fahami ya, soalnya kalau terlalu detail nanti artikelnya kepanjangan.

1. Membuat Tabel 2 Kolom kesamping dan 1 kolom kebawah, maka kita cukup menuliskan kode html berikut:
<table width="500" border="1">
<tr>
<td>Kolom 1 </td>
<td>Kolom 2 </td>
</tr>
</table>
Dan Hasilnya akan terlihat seperti ini:
Kolom 1 Kolom 2

Jika ingin merubahnya menjadi 3 kolom kesamping dan 1 kolom kebawah anda cukup menambahkan kode <td>Kolom Tambahan atau Kolom 3</td> saja sebelum kode </table> dan hasilnya akan terlihat seperti ini
Kolom 1Kolom 2Kolom 3

1. Membuat Tabel 2 Kolom kesamping dan 2 kolom kebawah, maka kita cukup menuliskan kode html berikut:

<table width="500" border="1">
<tr>
<td>Kolom 1 A </td>
<td>Kolom 1 B </td>
</tr>
<tr>
<td>Kolom 2 A </td>
<td>Kolom 2 B </td>
</tr>
</table>
Hasilnya Seperti ini:
Kolom 1 AKolom 1 B
Kolom 2 AKolom 2 B

Jika ingin merubahnya menjadi 3 kolom kesamping dan 2 kolom kebawah anda cukup menambahkan kode <td>Kolom Tambahan 1 atau 2 </td> di antara <tr> dan </tr> pertama dan kedua
Contoh:

<table width="500" border="1">
<tr>
<td>Kolom 1 A</td>
<td>Kolom 2 A</td>
<td>Kolom Tambahan 1</td>
</tr>
<tr>
<td>Kolom 1 B</td>
<td>Kolom 2 B</td>
<td>Kolom Tambahan 2 </td>
</tr>
</table>
Maka hasilya seperti ini
Kolom 1 AKolom 2 AKolom Tambahan 1
Kolom 1 BKolom 2 BKolom Tambahan 2

1. Membuat Tabel 3 Kolom kesamping dan 3 kolom kebawah. jika ingin membuat tabel 3 kolom kesamping dan kebawah maka anda cukup menambahkan kode ini sebelum kode </table>
<tr>
<td>Kolom 3 A </td>
<td>Kolom 3 B </td>
<td>Kolom 3 C </td>
</tr>
Hasil kode htmlnya akan seperti ini
<table width="500" border="1">
<tr>
<td>Kolom 1 A </td>
<td>Kolom 1 B </td>
<td>Kolom 1 C </td>
</tr>
<tr>
<td>Kolom 2 A </td>
<td>Kolom 2 B </td>
<td>Kolom 2 C </td>
</tr>
<tr>
<td>Kolom 3 A </td>
<td>Kolom 3 B </td>
<td>Kolom 3 C </td>
</tr>
</table>
Dan hasil tabelnya akan terlihat seperti ini
Kolom 1 AKolom 1 BKolom 1 C
Kolom 2 AKolom 2 BKolom 2 C
Kolom 3 AKolom 3 BKolom 3 C

Keterangan :

Pada tulisan yang saya tulis kolom 1, kolom 1A, kolom 2, dst adalah tempat untuk memasukkan tulisan, link, atau gambar anda. Silahkan ganti sesuai keperluan.

Sedangkan kode ini.
<table width="500" border="1">
Kode yang saya beri warna biru "500" adalah lebar tabel tersebut, anda bisa merubahnya menjadi 700px, 400px, dsb. Jika anda ingin membuat tabel selebar 700px maka anda cukup menulisnya 700 saja.

Mau Coba Praktek?...

Jika ingin mencoba bikin tabel di blog anda silahkan kopi paste saja kode yang sudah saya tuliskan di atas, terserah mau pakai yang mana.

Namun jika setelah kode tersebut anda pasang dan hasilnya tidak sama dengan contoh tabel di blog ini anda jangan heran, itu permasalahannya cuma di CSS nya saja, karena setiap template beda dan tidak semua template blogger ada CSS untuk tabel.

Solusinya yaitu dengan menambahkan kode CSS sendiri di template blog anda, anda bisa memakai kode CSS ini
th, td {margin:0;padding: 5px; border:1px solid #ccc; text-align:center;}
Jika anda sudah faham CSS silahkan bikin kode CSS tabel sesuai selera anda.

Wah saya ga tau gimana dan di mana meletakkan CSSnya.

Untuk menambahkan CSS yang saya tuliskan di atas silahkan ke Design terus ke Edit Html, disana lah tempat persemayaman CSS blog blogger anda (Untuk bagian Edit Html ini nanti akan saya bahas secara tersendiri)

Selamat mencoba dan semoga berhasil.

Komentar

Postingan populer dari blog ini

Memperbaiki Microphone Headset Yang Tidak Mengeluarkan Suara

Internet merupakan sarana komunikasi yang murah dengan menggunakan microphone dan juga aplikasi seperti Skype, YM, dsb. Pernahkah pada suatu ketika anda mengalami microphone / headset yang tidak mengeluarkan suara meskipun kabel jack terhubung dengan baik? Atau mungkin microphone yang justrumengeluarkan suara ketika dihubungkan dengan komputer lain. Pada tulisan kali ini akan menjelaskan beberapa cara untuk mendeteksi penyebabnya. Memperbaiki Microphone Headset Yang Tidak Mengeluarkan Suara Langkah pertama untuk mengatasi permasalahan headset,atau microphone yang tidak mengeluarkan suara adalah memastikan bahwa perangkat tersebut masih berfungsi dengan baik (tidak rusak). Untuk memastikan, anda dapat mencobanya pada beberapa komputer yang berlainan. Bila headset dalam keadaan baik maka anda dapat beralih pada beberapa settingan di komputer anda agar memastikan bahwa ketiga poin dibawah ini ter-setting dalam keadaan benar: Port penghubung Microphone / HeadsetDriver & Settingan Mic…

Siswi SMP ciuman didepan Gurunya

. Dunia Pendidikan Lagi2 Tercoreng, Siswi SMP Ciuman depan Guru
Entah apa yang terjadi, jika semua dilakukan tanpa etika dan Norma, Apalagi jika dilakukan oleh anak – anak / mereka yang nota bene adalah pelajar. Jika yang terpelajar saja tak enggan melakukan hal – hal asusila didepan sang guru, lalu apa yang ada dibenak mereka tentang gurunya. masih berlakukah kalimat bijak “Guru Kencing berdiri, Murid Kencing Berlari” sungguh ironis dan sangat menyedihkan nasib negeri ini selanjutnya.

Mau diapakan pendidikan di negeri ini. seolah – olah tak perlu lagi adanya etika di era yang konon dianggap modern, hingga semuanya menjadi normal – normal saja. Tak ada lagi batasan – batasan yang mampu mencegah nurani untuk sekedar menghambat nafsu birahi. Mungkin hanya kesenangan belaka yang didapat, namun apa akibat yang di timbulkan.

Semuanya seolah tak peduli lagi dengan etika, hancurnya negeri bukanlah karena kemiskinan dan ketidak adilan belaka, namun lebih berdampak mengerikan jika kehancuran …

Anda ingin membuat tulisan atau nama anda sendiri dibuat dalam berbagai bentuk.

Anda ingin membuat tulisan atau nama anda sendiri dibuat dalam berbagai bentuk.
Ketik beberapa kata, pisahkan kata-kata tersebut dengan koma dan tekan tombol “Enter”. Anda dapat juga memilih satu s/d 3 kata atau merubahnya setiap warna pada kata tersebut. Menarik bukan?  Apabila anda ingin mencobanya silakan Klik Disini