Cara Menciptakan Tabel Pada Postingan Blog

Cara Membuat Tabel Pada Postingan Blog Kolom Membuat tabel di dalam postingan sangatlah sempurna kalau untuk memperindah dan mengakibatkan simple sebuah data yang banyak dan berdampingan. pastinya sehabis diberi tabel pada postingan blog terlihat rapi dan gampang untuk dipahami.

Tutorial Cara Membuat Tabel Pada Postingan Blog kali ini akan diajarkan dari dasar mengenai proses pembuatan garis atau kolom pada tabel. dengan memakai perintah isyarat maka akan menghasilkan Tabel Kolom Postingan di blog.

Semakin panjang saja penjelasannya,, hehehe. eksklusif kita mulai dari awal yaitu pengenalan isyarat sebagai dasar pembuatannya,Untuk membuat tabel pada postingan hanya membutuhkan tiga isyarat perintah utama. <tabel> <tr> dan  <td>

Penjelasan :

1.     <tabel> : perintah untuk menciptakan tabel
2.     <tr>      : perintah untuk menciptakan baris
3.     <td>     : perintah untuk menciptakan kolom 

Itulah isyarat yang nantinya kita gunakan untuk pembuatan

kolom, tabel dan baris. Langsung Coba!!!!

Contoh Penyusunan Kode :

<table>

<tr>
<td>Kolom 1</td>
<td>Kolom 2</td>
</tr>
<tr>
<td>Kolom 3</td>
<td>Kolom 4</td>
</tr>
</table>

Hasil dari isyarat diatas Jika tidak memakai Border :

Kolom 1	Kolom 2
Kolom 3	Kolom 4

Sekarang kita buat berbentuk kotak tabel dengan memakai pemisah yaitu Border jadi untuk menciptakan hasil menjadi kolom kotak kita gunakan perintah border. Perhatikan Contoh Berikut ini:

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

Dengan perintah suplemen yaitu border maka kesudahannya menyerupai ini :

Kolom 1	Kolom 2
Kolom 3	Kolom 4

Keterangan :

1. Angka 1 dengan warna merah ialah tebal border, kalau ingin ditebalkan tinggal ganti ukuran tebal sesuai impian sobat. 

2. Perhatikan Komponen isyarat dibawah :
<tr>
<td>Kolom 1</td>
<td>Kolom 2</td>
</tr>
<tr>
<td>Kolom 3</td>
<td>Kolom 4</td>
</tr>

Jika diperhatikan warna biru dan merah ialah sama dan disusun kebawah yang mengakibatkan menjadi bertingkat dua kolom menyerupai teladan diatas.bisa disimpulkan jika ditambah kebawah lagi maka akan bertambah kolomnya.

Contoh Keterangan Nomor 1:

<table border="6">
<tr>
<td>Kolom 1</td>
<td>Kolom 2</td>
</tr>
<tr>
<td>Kolom 3</td>
<td>Kolom 4</td>
</tr>
</table>

 Dengan ukuran border dari 1 aku ganti 6 kesudahannya menyerupai ini:

Kolom 1	Kolom 2
Kolom 3	Kolom 4

Contoh Keterangan Nomor 2:

<table border="1">
<tr>
<td>Kolom 1</td>
<td>Kolom 2</td>
<td>Kolom 3</td>
</tr>
<tr>
<td>Kolom 4</td>
<td>Kolom 5</td>
<td>Kolom 6</td>
</tr>
<tr>
<td>Kolom 7</td>
<td>Kolom 8</td>
<td>Kolom 9</td>
</tr>
</table>

Dari perintah diatas maka kesudahannya menyerupai ini:

Kolom 1	Kolom 2	Kolom 3
Kolom 4	Kolom 5	Kolom 6
Kolom 7	Kolom 8	Kolom 9

NB:

Untuk Lebar kolom akan menyesuaikan dengan goresan pena atau teks.  jika sahabat ingin lebar kolom sesuai dengan ukuran, ikuti tutorial dibawah ini:

Test Perintah

Kode perintah Ukuran kolom.

<table border="1" style="width: 500px;"><tbody>
<tr bgcolor="#F2F2F2">
<td align="center"><b>Daftar Isi</b></td>
<td align="center"><b>Keterangan</b></td>
<td align="center"><b>Link</b></td>
</tr>
<tr>
<td align="center" style="width: 100px;">Tutorial</td>
<td align="left" style="width: 300px;">Semua Jenis Tutorial </td>
<td align="center" style="width: 100px;">Download</td>
</tr>
<tr>
<td align="center" style="width: 100px;">Makalah</td>
<td align="left" style="width: 300px;">Makalah Lengkap</td>
<td align="center" style="width: 100px;">Download</td>
</tr>
<tr>
<td align="center" style="width: 100px;">Video</td>
<td align="left" style="width: 300px;">Full Movies</td>
<td align="center" style="width: 100px;">Download</td>
</tr>
</tbody></table>

Hasil dari Kode perintah diatas : 

Daftar Isi	Keterangan	Link
Tutorial	Semua Jenis Tutorial	Download
Makalah	Makalah Lengkap	Download
Video	Full Movies	Download

Keterangan:

500 px ialah angka yang sudah dijumlahkan dari isyarat yang berwarna merah
100 px pertama lebar kolom kiri
300 px lebar kolom tengah
100 px terakhir lebar kolom kanan

Catatan:

 Untuk menambahkan baris gres copy isyarat yang berwarna MERAH sempurna dibawah </tr> yang terakhir
 Untuk merubah keterangan kolom sanggup eksklusif melalui Compose

Langkah Selanjutnya Kita buat Eksperimen semoga Mendapatkan hasil yang kita inginkan : sahabat sanggup mencobanya sendiri. hehehe sekian dulu semoga bermanfaat.

Good Luck

Bagikan Artikel ini