Pengenalan HTML ( tag dasar sampai tabel)

Pengenalan HTML

Ketika Anda melihat sebuah halaman web dalam web browser, Anda lihat pada level paling sederhana, kata-kata. Kata-kata tersebut biasanya memiliki karakteristik gaya, seperti perbedaan ukuran huruf dan warna. Dalam beberapa kasus, di dalam sebuah halaman web juga menampilkan gambar-gambar atau mungkin video. Kadang juga terdapat formulir dimana kamu bisa memasukkan (atau mencari) informasi, atau merubah penampilan web sesuai dengan keinginan Anda. Kadang dalam sebuah halaman juga terdapat konten bergerak dan konten yang berubah sedangkan yang lainnya tidak.

Berbagai macam teknologi (seperti CSS, JavaScript, Flash, AJAX, JSON) dapat digunakan untuk mendefinisikan elemen dari sebuah halama web. Akan tetapi, pada level paling rendah, sebuah halaman web didefinisikan dengan menggunakan HTML (HyperText Markup Language). Tanpa HTML maka tidak akan ada halaman web.

Artikel ini berisi pengenalan terhadap HTML. Jika Anda penasaran akan apa yang terjadi dibalik layar browser Anda, maka artikel ini adalah tempat yang tepat untuk mulai mempelajarinya.

Pengertian HTML

HTML adalah suatu bahasa yang dipergunakan untuk mendeskripsikan halaman web.

• HTML merupakan singkatan dari Hyper Text Markup Language.
• HTML bukan merupakan bahasa pemrograman, HTML adalah suatu markup language (bahasa markah).
• Suatu markup language berupa serangkaian markup tags.
• HTML menggunakan markup tags untuk mendeskripsikan halaman web.

Sejarah singkat HTML

·         Di akhir tahun 1980an, Tim Berners-Lee bekerja sebagai seorang physicist di CERN (Sebuah Organisasi untuk research nuklir di eropa). Beliau merancang sebuah jalan bagi para scientis untuk berbagi dokumen melalui internet. Sebelum invensi ini, komunikasi melalui internet hanya terbatas pada dokumen teks biasa menggunakan beberapa teknologi seperti email,, FTP (File Transfer Protocol), dan Panel diskusi berbasis Usenet. Invensi dari HTML memanfaatkan model dan konten yang disimpan dalam server pusat yang dapat ditransfer dan ditampilkan pada workstation lokal melalui browser. Invensi ini menyederhanakan akses terhadap konten dan memungkinkan untuk menampilkan konten yang "kaya" (seperti  pemformatan teks yang mutakhir dan menampilkan gambar).

.

Teori Dasar HTML

·         Untuk membangun sebuah web page dibutuhkan sebuah Bahasa pemrograman yang lebih dikenal dengan sebutan web scripting. Dikatakan script karena perintah kode program tersebut akan di interpreter dan tidak ada kompilasi untuk menjadikannya executable . Berdasarkan letak proses interpreter maka web scripting dibagi menjadi dua kategori, yaitu bersifat client side dan server side. Cliend side dilakukan oleh web browser seperti Internet Explorer, Netscape, Opera, dan Firefox. Untuk contoh Bahasa Client side adalah HTML, CSS, Javascript, VBscript, dan XML. Sedangkan server side dilakukan oleh web server seperti PWS (Personal Web Server), IIS, Apache, Tomcat, Xitami, dan ZOPE. Untuk contoh Bahasa server sode adalah ASP (.Net), PHP, JSP, CFM, dan CGI/PL.

·         Web Scripting yang bersifat client side akan menghasilkan web page yang bersifat statis artinya lebih menekankan pada desain format tampilan informasi dan informasi yang disajikan tidak dapat diupdate seketika, karena tidak dapat dilakukan request interaktif dari pengguna dan proses tidak terjadi di server sehingga tidak akan menghasilkan output apa pun. Sehingga sangatlah tidak mungkin untuk menciptakan aplikasi web yang bersifat dinamis dengan web scripting bersifat clien side ini, tetapi harus di kombinasikan juga dengan web scripting yang bersifat server side.

Apa itu Dokumen HTML?

