Modul 3

Pemrograman Web dan Perangkat Bergerak

( 3.3 Menerapkan format tabel pada halaman web )

Tujuan
1. Menjelaskan tag-tag html yang digunakan untuk membuat tabel
2. Menentukan prosedur pembuatan tabel dalam html
3. Menentukan penerapan format tabel dalam web
4. Menentukan prosedur pembuatan tabel dalam tabel
5. Merancang program tampilan tabel dalam html
6. Membuat program halaman web yang menampilkan tabel
7. Menguji program tampilan tabel dalam web server

Uraian Materi

Tabel
Sebuah dokumen tidak jarang digunakan untuk menampilkan data kepada
penggunanya. Terdapat banyak cara untuk menampilkan data, mulai dari dengan menggunakan
grafik, daftar, sampai dengan tabel. Untuk menampilkan data dengan grafik pada HTML, kita dapat
menggunakan gambar (elemen img), sementara daftar jelas dibuat menggunakan elemen list.
Bagaimana dengan tabel? HTML memiliki elemen khusus untuk membuat tabel, yaitu table.

• Tag-tag tabel dalam html.

Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan
kolom. Tabel dibuat dengan menggunakan tag <table>. Sebuah tabel dibagi menjadi baris-baris,
dan tiap baris dibagi ke dalam cell-cell.

Baris dibuat dengan tag <tr>, dan cell-cell yang akan membentuk kolom dibuat dengan tag <td>.
Dalam konteks HTML, table mempunyai peranan yang sangat penting. Selain digunakan untuk
menampilkan tabel berisi data, table juga digunakan untuk menyusun teks dalam kolom, ataupun
membuat laporan terstruktur lainnya.
Seringkali table digunakan dalam halaman web untuk memperindah tampilan ataupun untuk
mengatur agar informasi dapat disajikan dengan tampilan yang enak dibaca. Melihat begitu
banyaknya manfaat yang didapat dengan menggunakan tabel ini maka tabel mulai diterapkan
pemakaiannyaoleh HTML dan kemudian didukung oleh Nescape (browser pertama yang
mempelopori penggunaan table).
Dari masing-masing tag tersebut, tiap tag mempunyai tag penutup yaitu:

Tag <table> mempunyai tag penutup </table>

Tag <tr> mempunyai tag penutup </tr>
Tag <td> mempunyai tag penutup </td>

Ketiga tag di atas adalah tag-tag yang harus ada dalam tag Table. Bisa dikatakan tag tersebut
merupakan tag dasar pembuatan table. Berikut penerapan dari masing masing bagian tag dalam
Table:

Tag <table> adalah pembuka daripada pembuatan table, di dalam table ada baris yang dimulai
dengan <tr>. Jika ada satu <tr> maka akan ada satu baris, begitupun selanjutnya. Di dalam baris
ada cell-cell yang sering disebut kolom, yang biasanya kita isi dengan berbagai bentuk data. Cell
atau kolom ini dibuka atau dimulai dengan <td>. Tag <td> ini diakhiri dengan </td> sebagai penutup
kolom. Data-data yang berada dalam tag <td>...</td> akan berada dalam satu kolom. Jika ingin
membuat 3 kolom dalam satu baris, maka di dalam <tr>...</tr> kita inputkan tiga <td>...</td>.
Begitupun pada <tr>, jika kita ingin membuat tiga baris table maka kita harus ketikkan tiga
<tr>...</tr> di dalam <table>...</table>.

Untuk lebih mengenal dan mengerti daripada tag dasar table, berikut penjelasan dari masing
masing tag :

Tag <table> </table>

Tag <table> adalah tag pembuka sebuah table, dimana tag <table> ini adalah tag awal yang kita
pakai dalam mengawali pembuatan table. Setelah tag <table> ada tag </table> yang merupakan
tag penutup atau akhir dari tabel yang sedang di buat.

Tag<tr></tr>
Tag <tr> atau Table Row adalah tag yang berfungsi untuk membuat baris dalam sebuah tabel. Tidak
lepas dari tag-tag yang lain, tag ini berisi tag penutup yaitu </tr>.
Tag <tr> memiliki atribut ALIGN untuk mengatur alignment horizontal dan VALIGN untuk mengatur
alignment vertical.

