Cara Membuat Tabel dalam Blog

Pada Kesempatan Kali ini saya akan Berbagi Tutorial Bagaimana cara membuat Tabel dalam Postingan atau Halaman Blog agar tampilan Blog lebih rapi dan enak di lihat. contoh Tabelnya seperti di bawah ini

No	Nama	Jenis Kelamin
1	Joko	L
2	Siti	P
3	Lucky	L

Sebelum kita Praktek kita pahami dulu Elemen Dalam Pembuatan Tabel

1. Elemen <table> digunakan untuk mendefinisikan pembuatan tabel
2. Elemen <tr> digunakan untuk mendefinisikan pembuatan baris pada tabel
3. Elemen <td> digunakan untuk membuat kolom atau sel di setiap baris pada tabel
4. Elemen <th> digunakan untuk mendefinisikan header di dalam tabel

Langsung saja untuk langkah-langkahnya :

1. Silahkan Login di Blogger.com
2. Silahkan Buat Postingan Atau Halaman 
              
3. Jika hendak membuat tabel silahkan ganti mode penulisan dari compose menjadi mode html


                 



4. Silahkan Copy Pastekan Script Dibawah ini
<style>
table {background:#ffe599;width:100%;border:1px solid black}
th,td {height:10px;padding:5px;border:1px solid white}
th {background:black;color:white}
</style>
</br>
<table>
<tbody>
<tr>
<th>Judul Kolom 1 </th>
<th>Judul Kolom 2 </th>
<th>Judul Kolom 3 </th>
</tr>
<tr>
<td>Daftar isi Kolom 1 Baris 1 </td>
<td>Daftar isi kolom 2 Baris 1 </td>
<td>Daftar isi kolom 3 Baris 1 </td>
</tr>
<tr>
<td>Daftas isi kolom 1 Baris 2 </td>
<td>Daftar isi kolom 2 Baris 2 </td>
<td>Daftar isi kolom 3 Baris 2 </td>
</tr>
<tr>
<td>Daftar isi kolom 1 Baris 3 </td>
<td>Daftar isi kolom 2 Baris 3 </td>
<td>Daftar isi kolom 3 Baris 3 </td>
</tr>
</tbody>
</table>


Keterangan:


• Jika ingin mengganti warna background atau bingkai (border), anda bisa menggantinya dengan warna lain sesuka anda pada kode di dalam atribut style. 
• Pada kolom judul (ditandai warna hijau muda), silahkan isikan kolom dengan 3 judul anda. 
• Pada kolom di bawahnya dan seterusnya (ditandai warna merah), silahkan isi dan sesuaikan dengan daftar isi pada tabel anda. 
• Jika ingin menambahkan kolom baru baik itu ke samping atau pun ke bawah, anda bisa sesuaikan dengan menambahkan deret lagi di bawahnya atau sesuaikan urutannya.
5. Jika sudah diatur semuanya, silahkan publish dan lihat hasilnya.

Sebagai gambaran, berikut saya contohkan penerapannya:

<style>

table {background:#ffe599;width:100%;border:1px solid black}

th,td {height:10px;padding:5px;border:1px solid white}

th {background:black;color:white}

</style>

</br>

<table>

<tbody>

<tr>

<th>No </th>

<th>Nama Siswa;</th>

<th>Hoby </th>

</tr>

<tr>

<td>1 </td>

<td>Andika </td>

<td>Sepak Bola </td>

</tr>

<tr>

<td>2 </td>

<td>Aminah </td>

<td>Menyanyi </td>

</tr>

<tr>

<td>3 </td>

<td>Budianto </td>

<td>Futsal </td>

</tr>

</tbody>

</table>

Dan Hasilnya :

No	Nama Siswa	Hoby
1	Andika	Sepak Bola
2	Aminah	Menyanyi
3	Budianto	Futsal

<style>

table {background:#ffe599;width:100%;border:1px solid black}

th,td {height:10px;padding:5px;border:1px solid white}

th {background:black;color:white}

</style>

</br>

<table>

<tbody>

<tr>

<th align="center" rowspan="2">No </th>

<th align="center" rowspan="2">Nama Siswa;</th>

<th align="center" colspan="2">Jenis Kelamin </th>

</tr>

<tr>

<th align="center">L</th>

<th align="center">P</th>

</tr>

<tr>

<td>1 </td>

<td>Andika </td>

<td>Sepak Bola </td>

</tr>

<tr>

<td>2 </td>

<td>Aminah </td>

<td>Menyanyi </td>

</tr>

<tr>

<td>3 </td>

<td>Budianto </td>

<td>Futsal </td>

</tr>

</tbody>

</table>

Dan Hasilnya :

No	Nama Siswa	Jenis Kelamin
		L	P
1	Andika	L
2	Aminah		P
3	Budianto	L