·         HTML atau Hypertext Markup Language adalah Bahasa dasar untuk web scripting bersifat client side yang memungkinkan untuk menampilkan informasi dalam bentuk teks, grafik, serta multimedia dan juga menghubungkan antar tampilan web (Hyperlink).. HTML merupakan salah satu format yang digunakan dalam pembuatan dokumen dan aplikasi berjalan di halaman web. Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan pada web browser.

·         Ada dua cara untuk membuat sebuah web page,yaitu dengan HTML editor yang berbasis GUI (Graphical User Interface) (misalnya Microsoft Frontpage, Macromedia Dreamweaver, Adobe Dreamweaver, dll) atau dengan editor teks biasa (misalnya Notepad, Edit Plus, dll).Pada HTML editor berbasis GUI program-program ini anda tidak perlu mengetik kode HTMLnya, semua perintahnya di wujudkan secara icon base.Tetapi bagi seorang pengembang aplikasi web maka diperlukan kemampuan penguasaan terhadap kode-kode HTML sangatlah penting, sehingga sangatlah disarankan untuk menguasai kode peintah HTML pergunakanlah terlebih dahulu editor text (misalnya Notepad)

Penamaan Dokumen

·         Dalam penamaan sebuah dokumen yang akan ditampilkan pada web browser maka nama yang digunakan harus diakhiri dengan ektensi (.html) atau (.htm), misalnya latihan.html.

·         Ekstensi dokumen HTML awalnya 3 karakter , adalah untuk mengakomodasikan sistem penamaan dalam DOS.Nama dokumen pada beberappa system operasi bersifat case sensitive , artinya nama yang sama tetapi dituliskan dengan case berbeda akan dianggap sebagai dokumen berbeda,misalnya document.html akan dianggap berbeda dengan DOKUMEN.html. Kasus case sensitive sering dijumpai di server yang berbasis *nix (sistem operasi Unix)

Definisi Elemen

·         Sebuah dokumen HTML disusun oleh beberapa Elemen. Elemen merupakan istilah bagi komponen-komponen dasar pembentuk dokumen HTML. Elemen dapat berupa teks murni, atau bukan teks, atau keduanya. Beberapa contoh elemen adalah : head, body, table, paragraf, dan list.

HTML Tags

HTML markup tags biasa disebut HTML tags.

• HTML tags berupa keywords atau kata kunci yang diapit oleh tanda kurung seperti <html>.
• HTML tags biasanya dipakai berpasangan seperti <b> dan </b>.
• Tag pertama dalam pasangan html tags adalah start tag atau tag awal, sedang tag kedua adalah end tag atau tag akhir.
• Start tags dan end tags biasa juga disebut opening tags dan closing tags.

HTML Documents = Web Pages

• HTML documents atau dokumen HTML mendeskripsikan suatu web pages atau halaman web.
• HTML documents berisi HTML tags dan plain text atau text biasa.
• HTML documents atau dokumen HTML juga biasa disebut web pages atau halaman web.

Tujuan dari sebuah web browser (seperti Internet Explorer, Firefox, Opera, Safari atau Google Chrome) adalah untuk membaca HTML documents kemudian menampilkannya sebagai halaman web. Browser tidak menampilkan HTML tags, tetapi menggunakan tag tersebut untuk menterjemahkan isi dari halaman web.

1 2 3 4 5 6 7 8 9

<html> <body> <h1>Judul Pertama</h1> <p>Paragraf pertama</p> </body> </html>

Coba contoh HTML diatas dengan HTML Editor.

Penjelasan Contoh

• Teks di antara <html> dan </html> mendeskripsikan web page.
• Teks di antara <body> dan </body> adalah konten halaman web yang akan tertampil.
• Teks di antara <h1> dan </h1> digunakan untuk menampilkan judul.
• Teks di antara <p> dan </p> digunakan untuk menampilkan paragraf.

Pembuatan Web HTML sederhana

·         Hal yang dibutuhkan dalam pembuatan web HTML adalah sebagai berikut :

Ø  Sebuah computer yang bisa membuka web. Minimal dengan OS Windows 95/98/NT, Mac, atau Unix.