Tag<td></td>
Tag <td> atau Table data berfungsi untuk menampilkan data pada setiap sel tabel. Secara umum
dapat dikatakan bahwa table data atau <td> ini digunakan untuk membuat kolom dalam baris
table. Untuk mengakhiri kolom tersebut digunakan </td>.
Berikut saya berikan contoh penerapan tag table:

yang menghasilkan tampilan seperti di bawah ini:

Di dalam perkembangannya, struktur tabel mengalami perubahan. Perubahan ini berbentuk

pengelompokan bagian tabel yang meliputi thead, tbody, dan tfoot, dimana tujuannya yaitu
untuk mempermudah mengatur tampilan tabel apabila data yang disajikan di dalam tabel sangat
kompleks terutama dalam hal mengatur css.

Tag thead akan menjadi tag judul yang berada paling atas, kemudian diikuti dengan
tag tbody yang digunakan untuk menampilkan data tabel, dan yang terakhir ditutup dengan
tag tfoot sebagai footer dari tabel.

Adapaun struktur codingnya yaitu sebagai berikut:

Berikut adalah daftar dari tag-tag HTML.

Nama Tag Keterangan / Kegunaan

Basic

<!DOCTYPE> Tag untuk menentukan tipe dokumen

<html> Tag untuk membuat sebuah dokumen HTML

<title> Tag untuk membuat judul dari sebuah halaman

<body> Tag untuk membuat tubuh dari sebuah halaman

<h1> to <h6> Tag untuk membuat heading

<p> Tag untuk membuat paragraf

<br> Memasukan satu baris putus

<hr> Tag untuk membuat perubahan dasar kata didalam isi

<!--...--> Tag untuk membuat komentar

Formatting

Tag untuk membuat sebuah akronim (tidak disupport lagi di

<acronym> HTML5)

<abbr> Tag untuk membuat sebuah singkatan

<address> Tag untuk membuat kontak alamat

<b> Tag untuk membuat huruf bercetak tebal

Mengisolasi bagian dari teks yang dapat diformat dalam arah yang
<bdi> berbeda dari teks lain di luarnya (tag baru HTML5)

<bdo> Mengganti arah teks

Tag untuk membuat text berhuruf besar (tidak disupport lagi di

<big> HTML5)

Tag untuk membuat sebuah bagian text yang dikutip dari sumber
<blockquote> lain

Tag untuk membuat jajaran teks menjadi ditengah (tidak

<center> disupport lagi di HTML5)
 Nama Tag Keterangan / Kegunaan

<cite> Tag untuk membuat judul karya

<code> Tag untuk membuat potongan kode komputer di antara text

<del> Tag untuk membuat teks yang telah dihapus dari dokumen

<dfn> Tag untuk membuat sebuah istilah definisi

Tag untuk membuat penekanan teks (tidak disupport lagi di

<em> HTML5)

Tag untuk membuat font, warna, dan ukuran untuk teks (tidak
<font> disupport lagi di HTML5)

Tag untuk membuat sebuah bagian dari teks yang disesuaikan

<i> dengan mood

Tag untuk membuat teks yang telah dimasukkan ke dalam

<ins> dokumen

<kbd> Tag untuk membuat input keyboard

<mark> Tag untuk membuat teks yang disorot / ditandai (tag baru HTML5)

<meter> Tag untuk membuat pengukuran skalar

<pre> Tag untuk membuat teks terformat

<progress> Memperlihatkan kemajuan tugas (tag baru HTML5)

<q> Tag untuk membuat kutipan pendek

Tag untuk membuat apa yang harus ditampilkan di browser yang

<rp> tidak mendukung penjelasan ruby (tag baru HTML5)

Tag untuk membuat sebuah anotasi / pengucapan karakter (untuk

<rt> tipografi Asia Timur)

Tag untuk membuat sebuah anotasi ruby (untuk tipografi Asia

<ruby> Timur) (tag baru HTML5)

<s> Tag untuk membuat teks yang tidak lagi benar

<samp> Tag untuk membuat contoh keluaran dari program komputer

<small> Tag untuk membuat teks kecil

 Nama Tag Keterangan / Kegunaan

