Bab Keempat

Bab 4
Tabel
Materi
Pengenalan Tabel
Elemen Dasar Tabel
Menambah <caption> ke Tabel
Grouping dalam Tabel
4.1. Membangun tabel

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 :
<TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tab <TR> dan <TD>
harus terletak di antara tag <TABLE> dan </TABLE>
Untuk membuat tabel dengan html kita menggunakan element <table>. Seperti
kita ketahui, tabel terdiri dari baris dan kolom. Dan pertemuan antara baris dan kolom
disebut sel. Untuk membuat baris dari tabel, kita menggunakan element <tr> yang
merupakan singkatan dari tabel row. Lalu untuk mengisikan data ke dalam sel-sel tabel
kita gunakan element <td> yang merupakan singkatan dari tabel data.
Bentuk Umum Tabel
Gambar 1. Struktur dasar table

Contoh table dasar yang terdiri dari baris dan kolom
<table>
<tr>
<td>Baris 1 Kolom 1</td>
</tr>
<tr>
</tr>
</table>
4.2. Heading Tabel

Heading tabel adalah istilah yang digunakan karena isi sel dalam tabel dijadikan
judul, atau dengan sebutan lain judul kolom. Biasanya heading tabel ini dicetak berbeda
dengan isi sel yang lain. Untuk membuat heading, kita menggunakan elemen <th> yang
merupakan singkatan dari table heading. Elemen ini kita gunakan untuk menggantikan
elemen <td>.
4.3. Judul tabel dan Grup kolom

Untuk membuat judul tabel, kita gunakan elemen <caption>. Elemen ini ditulis
setelah tag pembuka <table> sebelum tag <row>.
Kita dapat melakukan grup terhadap kolom tabel. Elemen yang digunakan
adalah <colgroup>. Pada tag pembuka <colgroup>, membawa sebuah atribut span yang
digunakan untuk menyatakan jumlah kolom yang di grup. Contoh :
<table>
<colgroup span=”4” class=”KolomUtama”/>
<colgroup span=”2” class=”KolomSubtotal”/>
<tr>
<td> 1 </td><td > 2 </td><td> 3 </td><td> 4 </td><td> 5 </td><td> 6 </td>
</tr>
</table>
Pada contoh script di atas, terlihat bahwa tabel terdiri dari 6 kolom, dimana 4
kolom pertama di grup sebagai “KolomUtama” dan 2 kolom kedua di grup sebagai
“KolomSubtotal”. Penggunaan elemen ini akan lebih terlihat jika dipadukan dengan
CSS.
4.4. Tag <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.
Atribut cellspacing digunakan untuk mengatur jarak atau spasi antar sel dengan sel
lainnya dan antar sel dengan batas tabel. Sedangkan atribut cellpading digunakan untuk
mengatur spasi antara batas sel dengan teks di dalam sel. Contoh penggunaan atribut
cellspacing dan cellpading diperlihatkan pada gambar dan skrip berikut ini.
<HTML>
<HEAD>
<TITLE>contoh14.htm</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1 WIDTH="80%" CELLSPACING=10 CELLPADDING=20>
<TR>
<TD WIDTH="85%">Penggunaan Internet menjadi utama dalam kegiatan perusahaan</TD>
<TD WIDTH="15%">-</TD>
</TR>
<TR>
<TD>Perusahaan banyak memanfaatkan e-mail sebagai komunikasi mereka.</TD>
<TD>-</TD>
</TR>
</TABLE>
</BODY>
</HTML>
<TABLE align="center" bgcolor="#0000FF" border="2" cellpadding="5"