Ø  Editor Text, Notepad atau yang lainnya

Ø  Browser web, direkomendasikan Mozila Firefox atau Google Chrome

Ø  Imajinasi untuk membangun website sendiri

·         Mencoba adalah kunci dari cara belajar HTML ini untuk mengetahui langsung apa yang dihasilkan dari setiap tag yang digunakan untuk membuat  dan mudah diingat.

·         Pertama yang harus anda lakukan adalah membuka Editor Text, misalnya Notepad.

·        
Tuliskan kode berikut ke dalam Notepad :

·         Catatan :

·         Biasakan pada saat menulis tag,tulis tag pembuka dan penutup secara berurutan karena pada sebuah kasus ada orang yang lupa memberi tag penutup.Biasakan juga pada saat menulis kode html tag pembuka dan penutup sejajar karena akan sangat memudahkan pada saat memeriksa kesalahan.

·          

·          

Petunjuk menggunakan Tag

·         Dalam pembuatan dokumen HTML, penulisan elemen diawali dan diakhri dengan tanda tag HTML memiliki syarat yaitu :

·         Ø  Tag HTML diapit dengan dua karakter kurung bersudut (angle bracket) [<] dan [>]

·         Ø  Tag HTML secara normal selalu berpasangan seperti <b> dan </b>

·         Ø  Tag pertama dalam suatu pasangan adalah tag awal, dan tag yang kedua merupakan tag akhir

·         Ø  Tag html tidak ‘case sensitive’. Seperti <b> sama dengan <B>

·         Ø  Jika dalam suatu tag ada tag lagi, maka penulisan tag akhir tidak boleh bersilang harus berurut. Misalnya <b><i> Huruf tebal dab miring </i></b>

·         Gunakan tag dengan huruf kecil (lowercase) karena untuk menyiapkan diri menggunakan HTML berikutnya (Rekomendasi W3C)

