Cara Mudah Membuat Tabel di Blogger
Dalam menulis artikel tidak selamanya kita hanya memasukkan tulisan dan gambar saja. Untuk membuat tampilan yang lebih menarik membentuk atau membuat tabel. Table biasanya digunakan agar kita mudah untuk membaca suatu data, selain itu juga dapat digunakan jika kita ingin menampilkan artikel atau tulisan menjadi dua blok atau beberapa bagian tertentu. Cara pembuatan table di blog sangat mudah, kita hanya perlu mengetahui elemen elemen dasar tentang kode kode html. Apa bila ingin menambah warna anda hanya perlu menambahkan sedikit CSS mau agan buat inline atau embeded terserah, sesuaikan saja dengan kebutuhan.
Silakan simak cara buat tabel di postingan dengan mengikuti langkah-langkah yang ada dibawah ini:
1.Pada tampilan entri blogger klik 'HTML'
2. Masukkan kode berikut
<table border="1" style="width: 100%px;">
<tbody>
<tr><th>Table Heading</th><th>Table Heading</th></tr>
<tr><td colspan="2">dengan 2 kolom</td></tr>
<tr><td rowspan="2">dengan dua baris</td><td>1 sell</td></tr>
<tr><td>1 sell</td></tr>
</tbody></table>
<tbody>
<tr><th>Table Heading</th><th>Table Heading</th></tr>
<tr><td colspan="2">dengan 2 kolom</td></tr>
<tr><td rowspan="2">dengan dua baris</td><td>1 sell</td></tr>
<tr><td>1 sell</td></tr>
</tbody></table>
3. Tampilan pada compose akan seperti berikut
Table Heading | Table Heading |
---|---|
dengan 2 kolom | |
dengan dua baris | 1 sell |
1 sell |
3. keterangan untuk memahami script diatas
- <th>, dimaksudkan sebagai heading suatu tabel.
- <tr>, dimaksudkan sebagai baris.
- <td>, dimaksudkan sebagai cell
- width:100p%, dimaksudkan untuk menentukan lebarnya 100% dari lebar pos atau artikel yang ada anda juga bisa mengganti dengan 25px menggunakan pixel tidak saya sarankan karena tampilan artikel ketika tidak bisa responsiv.
- colspan='2', artinya akan menggunakan dua kolom.
- rowspan='2', artinya akan menggunakan dua baris.
Apabila ingin menambah kolom menjadi 3 gunakan script yang di bawah ini
<table border="1" style="width: 100%px;">
<tbody>
<tr><th>Table Heading</th><th>Table Heading</th><th>Table Heading</th></tr>
<tr><td colspan="2">dengan 2 kolom</td><td>kolom tambahan</td></tr>
<tr><td rowspan="2">dengan dua baris</td><td>1 sell</td><td>kolom tambahan</td></tr>
<tr><td>1 sell</td><td>kolom tambahan</td></tr>
<tr><td>baris tambahan</td><td>baris tambahan</td><td>baris tambahan</td></tr>
</tbody></table>
<tbody>
<tr><th>Table Heading</th><th>Table Heading</th><th>Table Heading</th></tr>
<tr><td colspan="2">dengan 2 kolom</td><td>kolom tambahan</td></tr>
<tr><td rowspan="2">dengan dua baris</td><td>1 sell</td><td>kolom tambahan</td></tr>
<tr><td>1 sell</td><td>kolom tambahan</td></tr>
<tr><td>baris tambahan</td><td>baris tambahan</td><td>baris tambahan</td></tr>
</tbody></table>
Tampilan tabel dengan jumlah kolom 3
Table Heading | Table Heading | Table Heading |
---|---|---|
dengan 2 kolom | kolom tambahan | |
dengan dua baris | 1 sell | kolom tambahan |
1 sell | kolom tambahan | |
baris tambahan | baris tambahan | baris tambahan |
Demikian tutorial membuat tabel di blogspot, caranya sangat mudah bukan? jika mengalami kesulitan jangan ragu untuk bertanya karena malu bertanya sesat di jalan. Semoga Bermanfaat
No comments:
Post a Comment