Tag untuk membuat teks yang di coret tengah (tidak disupport lagi
<strike> di HTML5)

<strong> Tag untuk membuat teks penting

Tag untuk membuat teks subskrip (seperti dalam penulisan Jat

<sub> Kimia)

Tag untuk membuat teks superscripted (seperti dalam penulisan

<sup> akar kuadrat)

<time> Tag untuk membuat tanggal / waktu (tag baru HTML5)

<tt> Tag untuk membuat teks teletype (tidak disupport lagi di HTML5)

Tag untuk membuat teks yang memiliki Gaya yang berbeda dari
<u> teks biasa lainnya

<var> Tag untuk membuat sebuah variabel

<wbr> Tag untuk membuat kemungkinan garis-putus

Forms

<form> Tag untuk membuat sebuah form HTML untuk input pengguna

<input> Tag untuk membuat sebuah kontrol input

<textarea> Tag untuk membuat sebuah kontrol input multibaris (text area)

<button> Tag untuk membuat sebuah tombol yang dapat diklik

<select> Tag untuk membuat sebuah daftar drop-down

Tag untuk membuat sebuah kelompok pilihan yang terkait dalam

<optgroup> daftar drop-down

<option> Tag untuk membuat pilihan dalam daftar drop-down

<label> Tag untuk membuat sebuah label untuk sebuah elemen <input>

<fieldset> Grup unsur terkait dalam bentuk

Tag untuk membuat sebuah caption untuk sebuah elemen

<legend> <fieldset>, < figure>, atau <details>
 Nama Tag Keterangan / Kegunaan

Menentukan daftar pilihan yang telah ditetapkan untuk kontrol

<datalist> input (tag baru HTML5)

Tag untuk membuat key-pair generator kolom input (tag baru

<keygen> HTML5)

<output> Tag untuk membuat hasil penghitungan (tag baru HTML5)

Frames

Tag untuk membuat sebuah window (bingkai) dalam sebuah

<frame> frameset (tidak disupport lagi di HTML5)

Tag untuk membuat satu set bingkai (tidak disupport lagi di

<frameset> HTML5)

Tag untuk membuat sebuah konten alternatif untuk pengguna

<noframes> yang tidak mendukung frame (tidak disupport lagi di HTML5)

<iframe> Tag untuk membuat sebuah bingkai

Images

<img> Tag untuk membuat gambar

<map> Tag untuk membuat gambar-peta

<area> Tag untuk membuat area dalam gambar-peta

Digunakan untuk menggambar grafik, melalui scripting (JavaScript

<canvas> ) (tag baru HTML5)

Tag untuk membuat sebuah caption untuk elemen <figure> (tag

<figcaption> baru HTML5)

<figure> Menentukan konten mandiri (tag baru HTML5)

Audio/Video

<audio> Tag untuk membuat isi suara (tag baru HTML5)

Tag untuk membuat sumber beberapa media untuk elemen media

<source> (<video> dan <audio>) (tag baru HTML5)

Tag untuk membuat trek teks untuk elemen media (<video> dan
<track> <audio>) (tag baru HTML5)
 Nama Tag Keterangan / Kegunaan

<video> Tag untuk membuat sebuah video atau film (tag baru HTML5)

Links

<a> Tag untuk membuat hyperlink

Tag untuk membuat hubungan antara dokumen dan sumber daya

<link> eksternal (paling sering digunakan untuk link ke style sheet)

<nav> Tag untuk membuat navigasi link (tag baru HTML5)

Lists

<ul> Tag untuk membuat daftar dengan selain nomor

<ol> Tag untuk membuat daftar dengan nomor

<li> Tag untuk membuat sebuah item daftar

Tag untuk membuat sebuah daftar direktori (tidak disupport lagi

<dir> di HTML5)

<dl> Tag untuk membuat sebuah daftar definisi

<dt> Tag untuk membuat istilah (item) dalam daftar definisi

<dd> Defines a description of an item in a definition list

<menu> Tag untuk membuat deskripsi dari item dalam daftar definisi

Tag untuk membuat sebuah tombol perintah bahwa seorang

<command> pengguna dapat meminta (tag baru HTML5)

Tables