Tag	Keterangan
<!-- ... -->	Digunakan untuk memberi sebuah komentar atau keterangan. Kalimat yang terletak pada kontiner ini tidak akan terlihat pada browser
<!DOCTYPE>	Mendefinisikan informasi tipe dokumen
<a>	Mendefinisikan sebuah anchor, tetapi lebih tepat jika diartikan sebagai tautan dikarenakan tautan ini digunakan untuk saling menautkan antara satu dokumen HTML ke dokumen HTML yang lain
<abbr>	Digunakan untuk menguraikan satu ungkapan yang disingkat dan Anda dapat memberikan informasi bermanfaat kepada penelusur-penulusur page source(halaman sumber kode) / pembaca layar, sistem terjemahan dan mesin pencari yang berasal dari singkatan yang sudah diuraikan, tetapi saat di browser uraian tersebut tidak akan tampil dan hanya sebagai informasi saja
<acronym>	Mendefinisikan akronim / fungsi tag ini kurang lebih sama dengan tag <abbr>
<address>	Mendefinisikan informasi kontak untuk penulis/pemilik dokumen
<applet>	Digunakan untuk memasukan file java kedalam dokumen HTML
<area />	Mendefinisikan daerah yang dapat diklik (link) pada peta gambar
<b>	Membuat teks tebal
<base />	Mendefinisikan URL dasar/target untuk semua URL relatif dalam dokumen
<basefont />	Membuat atribut teks default, seperti warna, ukuran, jenis font untuk semua teks dalam dokumen
<bdo>	Digunakan untuk menimpa arah teks
<big>	Memperbesar ukuran teks sebesar satu point dari defaultnya
<blink>	Membuat teks berkedip
<blockquote>	Mendefinisikan sebuah kutipan panjang. Pada saat di browser teks akan tampil menjorok kedalam
<body>	Mendefinisikan body/isi dokumen HTML, berfungsi untuk menentukan bagaimana isi suatu dokumen ditampilkan di web browsernya. Isi dokumen tersebut dapat berupa teks, gambar, animas, link dan seterusnya
<br />	Memberi baris baru/pindah baris
<button>	Mendefinisikan sebuah tombol diklik
<caption>	Membuat caption pada tabel
<center>	Untuk perataan tengah terhadap teks atau gambar
<cite>	Mendefinisikan kutipan
<code>	Mendefinisikan sebuah bagian dari kode komputer
<col />	Mendefinisikan nilai atribut dari satu kolom atau lebih dalam sebuah tabel
<colgroup>	Menentukan kelompok dari satu kolom atau lebih dalam sebuah tabel untuk performatan
<dd>	Mendefinisikan deskripsi dari item dalam daftar definisi
<del>	Untuk memberi garis tengah pada teks/mencoret teks
<dfn>	Mendefinisikan sebuah istilah definisi
<dir>	Mendefinisikan sebuah daftar direktori
<div>	Mendefinisikan sebuah section dalam dokumen
<dl>	Mendefinisikan sebuah daftar definisi
<dt>	Mendefinisikan istilah (item) dalam daftar definisi
<em>	Membuat teks miring. Fungsi tag ini sama dengan tag <i> tetapi tag <em> yang lebih dianjurkan/ditekankan pada penggunaan untuk teks miring
<embed>	Digunakan untuk memasukkan file video atau file musik
<fieldset>	Untuk mengelompokkan elemen-elemen yang terkait dalam form / membuat seperti frame-box di dalam form
<font>	Mendefinisikan jenis font, warna dan ukuran untuk teks
<form>	Mendefinisikan sebuah form HTML untuk input form
<frame />	Mendefinisikan frame dalam fremeset
<frameset>	Mendefinisikan satu set frame
<h1> to <h6>	Digunakan untuk menunjukkan awal dari suatu header/judul dari dokumen HTML tersebut.
<head>	Digunakan untuk memberikan informasi tentang dokumen tersebut
<hr />	Membuat garis horisontal
<html>	Mendefinisikan root dari suatu dokumen HTML
<i>	Membuat teks miring
<iframe>	Mendefinisikan sebuah inline frame
<img />	Berfungsi untuk menampilkan gambar pada dokumen HTML
<input />	Mendefinisikan input field pada form
<ins>	Membuat teks bergaris bawah
<kbd>	Mendefinisikan teks yang di input dari keyboard
<label>	Mendefinisikan label untuk sebuah elemen <input>
<legend>	Mendefinisikan sebuah caption untuk elemen <fieldset>
<li>	Digunakan untuk menampilkan informasi dalam bentuk item daftar
<link />	Mendefinisikan hubungan antara dokumen dan sumber eksternalnya
<listing>	Fungsi tag ini sama dengan tag <pre> dan dianjurkan menggunakan tag <pre> karena tag <listing> tidak layak/diprotes
<map>	Mendefinisikan client-side peta gambar
<marquee>	Membuat teks berjalan secara vertikal atau horisontal
<menu>	Mendefinisikan sebuah daftar menu
<meta />	Mendefinisikan metadata tentang sebuah dokumen HTML
<nobr>	Mencegah ganti baris pada teks atau gambar
<noframes>	Jika browser user tidak mendukung frame
<noscript>	Jika browser user tidak mendukung client-side scripts
<object>	meletakkan embed sebuah objek
<ol>	Mendefinisikan daftar dalam format penomoran
<optgroup>	Menampilkan beberapa pilihan yang sudah dikelompokkan dalam bentuk sebuah daftar drop-down
<option>	Menampilkan beberapa pilihan yang berbentuk dalam sebuah daftar drop-down
<p>	Membuat sebuah paragraf
<param />	Mendefinisikan sebuah parameter untuk objek
<pre>	Membuat teks dengan ukuran huruf yang sama
<q>	Mendefinisikan sebuah kutipan singkat
<s>	Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag <del> tetapi tag <s> tidak dianjurkan sebagai gantinya menggunakan tag <del>
<samp>	Mendefinisikan contoh keluaran dari program komputer
<script>	Mendefinisikan client-side script
<select>	Membuat daftar drop-down
<small>	Memperkecil ukuran teks dari ukuran defaultnya
<span>	Mendefinisikan sebuah section dalam dokumen
<strike>	Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag <del>
<strong>	Membuat teks tebal, fungsi tag ini sama dengan tag <b>
<style>	Mendefinisikan informasi style untuk dokumen HTML
<sub>	Memberikan efek subscript pada teks
<sup>	Memberikan efek superscript pada teks
<table>	Membuat tabel
<tbody>	Untuk mengelompokkan isi body di dalam sebuah tabel
<td>	Mendefinisikan sel di dalam sebuah tabel
<textarea>	Mendefinisikan sebuah kontrol input multiline
<tfoot>	Untuk mengelompokkan isi footer di dalam sebuah tabel
<th>	Mendefinisikan sel header di dalam  sebuah tabel
<thead>	Untuk mengelompokkan isi header di dalam sebuah tabel
<title>	Membuat judul untuk dokumen HTML
<tr>	Membuat baris di dalam sebuah tabel
<tt>	Mendefinisikan teletype text
<u>	Membuat teks bergaris bawah, fungsi tag ini sama dengan tag <ins> tetapi tag <u> tidak dianjurkan untuk kategori HTML text formatting melainkan termasuk kategori HTML Style
<ul>	Mendefinisikan daftar dalam format bullet
<var>	Mendefinisikan sebuah variabel
<xmp>	Mendefinisikan preformatted text, fungsi tag ini sama dengan tag <pre>

