Membuat layout 2 kolom tanpa tabel dengan CSS

“tableless” atau “tanpa tabel” adalah format website yang saat ini banyak digunakan. Untuk tujuan itu jawabannya adalah dengan menggunakan CSS (Cascading Style Sheet).

Bagi kalian yang masih awam dengan CSS dan masih dalam tahap belajar, masalah yang sering muncul ketika mencoba membuat layout table adalah bagaimana untuk membuat tampilan tabel dengan kolom yang lebih dari satu.

Disini saya akan menjelaskan tutorial singkatnya, menggunakan contoh yang sangat sederhana 🙂

Sebagai awalan, yang akan kita bahas disini adalah untuk layout 2 kolom saja. Hasil akhir yang akan kita buat adalah sebagai berikut:

web10

Bagian yang berwarna kuning adalah kolom yang sebelah kiri, dan bagian yang berwarna hijau adalah kolom yang sebelah kanan.

 

Step 1

Buat sebuah file html (silahkan gunakan Dreamweaver atau software aplikasi penunjang lainnya).  Buka file tersebut, lalu masuk ke bagian code (bukan design).

Pada bagian body ketikkan sintak berikut:
<div id="kiri">ini adalah kolom sebelah kiri</div>
<div id="kanan">ini adalah kolom sebelah kanan</div>

Selector yang dipakai disini adalah id, namun bila Anda ingin menggunakan selector class juga bisa, silahkan saja.


Step 2

Selanjutnya kita akan menuliskan sintak CSS nya. Pada bagian head, ketik sintak berikut:

<style type="text/css">
#kiri
{
width:50%;
height:100px;
background-color:#FF0;
float:left;
}
#kanan
{
width:50%;
height:100px;
background-color:#0C0;
float:right;
}
</style>

Penjelasannya:

  • #kiri dan #kanan adalah nama CSS untuk masing-masing selector id.
  • width:50% artinya kita akan membagi tabel menjadi 2 bagian yang masing-masing lebarnya adalah sama (kiri 50% dan kanan 50%).
  • height:100px artinya tabel yang akan kita buat adalah dengan tinggi sebesar 100px
  • background-color artinya warna dari kolom yang akan dibuat. Masing-masing kolom disini saya beri warna yang berbeda agar disini kita dapat dengan mudah melihat adanya pembagian kolom kiri dan kanan. Yang sebelah kiri kita beri warna kuning (#FF0) dan yang kanan kita beri warna hijau (#0C0).
  • float artinya letak penempatan kolom. Karena kita akan membagi kolom menjadi 2, yaitu kiri dan kanan, maka untuk selector #kiri kita isi nilainya left, dan untuk #kanan kita isi right. Jadi, dalam hal ini atribut float adalah penentu di dalam pembuatan kolom.

Terakhir, simpan file html tersebut dan lihat tampilannya pada browser Anda.

 

Good Luck 🙂

Valent Setiatmi

7 Responses to Membuat layout 2 kolom tanpa tabel dengan CSS

  1. Kalau 2 kolomnya itu atas sama bawah tinggal ganti float’a aja bukan kak..???

    • Valent says:

      maksudnya mau bikin 2 baris?
      kalau mau bikin 2 baris mah ngga usah pake CSS jg udah jadi, karena setiap kita bikin div itu otomatis akan muncul di bawahnya.

  2. owh..gitu kak, heheee.,.,di kirain sama kaya bkin kolom juga..
    🙂

  3. Pakno says:

    Terima kasih atas tutorialnya. Semoga bisa saya praktekkan.

  4. Nina says:

    Terimakasih, sangat membantu 😉

Leave a Reply