<table> Tag untuk membuat tabel

<caption> Tag untuk membuat sebuah caption tabel

<th> Tag untuk membuat sebuah sel header tabel

<tr> Tag untuk membuat baris dalam sebuah tabel

<td> Tag untuk membuat sel dalam sebuah tabel

<thead> Mengelompokan isi header dalam sebuah tabel

 Nama Tag Keterangan / Kegunaan

<tbody> Mengelompokanisi tubuh dalam sebuah tabel

<tfoot> Mengelompokan isi footer dalam sebuah tabel

Menentukan properti kolom untuk setiap kolom dalam elemen

<col> <colgroup>

Menentukan kelompok dari satu atau lebih kolom dalam sebuah

<colgroup> tabel untuk diformat

Style/Sections

<style> Tag untuk membuat informasi style untuk dokumen

<div> Tag untuk membuat sebuah bagian dalam dokumen

<span> Tag untuk membuat sebuah bagian dalam dokumen

Tag untuk membuat sebuah header untuk dokumen atau

<header> bagian (tag baru HTML5)

Tag untuk membuat footer untuk dokumen atau bagian (tag baru
<footer> HTML5)

Pengelompokan elemen heading (<h1> sampai <h6>) (tag baru

<hgroup> HTML5)

<section> Tag untuk membuat bagian dalam dokumen (tag baru HTML5)

<article> Tag untuk membuat sebuah artikel (tag baru HTML5)

Tag untuk membuat konten lain selain dari konten halaman (tag
<aside> baru HTML5)

Tag untuk membuat rincian tambahan yang pengguna dapat lihat

<details> atau sembunyikan (tag baru HTML5)

Tag untuk membuat sebuah kotak dialog atau jendela (tag baru
<dialog> HTML5)

Tag untuk membuat sebuah judul terlihat untuk elemen

<summary> <detil> (tag baru HTML5)

Meta Info

<head> Tag untuk membuat informasi tentang dokumen

 Nama Tag Keterangan / Kegunaan

<meta> Tag untuk membuat metadata tentang dokumen HTML

Menentukan URL dasar / target untuk semua URL relatif dalam

<base> dokumen

Menentukan standar warna, ukuran, dan font untuk semua teks

<basefont> dalam dokumen (tidak disupport lagi di HTML5)

Programming

<script> Tag untuk membuat script di sisi klien

Tag untuk membuat sebuah konten alternatif bagi pengguna yang

<noscript>
tidak mendukung script di sisi klien

Tag untuk membuat sebuah java applet yang ditanam (tidak

<applet>
disupport lagi di HTML5)

Tag untuk membuat sebuah wadah untuk aplikasi eksternal (non-

<embed>
HTML) (tag baru HTML5)

<object> Tag untuk membuat sebuah objek yang ditanam

<param> Tag untuk membuat sebuah parameter untuk objek

Seringkali informasi yang akan ditampilkan adalah informasi olahan yang berbentuk tabel,
sehingga kitapun memerlukan format ini di dalam dokumen HTML. Format ini dapat diwujudkan
dengan menggunakan tag tabel <tabel>. Sedikit berbeda dengan tag lainnya, tag tabel ini
memerlukan tag lainnya untuk menampilkan data dalam bentuk tabulasi. Berikut ini uraiannya :

Tag Parent Fungsi

<table>
--- tag utama
</table>

<caption>
<table> Menampilkan judul tabel
</caption>

<tr></tr> <table> Tag baris

<th></th> <tr> Header table

<td></td> <tr> Tag sel-sel tabel

Berikut ini beberapa atribut tag table

Atribut Fungsi

bgcolor warna background

width, height lebar dan tinggi tabel (dalam % atau pixel)

cellspacing jarak antar cell

cellpadding jarak teks ke cell

border lebar garis batas, 0=tanpa garis batas

Berikut ini atribut tag-tag <th> dan <td>, bila disebutkan di tag <tr> maka atribut di tag <th> dan
<td> diabaikan

Atribut Fungsi

bgcolor warna background

width, height lebar dan tinggi tabel (dalam % atau pixel)

align (left, right, center) pengaturan posisi horisontal isi sel, rata kanan/kiri/tengah

