Artikel Pembuatan Website

Dias’s Collection
(Asfan M.)
http://Dias-x2.co.cc
mylibra@ymail.com

MODUL CONTOH PEMBUATAN

WEBSITE DENGAN HTML
(TABLE) Bag. 1

2010
Dias’s Collection

1 Modul Pembuatan Website dengan Tabel | Dias’s Collection

 Table
Penggunaan Table dalam pembuatan website tidak bisa di hilangkan, karena dalam
website 80% mengandung unsur table. Bisa di bayangkan jika membuat suatu website
pribadi / formal tanpa adanya pemberian unsur table, huh.... pasti nggak karuan teks-
teksnya, emang sih....peran table bisa digantikan dengan datangnya CSS (Cascading Style
Sheet).
Tapi jika masalah memerankan dalam pembuatan Website, tabel lebih unggul dalam
pembuatan website yang utuh dari header, body, sampai footer. Berikut merupakan tag-tag
yang harus ada dalam pembuatan table :
Atribut Nilai Arti
Meniadakan atau
border 0 s/ 15 menampilkan ketebalan
garis-garis pada tabel
Membuat baris table,
<tr>
- pengaturan semua teks
</tr>
dapat dilakukan disini
<th> Membuat kolom judul
-
</th>
<td> Membuat kolom table isi
-
</td>
LEFT | CENTER | Mengatur horizontal
align
RIGHT alignment
TOP | MIDDLE | Mengatur vertical
valign
BOTTOM alignment
Menentukan lebar dari
Width Px /% tabel, dengan satuan % /
Pixel
Menggabungkan baris
rowspan n table menjadi satu (merge
cells)
Manggabungkan kolom
colspan n table menjadi satu (merge
cells)

2 Modul Pembuatan Website dengan Tabel | Dias’s Collection

  Contoh pembuatan Website dengan table beserta tatanan letak tabel dengan table
nested, menggunakan 2/ lebih metode table. Tergantung si-pembuat menggunakan
cara yang terbaik mana yang digunakan.
Perhatikan gambar di bawah :
 Contoh Metode 1 : (1 Tabel Induk, banyak tabel anak)
Tabel 1 (tabel induk)

Tabel 2 (tabel
header)

Tabel 3 (tabel
header2)

Tabel 4 (tabel
body)

TD 1 (tabel TD 4 (tabel
body) body)

TD 2 (tabel
Tabel 6
body) Tabel 6
(tabel
menu) TD 5 (tabel (tabel menu)
body)

TD 3 (tabel
body)

Tabel 5 (tabel
footer)

Ket :
 Tabel 1 : merupakan tabel yang pertama kali di buat dengan lebar misal 90%
 Tabel 2 : tabel untuk membuat Header lebar 100% (mengikuti table induk)
 Tabel 3 : tabel untuk membuat Header teks informasi dengan lebar 100%
(mengikuti table induk)
 Tabel 4 : tabel untuk membuat Body lebar 100% (mengikuti table induk)
 Tabel 5 : tabel untuk membuat footer lebar 100% (mengikuti table induk)
 TD 1 : kolom dari pembuatan tabel body lebar 23% untuk penempatan menu kiri
 TD 2 : kolom dari pembuatan tabel body lebar 2% untuk penempatan jarak pada
kolom TD 1 & TD 3

3 Modul Pembuatan Website dengan Tabel | Dias’s Collection

  TD 3 : kolom dari pembuatan tabel body lebar 50% untuk penempatan isi web
 TD 4 : kolom dari pembuatan tabel body lebar 2% untuk penempatan jarak pada
kolom TD 3 & TD 5
 TD 5 : kolom dari pembuatan tabel body lebar 23% untuk penempatan menu
kanan

Struktur Tabel diatas

Tabel Induk Tabel 1

Tabel Isi Tabel 1 Tabel 2 Tabel 3 Tabel 4 Tabel 5

Kolom Tabel 3 TD 1 TD 2 TD 3 TD 4 TD 5

Tabel Menu dari TD 1& TD 5 Tabel menu -

menu

Langkah-langkah Pembuatan

 Buat Tabel Induk pertama kali dan tentukan lebarnya dengan ukuran pixel / %,
untuk keakuratan lebih baik dengan pixel, Namun kali ini saya akan membahas
dengan menggunakan dalam satuan %, Misal: <table width=90%>
 Buat Tabel Isi dalam tabel Induk dengan lebar masing-masing 100% dengan
urutan pembuatan :
1. Tabel 2 (Tabel header) dengan lebar 100% dan tinggi di sesuaikan sesuai
kebutuhan
2. Tabel 3 lebar 100%
3. Tabel 4 (Tabel body) dengan lebar 100%, untuk tinggi dalam tabel ini nantinya
akan menyesuaikan dengan isi dalam tabel tersebut, jika terdapat artikel yang
panjang vertikal kebawah maka tinggi akan menyesuaikan dengan panjang
artikel tersebut. Dalam tabel body untuk membuat menu maka perlu di buatkan
kolom-kolom untuk menentukan letak tabel menu, apakah di samping
kiri/kanan/ kedua-duanya kiri-kanan. Untuk membuat kolom menggunakan tag
TD :

4 Modul Pembuatan Website dengan Tabel | Dias’s Collection

  TD 1 dengan lebar 23% nantinya akan digunakan untuk pembuatan tabel
menu di kiri (lebar hanya sebagai misal saja)
 TD 2 lebar 2%, kolom ini hanya untuk pemisah saja bisa digunakan / tidak
 TD 3 lebar 50%, kolom inilah tempat dari Inti Isi Dari Website yang kita
buat.
 TD 4 lebar 2%, kolom ini hanya untuk pemisah saja bisa digunakan / tidak
 TD 5 dengan lebar 23% nantinya akan digunakan untuk pembuatan tabel
menu di kanan (lebar hanya sebagai misal saja)
4. Tabel 5 lebar 100% (tabel footer) tinggi bisa di sesuaikan.

Skript Pembuatan

 Sebelum pembuatan Skript HTML baiknya memperhatikan gambar dan struktur dari contoh
diatas, karena diharapkan mampu menganalisa dan mempunyai gambaran sebelumnya
 Tabel.htm

Sengaja memang skript saya perlihatkan sebagai gambar saja, karena jika
saya buat berupa teks ENAK Donk.....!! Copy-Paste Doank...... Heheheh....

5 Modul Pembuatan Website dengan Tabel | Dias’s Collection

 Hasilnya

Demikian Untuk Kali ini sampai disini saji,,, lain kali ita sambing lagi.....Untuk
Bag.2
Semoga bermanfaat dan berguna bagi yang bisa membuat Web dengan dasar HTML,
Jika ada kata-kata yang tidak enak, di enakin ja Wes.... hihihi....

Terima kasih

Dias’s Collection

6 Modul Pembuatan Website dengan Tabel | Dias’s Collection