Mengatur Tampilan Web ( tag_tabel vs tag_div )

In CategoryDesain Web
ByDonyYuwono

Wajah website merupakan faktor utama bagi kenyamanan pengunjung dalam berselancar disebuah website. Bak rumah yang dibangun minimalis namun berwana menarik dan tertata rapi baik ruang dan isinya akan membuat pengunjung rindu untuk berkunjung kembali. Untuk mengatur letak obyek dalam mendesain sebuah website ada dua cara yang sering digunakan yaitu dengan <table> (tag table) dan <div> (tag div) yang masing-masing mempunyai kelebihan sendiri-sendiri.

Berbeda dengan <table> yang mempunyai kolom dan baris pada tiap tabelnya yang masing-masing mempunyai properti dan dapat diisi dengan berbagai obyek, <div> hanya mempunyai 1 wadah saja dan jika dibandingkan dengan <tabel>, <div> merupakan satu sel dalam tabel. Walaupun hanya terdiri dari satu wadah tiap block <div> namun satu wadah tersebut dapat berisi beberapa tag HTML lainnya termasuk <div> dan <table>. Kelebihan dari <div> adalah pengaturan letaknya yang lebih leluasa dibandingkan dengan menggunakan tabel.

Contoh 1 :

  1. Buat folder “contoh1” pada direktori “D:\lahitan web”
  2. Buka Notepad ketik kode dibawah ini, kemudian simpan dengan nama contoh1.css kedalam direktori “D:\lahitan web\contoh1”. “D:\lahitan web\contoh1\contoh1.css

    body{ background: #666666; }#menu{
    text-align:right;
    margin-left: auto ;
    margin-right: auto ;
    background:#990000;
    }

    #konten{
    text-align:left;
    margin-left: auto ;
    margin-right: auto ;
    background:#ffff00;
    }

  3. Buat file baru pada Notepad ketik kode dibawah ini, kemudian simpan dengan nama contoh1_div.htm kedalam direktori “D:\lahitan web\contoh1”. “D:\lahitan web\contoh1\contoh1_div.htm”

    <html><head>
    <title>Contoh Menggunakan div</title>
    <link rel=”stylesheet” href=”contoh1.css” type=”text/css” />
    </head>

    <body>

    <div id=”menu”>
    <a href=”contoh1_div.htm”>Beranda</a> |
    <a href=”
    contoh1_tabel.htm“>Contoh Tabel</a> |
    <a href=””>Sejarah</a>
    </div>

    <div id=”konten”>
    Artikel Terbaru
    <p>Dalam paragraf ini berisi panduan untuk membuat desain
    dalam panduan ini terdapat dua cara untuk membuat desain.</p>
    </div>

    </body>

    </html>

  4. Buat file baru pada Notepad ketik kode dibawah ini, kemudian simpan dengan nama contoh1_tabel.htm kedalam direktori “D:\lahitan web\contoh1”. “D:\lahitan web\contoh1\contoh1_tebel.htm”

    <html><head>
    <title>Contoh Menggunakan Tabel</title>
    <link rel=”stylesheet” href=”contoh1.css” type=”text/css” />
    </head>

    <body>

    <table width=”100%”  border=”0″ cellspacing=”0″ cellpadding=”0″>
    <tr>
    <td id=”menu”>
    <a href=”contoh1_tabel.htm”>Beranda</a> |
    <a href=”
    contoh1_div.htm“>Contoh Div</a> |
    <a href=””>Sejarah</a>
    </td>
    </tr>
    <tr>
    <td id=”konten”>

    Artikel Terbaru
    <p>Dalam paragraf ini berisi panduan untuk membuat desain
    dalam panduan ini terdapat dua cara untuk membuat desain.</p></td>
    </tr>
    </table>

    </body>

    </html>

  5. Buka direktori “D:\lahitan web\contoh1” pada Windows Explorer , buka file contoh1_div.htm dan contoh1_tabel.htm menggunakan browser.
  6. Dapat dilihat pada tampilan browser, hasil dari file contoh1_div.htm dan contoh1_tabel.htm setelah ditampilkan dibrowser hasilnya sama.

Download : tabel vs div.pdf

Tags: