Wednesday, 11 December 2013

Cara membuat tabel diblog

Cara membuat tabel diblog. Akan kita mulai dari Tabel sederhana terlebih dahulu.
Silakan buka entri baru, lalu klik pada bagian HTML disebelah Compose.
Selanjutnya ketikan kode berikut ini.
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
Setelah itu klik bagian Compose, Maka hasilnya akan menjadi seperti ini.
123
Selanjutnya membuat tabel 2 baris
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>

<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
Hasilnya
123
456
Dari contoh diatas, kita dapat melihat bahwa kode tr digunakan untuk membuat tabel ke bawah, sedangkan kode td digunakan untuk tabel kesamping. Jadi jika ingin menambahkan jumlah tabel, silakan tambahkan kode tr dan kode td sesuai dengan keinginan.
Selanjutnya membuat Tabel dengan warna background, lebar tabel serta warna tulisan dengan cara menambahkan kode bgcolor="red" border="1" style="color: white; width: 400px;" pada bagian <table>. Contoh:
<table bgcolor="red" border="1" style="color:white;width:400px;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
Hasilnya
123
456
Sekarang kita coba menggunakan tabel dengan judul diatasnya, dan juga mengatur lebar disetiap judul tabel. Tambahkan kode <th>Judul</th> Contoh:
<table bgcolor="red" border="1" style="color: white;">
<tbody>
<tr>
<th width="40">No</th>
<th width="400">Nama</th>
<th width="400">Kelas</th>
</tr>
<tr>
<td>1</td>
<td>Fandra Juani</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>Juani Fandra</td>
<td>6</td>
</tr>
</table>
Hasilnya
NoNamaKelas
1Fandra Juani3
2Juani Fandra6
Bisa juga dengan menggunakan background yang berbeda. Contoh:
<table bgcolor="white" border="1" style="color: black;">
<tr>
<th bgcolor="blue" width="40">No</th>
<th bgcolor="green" width="400">Nama</th>
<th bgcolor="red" width="400">Kelas</th>
</tr>
<tr>
<td>1</td>
<td>Fandra Juani</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>Juani Fandra</td>
<td>6</td>
</tr>
</table>
Hasilnya
NoNamaKelas
1Fandra Juani3
2Juani Fandra6

Untuk mengatur posisi tulisan kamu bisa gunakan Tool Alignment yang ada dipilihan tool pada saat kita menulis di entri. Sebenarnya masih banyak kode dengan fungsi lain yang dapat digunakan untuk membuat tabel diblog, insyaallah nanti akan saya coba buat diartikel lainnya. Silakan dicoba sendiri dan Semoga bisa bermanfaat untuk anda.

No comments:

Post a Comment