Cara Membuat Tabel dalam Postingan Part 2

Sebelumnya kita sudah pernah membahas tutorial ini dengan judul Cara Membuat Tabel dalam Postingan tanpa make part 2. Karena kita pernah membicarakan/membahas ini sebelumnya maka untuk yang kali ini kita namakan Cara Membuat Tabel dalam Postingan Part 2 (wohoho kayak apa aja), ok langsung ke TKP...

Di pembahasan yang kedua kalinya ini kita akan mengenal beberapa macam/tipe tabel

1. Membuat Tabel satu Kolom Saja.

Tampilan:

Tabel Satu Kolom

Kode:

<table border="1">
<tr><td>Tabel Satu Kolom</td></tr>
</table>

2. Membuat Tabel denagn Kolom Vertikal.

Tampilan:

Tabel Vertikal 1

Tabel Vertikal 2

Tabel Vertikal 3

Kode:

<table border="1">
<tr><td>Tabel Vertikal 1</td></tr>
<tr><td>Tabel Vertikal 2</td></tr>
<tr><td>Tabel Vertikal 3</td></tr>
</table>

Kalau kita memperhatikan bentuk tabel pada no.2 awalnya berbentuk tabel no.1 hanya saja memiliki kode <tr><td>Kolom Tabel Vertikal</td></tr> lebih dari satu. Oleh karena itu bagi teman-teman yang ingin membuat 100 tabel, maka tinggal ditambahin aja kode <tr><td>Kolom Tabel Vertikal</td></tr>



3. Membuat Tabel Kolom Horizontal.

Kalau pada nomor satu dan dua merupakan tabel dengan kliteria kolom vertikal maka selanjutnya adalah tabel dengan kriteria kolom Horizontal

Tampilan:

Tabel Horizontal 1

Tabel Horizontal 2

Tabel Horizontal 3

Tabel Horizontal 4

Kode:

<table border="1">
<tr><td>Tabel Horizontal 1</td>
<td>Tabel Horizontal 2</td>
<td>Tabel Horizontal 3</td>
<td>Tabel Horizontal 4</td>
</tr>
</table>

Dari tampilan kode di atas maka kita sekarang tahu, bahwa kunci untuk menambah jumlah tabel adalah dengan menambahkan kode <td>Kolom tabel Horizontal</td>



4. Menyatukan Antara Tabel Vertikal dan Horizontal.

Tampilan:

Satu A	Satu B	Satu C
Dua A	Dua B	Dua C
Tiga A	Tiga B	Tiga C

Kode:

<table border="1">
<tr><td>Satu A</td>
<td>Satu B</td>
<td>Satu C</td>
</tr>
<tr><td>Dua A</td>
<td>Dua B</td>
<td>Dua C</td>
</tr>
<tr><td>Tiga A</td>
<td>Tiga B</td>
<td>Tiga C</td>
</tr>
</table>

Maka bagi teman-teman yang ingin menambahkan kolom pada tabel dengan kliteria bagian Satu (A,B,C) dengan arah horizontal, maka tinggal menambahkan kode <td>Satu D</td> . Dan bagi teman-teman yang ingin menambah jumlah tabel ke bawah/vertikal maka tinggal menambahkan kode:


<tr><td>Empat A</td> <td>Empat B</td> <td>Empat C</td> </tr>


tepat di bawah kode:


<tr><td>Tiga A</td> <td>Tiga B</td> <td>Tiga C</td> </tr>



5. Mengatur Warna Font/tulisan dalam tabel

Selanjutnya bagi teman-teman yang ingin mengatur warna tulisan alias font dalam tabelnya maka dapat dilakukan melalui langkah berikut, o ya sebelum itu lihat dulu contoh tampilan berikut ini:

Tulisan/Font Berwarna	Satu B	Satu C
Dua A	Dua B	Dua C
Tiga A	Tiga B	Tiga C

Maka Kodenya adalah:

<table border="1">
<tr><td><font color="#FF9900">Tulisan/Font Berwarna</font></td>
<td>Satu B</td>
<td>Satu C</td>
</tr>
<tr><td>Dua A</td>
<td>Dua B</td>
<td>Dua C</td>
</tr>
<tr><td>Tiga A</td>
<td>Tiga B</td>
<td>Tiga C</td>
</tr>
</table>

Kunci perubahan warna adalah di bagian kode yang ditebalkan dan yang berwarna orange itulah kode warna yang harus anda sesuaikan dengan warna yang anda inginkan. *Lihat kode warna di sini.


6. Mengatur Warna BackGround

Kalau di nomor lima kita membahas cara mengatur warna font, nah di nomor 6 ini kita bahas cara mengatur warna background. Untuk contoh tampilannya adalah sbg berikut ini:

BackGround Berwarna	Satu B	Satu C
Dua A	Dua B	Dua C
Tiga A	Tiga B	Tiga C

Maka Kodenya adalah:

<table border="1">
<tr><td bgcolor="#ff9900">BackGround Berwarna</td>
<td>Satu B</td>
<td>Satu C</td>
</tr>
<tr><td>Dua A</td>
<td>Dua B</td>
<td>Dua C</td>
</tr>
<tr><td>Tiga A</td>
<td>Tiga B</td>
<td>Tiga C</td>
</tr>
</table>

Untuk melakukan perubahan warna background perhatikan kode di bagian yang tebal, dan yang berwarna orange adalah kode warna backgroundnya, silahkan untuk menyesuaikannya dengan warna keinginan anda. *Lihat kode warna di sini.


7. Tips Tambahan.

>. Mengatur Jenis dan ukuran Font. Perhatikan kode font pada no.5 yang seperti ini lho: <font color="#FF9900">Tulisan/Font Berwarna</font> nah bagi teman-teman yang mau mengatur jenis dan ukuran font maka kode tersebut bisa diubah menjadi seperti berikut ini: <font color="#FF9900"face="Arial" size="12">Tulisan/Font Berwarna</font> . Yang Arial itu adalah jenis font, monggo bisa diganti dengan TN Roman, calibi, dll. Dan yang 12 adalah ukurannya.

>. Untuk menebalkan tulisan/font, maka bisa dilakukan dengan cara ganti kode: <tr><td><font color="#FF9900">Tulisan/Font Berwarna</font></td> dengan kode <tr><td style="font-weight: bold;"><span >Tulisan/Font Berwarna</span></td> Kalau teman-teman masih bingung dengan yang ini, maka bisa juga dilakukan dengan cara yang lebih mudah. Apa maksudnya? Maksudnya kita menggunakan langsung tool yang sudah disediakan oleh Blogger, yaitu tool tebal alias Bold, seperti berikut ini lho:


Nah, dengan kata lain kita hanya perlu memblok tulisan yang ingin kita tebalkan lalu klik tombol Bold. Selesai dah

>. Cara untuk mengatur ketebalan garis tabel. Maka dapat diperhatikan kode: <table border="1"> nah yang angka "1" itu bisa diatur sesuai keinginan teman-teman. Semakin besar angkanya maka semakin tebal pula garis tabelnya.^

>. Mengatur Letak tabel postingan. Kanan, tengah, atau kiri? yang mana aja boleh, itu terserah teman-teman, dan untuk mengaturnya teman-teman bisa memperhatikan kode: <table border="1"> nah untuk mengatur letak tabel, kode tersebut harus diubah menjadi seperti ini: <table align="center"border="1"> selanjutnya teman-teman bisa menyesuaikannya dengan cara mengatur tempatnya: center/tengah, right/kanan, atau left/kiri.



Nah bagaimana? Sekarang kita sudah membahas tuntas masalah tabel^

Selamat mencoba...




Semoga Bermanfaat []

Tags: cara membuat tabel ubtuk blogger, memasang tabel pada postingan, kode html untuk membuat tabel, kode script untuk membuat tabel, cara mudah membuat tabel, cara cepat membuat tabel