Cara Membuat Tabel HTML Di Notepad

 

Untuk membuat tabel di blog, bisa kita lakukan dengan kode HTML yang khusus untuk membuat tabel tentunya. Perintah yang di pakai adalah <table> ..... </table>. Di dalam tabel, kita bisa bisa beberapa atribut di dalamnya, antara lain yaitu:

• bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".
• align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .
• cellpadding : untuk mengatur jarak antara tepi sel dengan isi sel di dalam sebuah tabel. Penempatan kodenya : cellpadding="pixel" .
• border : untuk mengatur tingkat ketebalan garis tepi pada tabel. Penempatan kodenya : boeder="pixel" .
• cellspacing

: untuk mengatur jarak antara sel. Penempatan kodenya : cellspacing="pixel" .

• height : untuk mengatur tinggi tabel. penempatan kodenya : height="pixel"|"%" .
• height : untuk mengatur lebal tabel. Penempatan kodenya : height="pixel"|"%" .

Sintaks atau kode yang terbentuk yaitu seperti ini : 

<table align="left"|"center"|"right"
bgcolor="color"
border="pixel"
cellpadding="pixel"
cellspacing="pixel"
width="pixel"|"%"
height="pixel"|"%">

.....................

</table> 

Sebuah elemen TABLE, juga berisi beberapa elemen yaitu CAPTION, elemen TH(table header), elemen TR(table row), serta elemen TD (table row).

Elemen CAPTION berfungsi untuk membuat judul dari sebuah tabel. elemen ini mempunyai atribut align dengan nilai top (yaitu judul di simpan di sebelah atas tabel), juga bottom (yaitu judul berada di sebelah bawah dari tabel).

Sintaks atau kode yang terbentuk yaitu seperti ini : 

<caption align="top"|"bottom">

............................

</caption> 

elemen TR (Table Row) yaitu untuk membuat baris, elemen ini di tempatkan di dalam elemen tabel. Atribut yang bisa di pakai di dalam TR antara lain : 

• align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .
• valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"
• bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".

Sintaks atau kode yang terbentuk yaitu seperti ini : 

<tr align="left"|"center"|"right"
bgcolor="color"
valign="top"|"middle"|"bottom">

.....................

</tr> 

elemen TH(Table Header) berfungsi sebagai header sel pada sebuah kolom tabel. Atribut yang bisa di pakai antara lain:

• align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .
• valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"
• bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".
• colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor" .
• rowspan : untuk mengatur row atau baris. Penempatan kodenya : rowspan="nomor"

Sintaks atau kode yang terbentuk yaitu seperti ini : 

<th align="left"|"center"|"right"
bgcolor="color"
valign="top"|"middle"|"bottom"
colspan="number" rowspan="number">

.....................

</th> 

Elemen TR(Table Row) adalah elemn untuk membuat kolom. atribut yang bisa di pakai antara lain :

