Di bawah ini ada beberapa contoh kolom sederhana yang bisa anda coba untuk mempercantik tampilan artikel pada blog atau website anda. Untuk membuat kolom pada artikel blog sangatlah mudah, anda hanya menambahkan sedikit kode script ke dalam artikelnya.
Menambahkan kolom pada artikel blog memang akan terlihat indah dan menarik. Banyak para blogger menggunakan kolom pada postingan artikelnya untuk menaruh informasi penting terhadap pengunjung blog mereka.
Untuk contoh kolom di bawah ini, saya hanya membagikan contoh kolom yang sederhana saja. Kolom yang memanjang ke arah kanan dan kolom yang memanjang ke bawah. Masing-masing kolom ini kemudian dihubungkan dengan tabel (table).
Bagi para pengguna blogger, memasang kolom pada postingan artikelnya merupakan salah satu hal penting untuk membantu artikel mereka lebih akurat dan agar lebih mudah dimengerti.
Berikut adalah Cara Membuat Kolom Dengan HTML :
1. Tabel Dua Kolom Ke Samping
Kode :
<table style="border: 2px solid #000; width: 300px;">
<tbody>
<tr>
<td style="background: red; color: black; text-align: center;">Kolom 1</td>
<td style="background: #fff; color: black; text-align: center;">Kolom 2</td>
</tr>
</tbody></table>
<tbody>
<tr>
<td style="background: red; color: black; text-align: center;">Kolom 1</td>
<td style="background: #fff; color: black; text-align: center;">Kolom 2</td>
</tr>
</tbody></table>
Hasilnya :
| Kolom 1 | Kolom 2 |
2. Tabel Tiga Kolom Ke Samping
Kode :
<table style="border: 2px solid #000; width: 300px;">
<tbody>
<tr>
<td style="background: red; color: black; text-align: center;">Kolom 1</td>
<td style="background: #fff; color: black; text-align: center;">Kolom 2</td>
<td style="background: red; color: black; text-align: center;">Kolom 3</td>
</tr>
</tbody></table>
<tbody>
<tr>
<td style="background: red; color: black; text-align: center;">Kolom 1</td>
<td style="background: #fff; color: black; text-align: center;">Kolom 2</td>
<td style="background: red; color: black; text-align: center;">Kolom 3</td>
</tr>
</tbody></table>
Hasilnya :
| Kolom 1 | Kolom 2 | Kolom 3 |
3. Tabel Empat Kolom Ke Samping
Kode :
<table style="border: 2px solid #000; width: 300px;">
<tbody>
<tr>
<td style="background: red; color: black; text-align: center;">Kolom 1</td>
<td style="background: #fff; color: black; text-align: center;">Kolom 2</td>
<td style="background: red; color: black; text-align: center;">Kolom 3</td>
<td style="background: #fff; color: black; text-align: center;">Kolom 4</td>
</tr>
</tbody></table>
<tbody>
<tr>
<td style="background: red; color: black; text-align: center;">Kolom 1</td>
<td style="background: #fff; color: black; text-align: center;">Kolom 2</td>
<td style="background: red; color: black; text-align: center;">Kolom 3</td>
<td style="background: #fff; color: black; text-align: center;">Kolom 4</td>
</tr>
</tbody></table>
Hasilnya :
| Kolom 1 | Kolom 2 | Kolom 3 | Kolom 4 |
4. Tabel Dua Kolom Ke Bawah
Kode :
<table style="border: 2px solid #000; width: 300px;">
<tbody>
<tr>
<td style="background: red; color: black; text-align: center;">Kolom 1</td>
</tr>
<tr><td style="background: #fff; color: black; text-align: center;">Kolom 2</td>
</tr>
</tbody></table>
<tbody>
<tr>
<td style="background: red; color: black; text-align: center;">Kolom 1</td>
</tr>
<tr><td style="background: #fff; color: black; text-align: center;">Kolom 2</td>
</tr>
</tbody></table>
Hasilnya :
| Kolom 1 |
| Kolom 2 |
5. Tabel Tiga Kolom Ke Bawah
Kode :
<table style="border: 2px solid #000; width: 300px;">
<tbody>
<tr>
<td style="background: red; color: black; text-align: center;">Kolom 1</td>
</tr>
<tr>
<td style="background: #fff; color: black; text-align: center;">Kolom 2</td>
</tr>
<tr>
<td style="background: red; color: black; text-align: center;">Kolom 3</td>
</tr>
</tbody>
</table>
<tbody>
<tr>
<td style="background: red; color: black; text-align: center;">Kolom 1</td>
</tr>
<tr>
<td style="background: #fff; color: black; text-align: center;">Kolom 2</td>
</tr>
<tr>
<td style="background: red; color: black; text-align: center;">Kolom 3</td>
</tr>
</tbody>
</table>
Hasilnya :
| Kolom 1 |
| Kolom 2 |
| Kolom 3 |
6. Tabel Empat Kolom Ke Bawah
Kode :
<table style="border: 2px solid #000; width: 300px;">
<tbody>
<tr>
<td style="background: red; color: black; text-align: center;">Kolom 1</td>
</tr>
<tr>
<td style="background: #fff; color: black; text-align: center;">Kolom 2</td>
</tr>
<tr>
<td style="background: red; color: black; text-align: center;">Kolom 3</td>
</tr>
<tr>
<td style="background: #fff; color: black; text-align: center;">Kolom 4</td>
</tr>
</tbody>
</table>
<tbody>
<tr>
<td style="background: red; color: black; text-align: center;">Kolom 1</td>
</tr>
<tr>
<td style="background: #fff; color: black; text-align: center;">Kolom 2</td>
</tr>
<tr>
<td style="background: red; color: black; text-align: center;">Kolom 3</td>
</tr>
<tr>
<td style="background: #fff; color: black; text-align: center;">Kolom 4</td>
</tr>
</tbody>
</table>
Hasilnya :
| Kolom 1 |
| Kolom 2 |
| Kolom 3 |
| Kolom 4 |
Keterangan :
>> Border = Batas tabel.
>> Width = Lebar tabel.
>> Background = Warna latar belakang.
>> Text-Align = Posisi teks.
>> Color = Warna teks.
>> Kolom 1, 2, 3, 4 = Ganti dengan tulisan anda.
Baca Juga : List Dan Kode Warna Paling Lengkap
Demikianlah Cara Membuat Kolom Dengan HTML, dan silahkan untuk mencobanya.