HTML

Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table Anda dapat membuat halaman web “terbagi” pada beberapa kolom atau baris. Contohnya seperti pada halaman web yang sedang Anda baca ini.
Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table :
, , dan dan

. Yang perlu diingat adalah bahwa tab

harus terletak di antara tag dan TABLE> <TABLE> Terdiri dari atribut : align – perataan : rata kiri (left), tengah (center) atau kanan (right). bgcolor – warna latar belakang (background) dari tabel. border – ukuran lebar border tabel (dalam pixel). cellpadding – jarak antara isi cell dengan batas cell (dalam pixel). cellspacing – jarak antar cell (dalam pixel). width – ukuran tabel dalam pixel atau percent. Contoh : <TABLE align=”center” bgcolor=”#0000FF” border=”2″ cellpadding=”5″ cellspacing=”2″ width=”90%”> Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut: align – perataan : rata kiri (left), tengah (center) atau kanan (right). bgcolor – warna latar belakang dari baris. valign – perataan vertikal : top, middle atau bottom. Contoh : – merupakan tag yang berfungsi untuk menandakan suatu baris yang ada di dalam tabel – merupakan tag yang berguna untuk membagi baris tabel untuk menjadi beberapa kolom. Dan dari tag tersebut memiliki atribut seperti di bawah ini: bgcolor - untuk warna backgorund dari tabel background - ini dpaat kita gunakan apabila ingin membuat background tabel di ambil dari suatu gambar width – berguna sebagai atribut untuk menentukan lebar tabel height – menentukan tinggi tabel align - atribut yang berguna untuk mengatur perataan horizontal valign – atribut yang berguna untuk mengatur perataan vertikal border - atribut ini berguna sebagai atribut untuk menentukan lebar bingkai  pada tabel cellspacing – atribut untuk menentukan jarak antar kolom cellpadding – menentukan jarak antara isi dengan tepi kolom (bisa di bilang margin) colspan – atribut yang berguna untuk menentukan berapa kolom tabel yang akan digabung cowspan – atribut yang berguna untuk menentukan berapa baris yang akan digabung Sebagai contoh dari penggunaan tabel, dapat dilihat melalui beberapa contoh tabel dan coding html nya: Tag ini digunakan untuk membuat kolom baru pada tabel. align – perataan background – image yang digunakan sebagai latar belakang dari kolom. bgcolor – warna latar belakang colspan – lihat gambar contoh height – ukuran tinggi cell dalam pixels. nowrap – membuat supaya isi dari kolom tetap berada pada satu baris. rowspan – lihat gambar contoh valign – perataan vertikal :top, middle atau bottom. width – ukuran kolom dalam pixel atau percen. Contoh Berikut Kode HTML yang akan kita gunakan untuk membuat tabel html: – merupakan tag awal, sebagai penanda awal dan menjadi akhir dari suatu pembuatan tabel. Ini kolom pertama Ini kolom kedua Ini kolom pertama baris kedua Ini kolom kedua baris kedua ——————————————————————— BORDER=”1″> Ini kolom pertama Ini kolom kedua Ini kolom pertama baris kedua Ini kolom kedua baris kedua ——————————————————————— height=”200″> width=”70%”> Ini kolom pertama width=”30%”> Ini kolom kedua valign=”top”>Ini kolom pertama baris kedua align=”right”>Ini kolom kedua baris kedua Adapun perintah perintah dasar dari HTML adalah sebagai berikut: 1.     sampai       font ukuran besar    ....         ....    font semakin kecil 2.     Fungsi : perintah untuk membuat garis horizontal penuh layar cth :   3.     Fungsi : membuat teks miring 4.     Fungsi : membuat teks tebal 5.     Fungsi : membuat teks bergaris bawah 6.     Fungsi : membuat text ke tengah layar 7.     Fungsi : Membuat teks rata kiri dan rata kanan Sintak untuk rata kanan untuk rata kiri untuk rata tengah untuk rata kiri dan rata kanan atau Contoh pemakaian: Selamat Datang Ke Website Kami 8.     Fungsi : memasukkan fungsi enter Cth : Jika perintah diberikan di awal atau diakhir baris, maka kalimat berikutnya akan dicetak pada baris berikutnya 9.     Fungsi : membuat komentar Semua teks atau perintah yang diapit oleh perintah ini tidak akan dijalankan 10. Fungsi : memisahkan paragraph yang satu dengan paragraph yang lain 11. Fungsi : membuat teks atau sebuah paragraph agak masuk ke dalam 12. Fungsi : Mengubah ukuran font Contoh : WELCOME TO MY WEBSITE WELCOME TO MY WEBSITE DAN TEBAL 13. Fungsi : mengubah ukuran font, tetapi angka yang terdapat dalam size yang merupakan ukuran font harus diberi tanda kutib 14. Fungsi : mengubah jenis font 15. Fungsi : membuat cetak naik suatu teks Contoh : Kami adalah yang pertama:1stin the world 16. Fungsi : membuat suatu teks cetak turun Contoh : contoh-contoh teks cetak turun : H2O (Disebut Air) dan C2127No (Disebut Methadon) 17. atau Unorder List Fungsi : membuat bullet 18. Fungsi : juga untuk membuat bullet Catatan : perintah harus berada dalam perintah OL,UL,DIR,Menu Contoh : Jawa Timur SURABAYA MALANG GRESIK Jawa Barat Bandung Sukabumi Bogor 19. Fungsi : memasukkan gambar ke dalam Website Anda dapat juga memasukkan gambar berakhiran *.Jpg, *.Gif, *.Bmp dll Sintak : "5" merupakan ukuran border(Bingkai), ganti angka ini sesuai keinginan anda 20. Fungsi : memasukkan suara atau musik ke dalam Website Sintak : Link dengan sorot Berikut adalah contoh program bagaimana membuat link hanya dengan sorot saja (link tak perlu diklik, tetapi cukup disorot dengan mouse. Keterangan Link dengan tombol Berikut adalah contoh program link dengan tombol Sintak : On Click="parent.location="Link anda disini" > Contoh Buatlah link dengan nama tentang_kami.html produk_kami.html cara_memesan.html < HTML > < HEAD > < TITLE > < META name="description"Content=" "> < META name="keywords"Content=" "> < META name="generator"Content="Cute HTML"> < /HEAD > < BODY BGCOLOR="#FFFFFF"Text="#000000"Vlink="#800080" > < Center > < h1 > PT.OCTA > < Input Type="button"value="Tentang Kami" on click="parent.location="c:/website/tentang_kami.html'" > < Input Type="button"value="Produk Kami" on click="parent.location="c:/gambar/produk_kami.html'" > < Input Type="button"value="cara memesan" on click="parent.location="c:/gambar/cara_memesan.html'" > < /Center > < /Body > < /HTML > Kolom < tr > adalah perintah untuk membuat kolom pada notepad Berikut adalah contoh perintah cara membuat kolom pada notepad < html > < head > < title > Belajar membuat kolom < /title > < /head > < H3 Align="Center" > DAFTAR MAHASISWA < H3 > < table border="3" border color="red" < tr > < td > No < td > Nama < td > Alamat < td > No. Phone < td > Gambar < /tr > < tr > < td > 1 < td > Octa < td > Padang Bulan < td > 8214773 < td > < Img src="C:\Documents and Settings\XP\My Documents\My Webs\octa_pic1.JPG" > < /tr > Membuat Frame -Framecols : membagi layar dalam bentuk kolom -FrameRows : membagi layar dengan bentuk baris -Frame Src : menampilkan file dalam frame Bentuknya (Frame cols="30%,*") (Frame Src="Nama.file Name="Teks") (Frame Rows="40%,*") (Frame Src="Nama.file"Nama="teks") (Frame Src="Nama.file"Nama="Teks) (/Frameset) Contoh Program Frame < Html > < Head > < Title >Melink dengan sorot < /Title > < /Head > < Frameset cols="30%,*" > < Frame Src="Nama file"Nama="Teks" > < Frame Rows="40%%,*" > < Frame Src="Gambar File’Nama="Gambar" > < Frame Src="Nama File"Nama="Teks > < /Frameset >