valign (top, bottom, pengaturan posisi vertikal terhadap isi sel, di atas, bawah atau
middle) tengah

colspan=n ekstensi (span) n kolom ke kanan

rospan=n ekstensi (span) n baris ke bawah

nowrap mematikan word wrapping

HTML singkatan dari Hyper Text Markup Language adalah file teks atau file ASCII yang berisi
instruksi/script kepada web browser untuk menampilkan suatu tampilan grafis dari sebuah
halaman web. Didalam file HTML terdapat beberapa "tag" atau kode-kode yang dimengerti oleh
web browser dan dapat menampilkannya di layar monitor.

File HTML dapat dibuat dengan aplikasi text editor apapun di sistem operasi apapun, antara lain
: Notepad di Windows, emasc atau vi di Unix atau SimpleText di Macintosh. File HTML ini juga
bisa dibuat di aplikasi word processor apapun asalkan saat menyimpan file tersebut disimpan
dengan format text-only.

Salah satu kelebihan file HTML adalah cross platform, artinya file HTML dapat ditampilkan di
beberapa Operating System (OS) yang berbeda dan memiliki tampilan yang sama walaupun saat
pembuatannya menggunakan satu OS tertentu saja.

Atribut Border
Atribut border berfungsi untuk menambahkan sebuah garis tepi pada tabel agar tabel tersebut
keliatan atau terlihat ada garisnya yang akan berbentuk tabel, Nilai dari atribut ini berupa angka
yang diukur dalam satuan pixel. Jika anda memberikan nilai border=”2” maka web browser akan
menampilkan garis tepi sebesar 2 pixel pada sisi atas, bawah, kiri dan kanan tabel. Jika kita
memberi border nya “0” maka border tersebut seolah-olah tidak terlihat.
<Table border=”1”>

Atribut Cell Padding

Atribut CellPadding berfungsi untuk mengatur jarak kolom dalam table, antara konten atau objek
yang berada didalam table dengan kolom, nilai dari atribut ini sama dengan border yaitu diukur
dalam satuan pixel. Jika kita memberikan nilai cellpadding=”2” maka pada web akan
menampilkan jarak antara kontent dengan kolom sebesar 2 pixel

<Table border=”1” cellpadding=”1″>

Atribut Cell spacing

Atribut CellSpacing berfungsi mengatur jarak antara garis tepi dari bagian dalam dengan garis tepi
yang dibagian luar, antara kolom dengan garis tepi table, nilai dari atribut ini sama dengan border
yaitu diukur dalam satuan pixel. Jika kita memberikan nilai cellpadding=”2” maka pada web akan
menampilkan jarak antara kolom dengan garis tepi table sebesar 2 pixel

<Table border=”1”cellspacing=”20″>

Cellspacing
Atribut cellspacing digunakan untuk menentukan jarak spasi antar sel. Sama halnya dengan
atribut cellpadding, atribut cellspacing juga tidak didukung oleh HTML5. Dibawah ini contoh
penulisan atribut cellspacing di HTML:

<table cellspacing=”pixel”>

Nilai dari atribut cellspacing dalam menentukan spasi di dalam sel adalah pixel. Berikut contoh
kode penulisan dan penggunaan cellspacing di HTML :

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Cellspacing di HTML</title>
</head>
<body>
<table border="2" cellspacing="5">
<tr>
<th width="50">No</th>
<th>NIM</th>
<th>Nama</th>
</tr>
<tr>
<td align="center">1</td>
<td>071401001</td>
<td>Ridayanti</td>
</tr>
<tr>
<td align="center">2</td>
<td>071401002</td>
<td>Ahmad Zulham</td>
</tr>
</table>
</body>
</html>

Colspan dan Rowspan Dalam HTML

Colspan dan Rowspan Dalam HTML– Biar semuanya jadi lebih paham, posting HTML nya diulang-
ulang. Yang kemarin mudah-mudahan anak-anak kelas X MM SMK Nida El-Adabi sudah pada
ngerti bagaimana membuat tabel dengan HTML. Penjelasannya sudah disederhanakan. Kalau
masih belum ngerti, silahkan “request” aja biar kita bahas lagi dengan penjelasan yang lebih lebih
sederhana lagi. Sekarang mari kita simak bagaimana penulisan tag HTML untuk menampilkan
rowspan dan colspan pada Tabel. Simak ya!