cellspacing="2" width="90%">
4.5. Tag <TR>

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 :
<TR align="right" bgcolor="#0000FF" valign=top>
4.6. Tag<TD>
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.
Atribut rowspan digunakan untuk menggabungkan beberapa buah baris menjadi
satu. Sedangkan atribut colspan digunakan untuk menggabungkan beberapa kolom
menjadi satu. Atribut-atribut ini di pakai berdasarkan tag <TD>. Perhatikan contoh
tersebut:
<HTML>
<HEAD>
<TITLE>contoh15.htm</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<TR>
<TD COLSPAN=2>Sel 1,1</TD>
<TD>Sel 1,2</TD>
<TD>Sel 1,3</TD>
</TR>
<TR>
<TD ROWSPAN=3>Sel 2,1</TD>
<TD>Sel 2,1</TD>
<TD>Sel 2,2</TD>
<TD>Sel 2,3</TD>
</TR>
<TR>
<TD>Sel 3,1</TD>
<TD>Sel 3,2</TD>
<TD>Sel 3,3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
<TD align="right" background="back.gif" bgcolor="#0000FF" colspan="3" height="200" nowrap
rowspan="2" valign="bottom" width="300">
<table width="100" border="1" cellspacing="2" cellpadding="2">

<tr>
<td bgcolor="#0000FF"> </td>
<td bgcolor="#FFFF66"> </td>
<td rowspan="2" bgcolor="#FF3366"> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#33CC66"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#FFCC99"> </td>
</tr>
</table>
<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#0000FF"> </td>
<td bgcolor="#FFFF66"> </td>
<td rowspan="2" bgcolor="#FF3366"> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#33CC66"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#FFCC99"> </td>
</tr>
</table>
4.7. Tag Tabel Lanjutan

Untuk Memberi judul tabel : <caption> …… </caption>
Default lokasi ada di atas tabel Untuk merubah lokasi ditambahkan atribut align
<caption align=“bottom”> …. </caption> Pilihan untuk align : top, bottom,
left,right,center
Untuk membuat header tabel (tulisan yang terletak di baris paling atas)
<thead> …… </thead>
Untuk Membuat footer tabel (tulisan yang terletak di baris paling bawah)
<tfoot> …… </tfoot>
Untuk membuat header cell (terletak di tiap kolom pada baris paling atas)
<th> …… </th>
Pengelompokan body / isi tabel <tbody> …… </tbody>
Contoh
<body>
<table border="1">
<caption align="bottom">Judul Tabel</caption>
<thead align="right"><tr><td>Header Tabel</td></tr></thead>
<tfoot align="center"><tr><td>Footer Tabel</td></tr></tfoot>
<tbody>
<tr>
<th>Header Satu</th>
<th>Header Dua</th>
</tr>
<tr>
<td>Isi Body Cell Satu</td>
<td>Isi Body Cell Dua</td>
</tr>
</tbody>
</table>
</body>
Hasilnya
Contoh1: Tabel 2 Dimensi Tabel-1.html
<html>
<head>
<title>Contoh Tabel 2 Dimensi</title>
</head>
<body>
<table border="1" cellpadding="2" width="250">
<caption><b>Tabel Telepon</b></caption>
<tr>
<th width="100" bgcolor="lavender">Telepon</th>
<th width="150" bgcolor="lavender">Nama</th>
</tr>
<tr>
<td width="100">08123456789</td>
<td width="150">Sayuti</td>
</tr>
<tr>
<td width="100">08156789123</td>
<td width="150">Susi</td>
</tr>
</table>
</body>
</html>
Contoh2: Tabel Dengan Colspan Tabel-2.html