• align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .
• valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"
• bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".
• colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor" .
• rowspan : untuk mengatur row atau baris. Penempatan kodenya : rowspan="nomor"

Sintaks atau kode yang terbentuk yaitu seperti ini : 

<td align="left"|"center"|"right"
bgcolor="color"
valign="top"|"middle"|"bottom"
colspan="number" rowspan="number">

.....................

</td> 


Masih bingung? kalau begitu saya beri beberapa contoh agar sedikit lebih jelas :

Untuk membuat sebuah tabel tunggal, kodenya kira-kira seperti ini :

<table width="200" border="1">
<tr>
<td>

Contoh

</td>
</tr>
<table>

Hasilnya akan seperti ini : 

Contoh

Terlihat bahwa tulisan yang ada, tampak mepet ke dinding tabel, apabila kita ingin agar tulisan berada persis di tengah tabel, maka cukup tambahkan saja kodealign="center" pada kolomnya. misal seperti ini :

<table width="200" border="1">
<tr>
<td align="center">

Contoh

</td>
</tr>
</table>

Hasilnya akan seperti ini : 

Contoh

Contoh-contoh di atas menggunakan nilai border 1, coba bandingkan apabila saya menggunakan nilai border yang lebih besar, misalkan 9. Kodenya kira-kira seperti ini :

<table width="200" border="9">
<tr>
<td align="center">

Contoh

</td>
</tr>
</table>

Hasilnya akan seperti ini : 

Contoh

Jika ingin kolomnya bertambah, tinggal tambahkan kode kolomnya. contoh dua kolom, kodenya seperti ini :

<table width="300" border="9">
<tr>
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga denk

</td></tr>
</table>

Hasilnya akan seperti ini : 

Contoh

Contoh juga denk

Kalau ingin dua baris, kira-kira kodenya seperti ini :

<table width="300" border="1">
<tr>
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga denk

</td>
</tr>
<tr>
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga denk

</td>
</tr></table>

hasilnya seperti ini : 

Contoh	Contoh juga denk
Contoh	Contoh juga denk

Jika tabelnya ingin di beri warna, tinggal tambahkan kode bgcolor="kode warna". contoh :

<table width="300" border="1" bgcolor="black">
<tr bgcolor="green">
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga denk

</td>
<tr bgcolor="yellow">
<tr>
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga denk

</td>
</tr>
</table>

hasilnya seperti ini : 

Contoh	Contoh juga denk
Contoh	Contoh juga denk

Sekarang saya beri contoh terakhir (sedikit lebih serius) dengan mengunakan fungsi caption serta TH (table header). Misalkan saya ingin membuat sebuah tabel data dari nama-nama teknisi. Data-data yang ingin di buatkan tabel, misalkan seperti ini : 

Tabel 1.1
Data Teknisi
No.	Nama
1.	Juned
2.	Jaka kelana
3.	Ibro

Kode yang di pakai bisa seperti ini : <table align="left" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>
<tr bgcolor="fuchsia">
<th colspan="2">Data Teknisi</th>
</tr>
<tr bgcolor="green">
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>Juned</td>
</tr>
<tr bgcolor="red">
<td>2.</td>
<td>jaka kelana</td>
</tr>
<tr bgcolor="blue">
<td>3.</td>
<td>Ibro</td>
</tr>
</table>

Hasilnya kira-kira seperti ini : 

Tabel 1.1
Data Teknisi
No.	Nama
1.	Juned
2.	jaka kelana
3.	Ibro

Tabel HTML Tag

<table> = mendefinisikan tabel

<th>  = mendefinisikan sebuah header tabel

<tr> = mendefinisikan baris tabel

<td> = mendefinisikan sel tabel

<caption> = mendefinisikan tabel keterangan

<colgroup> = mendefinisikan sekelompok kolom dalam sebuah tabel, untuk format

<col /> = Mendefinisikan nilai atribut untuk satu atau lebih kolom dalam sebuah tabel

<thead>  = Grup isi tubuh dalam sebuah tabel

<tbody> = Grup isi tubuh dalam sebuah tabel

<tfoot> = Kelompok footer konten dalam sebuah tabel