Terlebih dahulu perhatikan tag HTML untuk membuat Tabel dua baris tiga kolom:

Contoh:

1. Membuat Tabel 3 kolom 2 baris

<html>
<head>
<title>Menampilkan Tabel</title>
<body>
<table border="1">
<!...baris ke 1...>
<tr>
<td>Kolom 1 Baris ke 1</td> <!...menampilkan kolom ke 1 dari baris ke 1...>
<td>Kolom 2 Baris ke 1</td> <!...menampilkan kolom ke 2 dari baris ke 1...>
<td>Kolom 3 Baris ke 1</td> <!...menampilkan kolom ke 3 dari baris ke 1...>
</tr>
<!...baris ke 2...>
<tr>
<td>Kolom 1 Baris ke 2</td> <!...menampilkan kolom ke 1 dari baris ke 2...>
<td>Kolom 2 Baris ke 2</td> <!...menampilkan kolom ke 2 dari baris ke 2...>
<td>Kolom 3 Baris ke 2</td> <!...menampilkan kolom ke 3 dari baris ke 2...>
</tr>
</tble>
</body>
</head<
</html>

Jika ditampilkan melalui Browser:

Kolom 1 Baris ke 1 Kolom 2 Baris ke 1 Kolom 3 Baris ke 1

Kolom 1 Baris ke 2 Kolom 2 Baris ke 2 Kolom 3 Baris ke 2

Nah, dari tag-tag diatas selanjutnya kita masuk ke materi, yaitu Colspan dan Rowspan.
Apa itu Colspan? Apa itu Rowspan?
Colspan dan Rowspan merupakan atribut HTML yang fungsinya untuk menggabungkan beberapa
kolom (colspan) atau beberapa baris (rowspan) menjadi satu. Misalnya menggabungkan dua
kolom menjadi satu. Atau menggabungkan dua baris menjadi satu, dan seterusnya. Dalam
aplikasi Microsoft Word atribut HTML ini sama fungsinya dengan Tool Merge Center.
Tag Colpsan
Colspan merupakan kependekan dari Column span, fungsinya menggabungkan beberapa kolom
menjadi satu.

Penulisan tagnya:

<td colspan=”2″>Text Kolom</td>

Angka 2 menunjukan jumlah kolom yang digabungkan.

Perhatikan contoh dibawah ini:

<table border=”1″>
<tr>
<td colspan=”4″>Gabungan Kolom 1-4 Baris Ke 1</td><!– tag ini mewakili penulisan tag 4 kolom
lainnya–>
</tr>
<tr>
<td>Kolom 1 Baris Ke 2</td>
<td>Kolom 2 Baris Ke 2</td>
<td>Kolom 3 Baris Ke 2</td>
<td>Kolom 4 Baris Ke 2</td>
</tr>
</table>

Jika ditampilkan dalam browser maka hasilnya:

Gabungan Kolom 1-4 Baris Ke 1

Kolom 1 Baris Ke 2 Kolom 2 Baris Ke 2 Kolom 3 Baris Ke 2 Kolom 4 Baris Ke 2

Tag Rowspan
Rowspan merupakan kependekan dari rows span, fungsinya menggabungkan beberapa baris
menjadi satu.
Penulisan tagnya:

<td rowspan=”2″>Teks dalam baris</td>

Angka 2 menunjukan jumlah baris yang digabung.

Perhatikan contoh dibawah ini:

<table border=”1″>
<tr>
<td rowspan=”5″>Gabungan Baris 1-5</td> <!– tag ini mewakili penulisan tag 5 baris lainnya–>
</tr>
<tr>
<td>Baris Ke 2</td>
</tr>
<tr>
<td>Baris Ke 3</td>
</tr>
<tr>
<td>Baris Ke 4</td>
</tr>
<tr>
<td>Baris Ke 5</td>
</tr>
</table>

Tag diatas jika ditampilkan dalam browser, maka hasilnya:

Baris Ke 2
Gabungan Baris 1-5
Baris Ke 3

Baris Ke 4

Baris Ke 5