<html>
<head>
<title>Contoh Tabel Dengan Coslpan</title>
</head>
<body>
<tr>
<td colspan="2" width="296" align="center"
bgcolor="#9999FF"><b>Jadwal Kuliah</b></td>
</tr>
<tr>
<td width="141" align="center" bgcolor="#99CCFF">Senin</td>
<td width="153" align="center" bgcolor="#99CCFF">Selasa</td>
</tr>
<tr>
<td width="141" align="center"
bgcolor="#99CCFF">Nyangkul</td>
<td width="153" align="center"
bgcolor="#99CCFF">Ngarambet</td>
</tr>
</table>
</body>
</html>
Contoh3: Tabel Dengan Colspan Bertingkat Tabel-3.html
<html>
<head>
<title>Contoh Tabel Dengan Colspan Bertingkat</title>
</head>
<body>
<table bgcolor=#FFFFCC width="301" border="1" cellpadding="2">
<tr>
<td colspan="3" align="center" width="136"
bgcolor="#FFCC66"><b>Quarter 1</b></td>
<td colspan="3" align="center" width="153"
bgcolor="#FFCC66"><b>Quarter 2</b></td>
</tr>
<tr align="center">
<td width="38"><b>Jan</b></td>
<td width="48"><b>Feb</b></td>
<td width="42"><b>Mar</b></td>
<td width="46"><b>Apr</b></td>
<td width="54"><b>May</b></td>
<td width="45"><b>Jun</b></td>
</tr>
<tr>
<td width="38">100</td>
<td width="48">5000</td>
<td width="42">200</td>
<td width="46">1500</td>
<td width="54">2500</td>
<td width="45">1750</td>
</tr>
<tr>
<td width="38">290</td>
<td width="48">5050</td>
<td width="42">2300</td>
<td width="46">100</td>
<td width="54">270</td>
<td width="45">300</td>
</tr>
</table>
</body>
</html>
Contoh4: Tabel Dengan Rowspan Tabel-4.html
<html>
<head>
<title>Contoh Tabel Dengan Coslpan</title>
</head>
<body>
<tr>
<td rowspan="2" bgcolor="#00CC00"><p
align="center">Satu</td>
<td bgcolor="#99FF33">Dua</td>
<td bgcolor="#99FF33">Tiga</td>
<td bgcolor="#99FF33">Empat</td>
</tr>
<tr>
<td bgcolor="#CCFF99">Dua</td>
<td bgcolor="#CCFF99">Tiga</td>
<td bgcolor="#CCFF99">Empat</td>
</tr>
</table>
</body>
</html>
Contoh5: Tabel Dengan Rowspan dan Colspan Tabel-5.html
<html>
<head>
<title>Contoh Tabel Dengan Colspan dan Rowspan</title>
</head>
<body>
<table border="1" width="363" bgcolor="#99FF33">
<tr>
<td colspan="2" rowspan="2" width="141"> </td>
<td colspan="2" width="215"
align="center"><b>COLSPAN</b></td>
</tr>
<tr>
<td width="110" align="center"><b>Kolom 1</b></td>
<td width="104" align="center"><b>Kolom 2</b></td>
</tr>
<tr>
<td rowspan="2" width="79"><b>ROWSPAN</b></td>
<td width="60" align="center"><b>Baris 1</b></td>
<td width="110">Baris1, Kolom1</td>
</tr>
<tr>
<td width="60" align="center"><b>Baris 2</b></td>
</tr>
</table>
</body>
</html>
Dengan Menggunakan Konsep Tag Tabel buatlah Gambar di bawah ini dengan Tag Tabel
Nama File : Program.html

Nama File : Program.html
Nama File : Administrasi.html

Bab Keempat

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Bab Keempat

Diunggah oleh

Hak Cipta:

Format Tersedia

Bab 4

4.1. Membangun tabel

Gambar 1. Struktur dasar table

4.2. Heading Tabel

4.3. Judul tabel dan Grup kolom

<TABLE align="center" bgcolor="#0000FF" border="2" cellpadding="5"

4.5. Tag <TR>

<table width="100" border="1" cellspacing="2" cellpadding="2">

4.7. Tag Tabel Lanjutan

Contoh2: Tabel Dengan Colspan Tabel-2.html

Contoh4: Tabel Dengan Rowspan Tabel-4.html

Contoh5: Tabel Dengan Rowspan dan Colspan Tabel-5.html

Nama File : Program.html

Anda mungkin juga menyukai