[BASIC] Tiga Kolom Tableless

**Neia** · 11-10-08, 07:58

Three Column Tableless by Neia
Tutorial ini dibuat dengan menggunakan External CSS. Dengan external CSS, kamu dapat mengubah sesuka hati dan teratur.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IDGS: Web and Developing Design</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="wrapper">
<h1> Web Developing and Design Tutorial </h1>
<h2> Neia for Indogamers</h2>
<h3> How to make 3 Column Tableless</h3>
<p>Ini adalah Contoh Web untuk 3 Kolom tanpa Table</p>

<div class="row">
<div class="column">
Ini Column 1
</div>

<div class="column">
Ini Column 2
</div>

<div class="column">
Ini Column 3
</div>

</div>

</div>

</body>
</html>

CSS Code

@charset "utf-8";
body {
background:black;
font-family: "trebuchet MS";
font-size: 14px;
}
h1,h2,h3 {color:#FF6600; margin:0px; padding:0px;}
h1 {font-size:24px;}
h2 {font-size:18px;}
h3 {font-size:16px; color:white;}
p {color:white;}

.wrapper {margin:0 auto; width:1024px;}
.row {margin:10px; height:250px;}
.column {width:300px; height:200px; background: white; margin:0px 10px 0px 10px; padding:5px;float:left;}

HowTo :
Langkah pertama, lakukan persiapan seperti minum susu, siapin rokok sebatang kalo buat yang tidak merokok siapin astor aja.

Buka HTML Editor dan mulai coding dasar:

<html>
<head>
<title> Tiga Kolom </title>
</head>
<body></body>
</html>

Save jadi tigakolom.html [terserah aja sih] dan kelar!

Langkah kedua, rokok masih duapertiga atau sudah astor yang ketiga..

Buka Notepad/CSS editor apa saja [dreamweaver juga ok], sebelum dimulai coding, kamu pengen pake baju apa nih buat HTML kamu.

Kalo gua pengen pake baju HITAM dengan bentuk tulisan TREBUCHET MS yang ukuran tulisannyaa 14pixel [hare gini pake hitam? Yeee gua ga takut]

Mulai ketik lagi:

body {
background:black;
font-family: "trebuchet MS";
font-size: 14px;
}

Save jadi styles.css pada direktori yang sama dan jangan lupa kita harus panggil file styles.css dalam HTML.

Kita tambahkan pada HTML:

<html>
<head>
<link href=”styles.css" rel="stylesheet" type="text/css" />
<title> Tiga Kolom </title>
</head>
<body></body>
</html>

Balik lagi ke HTML tadi, kita mulai masukkin isi-isi tubuh kita.

<html>
<head>
<link href=”styles.css" rel="stylesheet" type="text/css" />
<title> Tiga Kolom </title>
</head>
<body>
<div class=”wrapper”>
<h1> Web Developing and Design Tutorial </h1>
<h2> Neia for Indogamers</h2>
<h3> How to make 3 Column Tableless</h3>
<p>Ini adalah Contoh Web untuk 3 Kolom tanpa Table</p>
</div>
</body>
</html>

Sekarang kita setting lagi deh di CSS lagi:

h1,h2,h3 {color:#FF6600; margin:0px; padding:0px;}
h1 {font-size:24px;}
h2 {font-size:18px;}
h3 {font-size:16px; color:white;}

.wrapper {margin:0 auto; width:1024px;}

Penjelasan:
h1,h2,h3 : heading1, heading2, heading3
heading biasa digunakan untuk Judul Artikel dan Sub Judul Artikel. Dalam tag html, heading sudah memiliki aturan margin dan padding, lihat gambar diatas. Dan kini kita telah memodifikasikannya dengan menggunakan CSS. Dengan warna hex #FF6600 dan membuat heading ini tidak memiliki Margin[margin:0px;] dan Padding [padding:0px]

h1: disetting ukuran font 24pixel
h2: disetting ukuran font 18 pixel
h3: disetting ukuran font 16 pixel

.wrapper
Memiliki margin-top:0 dan jarak margin yang lainnya auto, memiliki ukuran lebar sebesar 1024px

Lihat hasilnya:

Kita sekarang buat baris dan kolom.

<html>
<head>
<link href=”styles.css" rel="stylesheet" type="text/css" />
<title> Tiga Kolom </title>
</head>
<body>
<div class=”wrapper”>
<h1> Web Developing and Design Tutorial </h1>
<h2> Neia for Indogamers</h2>
<h3> How to make 3 Column Tableless</h3>
<p>Ini adalah Contoh Web untuk 3 Kolom tanpa Table</p>

<div class=”row”>
<div class=”column”>
Ini Column 1
</div>

<div class=”column”>
Ini Column 2
</div>

<div class=”column”>
Ini Column 3
</div>
</div>
</div>
</body>
</html>

Sekarang setting CSS-nya lagi:

.row {margin:10px; height:250px;}
.column {width:300px; height:200px; background: white; margin:0px 10px 0px 10px; padding:5px; float:left;}

Penjelasan:
Didalam CSS ini kita setting Row(baris) dan Column(kolom)

.row
kotak(div) row berada pada margin atas-kanan-bawah-kiri memiliki jarak 10pixel dan
kotak tersebut memiliki tinggi 250pixel.

.column
Kotak(div) kolom memiliki lebar 300pixel dan tinggi 200pixel
Warna background putih
Setiap kotak kolom memiliki margin atas 0pixel, kanan 10pixel, bawah 0pixel, kiri 10pixel.
Setiap elemen yang berada di dalam kotak kolom memiliki jarak 5pixel (padding)
Setiap elemen column diletakkan sebelah kiri [float]

Lihat hasil:

Dan selesai, kita telah membuat 3 kolom tanpa menggunakan tag table (tableless). Dan tak terasa rokok tinggal secuil.

Susah baca thread ini? Download PDF-nya
tigakolom.pdf

HTML dan CSS SourceCode:
tigakolom.rar

**gabrielle** · 12-12-08, 21:07

wah..mantap..kebetulan lg mw belajar css...

TQ bgt yah...

tambah lagi dunk info2 ttg css sampai tuntas broo...

**gabrielle** · 19-12-08, 21:19

sorry dobelpost..

jelasin dunk apa yg dimaksud dengan eksternal css..??

**ajong** · 20-01-09, 22:55

external css, kode css di taruh file sendiri (nama_file.css) di luar dari kode html
pakai ntu
<link href="css/styles.css" rel="stylesheet" type="text/css" />
nice tutorial

**gandos** · 12-02-09, 14:42

yup nice tutorial.
emang untuk situs di internet, pemakaian table-less 3 column membuat halaman sedikit lebih cepat di akses dari pada halaman yang masih menggunakan table.

cuman hati - hati, terkadang hasil tampilan bisa berbeda untuk tiap - tiap browser (IE, Mozilla - karena tiap browser punya cara2 tersendiri untuk mengartikan rule2 CSS)

emang, pemakaian css di tambah AJAX maka page yang menarik dan interaktif pun anda dapatkan

Thread: [BASIC] Tiga Kolom Tableless

Thread Tools

[BASIC] Tiga Kolom Tableless

Share This Thread

Share This Thread

Posting Permissions