Modul Design Web
Bab III – HTML Lanjut 2
(table)
Bab III – HTML Lanjut 2
1.1. Tabel (table)
Table merupakan cara untuk menampilkan informasi dalam
halaman web dengan bentuk kolom dan baris.
Terdapat tiga tag atau elemen utama yang digunakan dalam
pembuatan table, yaitu: <table>, <tr>, dan <td>. Yang perlu diingat
adalah bahwa tag <tr> dan <td> harus terletak di antara tag <table>
dan </table>.
1. <table>
Digunakan untuk mendefinisikan pembuatan tabel. Memiliki
attribut:
• align - perataan: rata kiri (left), tengah (center) atau kanan
(right).
• valign – mengatur bentuk perataan secara vertical
• bgcolor – mengatur warna latar belakang (background) dari
tabel.
• background – menentukan gambar yang digunakan
sebagai background table
• color – Untuk mengatur warna suatu sel dalam tabel
• border – menentukan ukuran border tabel (dalam pixel).
• rowspan – menggabungkan beberapa baris
• colspan – menggabungkan beberapa kolom
• cellpadding - jarak antara isi cell dengan batas cell (dalam
pixel).
• cellspacing – mengatur spasi/jarak antar cell (dalam pixel).
• width – menentukan lebar tabel dalam pixel atau percent.
• height – Menentukan tinggi table
Modul Design Web
Sharfina Faza, S.Kom., M.Kom
2. <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.
3. <td>
Tag ini digunakan untuk membuat kolom baru pada tabel.
Attributnya adalah:
• align – untuk menentukan perataan kolom
• background – untuk menentukan image yang digunakan
sebagai latar belakang dari kolom.
• bgcolor – untuk menentukan warna latar belakang
• colspan - lihat gambar contoh
• height – untuk mengatur ukuran tinggi cell dalam pixels.
• nowrap – untuk membuat supaya isi dari kolom tetap
berada pada satu baris.
• rowspan - lihat gambar contoh
• valign – untuk mengatur perataan vertikal: top, middle atau
bottom.
• width – untuk menentukan lebar kolom dalam pixel atau
percen.
Modul Design Web
Sharfina Faza, S.Kom., M.Kom
Contoh (save dengan nama tabel1.html ):
<html>
<head>
<title>Pembuatan Table 1</title>
</head>
<body>
<font face='arial' size='2' color='tahoma'>
<table>
<tr>
<td>Ini contoh tabel sederhana tanpa border</td>
</tr>
</table>
<hr>
<table border='1'>
<tr>
<td>Ini contoh tabel sederhana dengan border</td>
</tr>
</table>
<hr>
<table border='2'>
<tr>
<td>No.</td>
<td>Nama</td>
<td>Alamat</td>
</tr>
<tr>
<td>1.</td>
<td>Wahyu</td>
<td>Bekasi</td>
</tr>
<tr>
<td>3.</td>
<td>Lesmono</td>
<td>Kranji</td>
</tr>
</table>
</body>
</html>
Modul Design Web
Sharfina Faza, S.Kom., M.Kom
Contoh (save dengan nama tabel2.html ):
<html>
<head>
<title>Belajar Membuat Tabe 2l</title>
</head>
<body>
<table border='1' cellpadding='0' cellspacing='0'
bordercolor='black' width='100%' height='100'>
<tr>
<td width='100%' height='100' bgcolor='pink'></td>
</tr>
</table>
<br>
<table border='1' cellpadding='0' cellspacing='0'
bordercolor='black' width='100%' height='450'>
<tr>
<td width='25%' height='200'>
<td width='75%' height='200'
bgcolor='yellow'></td>
</tr>
<tr height='20'>
</tr>
</table>
</body>
</html>
4. Menambahkan Judul Tabel
Judul dalam tabel dibedakan menjadi tiga macam, yaitu judul
tabel, judul kolom table dan judul baris tabel.
Judul tabel atau biasa disebut CAPTION terletak dibagian luar
tabel yang bisa berada dibawah atau diatas tabel. Secara default
caption diletakkan dibagian atas suatu tabel, tetapi juga dapat
diletakkan dibawah suatu tabel dengan menambahkan atribut
ALIGN=BOTTOM pada elemen caption tersebut.
Judul kolom atau judul baris dibuat dengan elemen yang
sama yaitu elemen TABLE HEADER <th>.
Modul Design Web
Sharfina Faza, S.Kom., M.Kom
Judul kolom terletak pada sel disebelah kiri atau kolom
pertama suatu tabel, sedangkan judul baris terletak pada baris
pertama suatu tabel. Judul baris atau judul kolom akan tercetak
tebal.
Contoh (save dengan nama judul_tabel1.html ):
<html>
<head>
<title>Pembuatan Judul Table</title>
</head>
<body>
<font face=”arial” size=”2” color=”maroon”>
<table border=1>
<caption align=”top”><b><u>Daftar Alamat</u></b></caption>
<tr>
<th width=”40”>No.</th>
<th width=”150”>Nama</th>
<th width=”200”>Alamat</th>
</tr>
<tr>
<td align=”center”>1.</td>
<td>Wahyu</td>
<td>Bekasi</td>
</tr>
<tr>
<td align=”center”>2.</td>
<td>Lesmono</td>
<td>Kranji</td>
</tr>
</table>
</body>
</html>
Modul Design Web
Sharfina Faza, S.Kom., M.Kom
Contoh (save dengan nama judul_tabel2.html ):
<html>
<head>
<title>Pembuatan Judul Table</title>
</head>
<body>
<font face='arial' size='2' color='maroon'>
<table border='1'>
<caption align='bottom'><b><u>Daftar Alamat</u></b></caption>
<tr>
<th width='60' align='left'>No.</th>
<td width='150'>1.</td>
<td width='200'>2.</td>
</tr>
<tr>
<th align='left'>Nama</th>
<td>Wahyu</td>
<td>Lesmono</td>
</tr>
<tr>
<th align='left'>Alamat</th>
<td>Bekasi</td>
<td>Kranji</td>
</tr>
</table>
</body>
</html>
5. Mengatur Lebar dan Tinggi Suatu Tabel
Lebar tabel diatur dengan menggunakan atribut WIDTH dan
untuk mengatur tinggi table dengan atribut HEIGHT. Jika atribut
WIDTH dan HEIGHT digunakan dalam elemen TABLE nilainya
menunjukkan lebar dan tinggi tabel terhadap BROWSER
sedangkan jika digunakan pada elemen TH dan TD, nilainya
merupakan lebar dan tinggi dari suatu tabel.
Nilai atribut mengunakan ukuran % (max 100%) dan ukuran
pixel.
Modul Design Web
Sharfina Faza, S.Kom., M.Kom
Contoh (save dengan nama tinggi_lebar_tabel.html) :
<html>
<head>
<title>Mengatur Lebar dan Tinggi Tabel</title>
</head>
<body>
<font face=arial size=2 color=tahoma>
<table border=1 width=100%>
<caption align=top><b><u>Daftar Alamat</u></b></caption>
<tr>
<th width=40>No.</td>
<th width=150>Nama</td>
<th width=200>Alamat</td>
</tr>
<tr>
<td align=center>1.</td>
<td height=50>Wahyu</td>
<td height=50>Bekasi</td>
</tr>
<tr>
<td align=center>2.</td>
<td height=30>Lesmono</td>
<td height=30>Kranji</td>
</tr>
</table>
</body>
</html>
6. Perataan dalam Tabel
Perataan dalam tabel dikenal dua macam, yaitu perataan secara
horizontal dengan atribut ALIGN dan perataan vertikal dengan
atribut VALIGN, serta untuk membuat suatu tabel posisinya
menjadi ditengah-tengah layar browser.
Contoh (save dengan nama perataan_tabel.html ):
Modul Design Web
Sharfina Faza, S.Kom., M.Kom
<html>
<head>
<title>Membuat Perataan Table</title>
</head>
<body>
<font face="arial" size="2" color="tahoma">
<table border="1" align="center">
<caption align="top"> <b>Daftar Alamat</b>
<hr width="110">
</caption>
<tr>
<th width="40">No.</td>
<th width="150">Nama</td>
<th width="200">Alamat</td>
</tr>
<tr>
<td align="center">1.</td>
<td align="center" valign="middle" height="50">Wahyu</td>
<td align="right" valign="top" height="50">Bekasi</td>
</tr>
<tr>
<td align="center">2.</td>
<td align="left" valign="baseline" height="50">Lesmono</td>
<td align="left" valign="bottom" height="50">Kranji</td>
</tr>
</table>
</body>
</html>
7. Membuat Warna Pada Tabel
Didalam pewarnaan tabel kita dapat mengatur warna latar
belakang dan teks serta warna bordernya. Untuk menentukan
warna latar belakang pada suatu tabel, gunakan atribut
BGCOLOR sedangkan untuk warna border dapat menggunakan
beberapa atribut sbb:
Modul Design Web
Sharfina Faza, S.Kom., M.Kom
Penggabungan Baris/Kolom
Untuk menggabungkan baris/kolom (merge) digunakan atribut
COLSPAN dan ROWSPAN. COLSPAN digunakan untuk
menggabung-kan beberapa kolom menjadi 1 sedangan ROWSPAN
menggabungkan beberapa baris menjadi 1.
Cellpadding Dan Cellspacing
CELLPADDING digunakan untuk mengatur spasi antara border
dengan tulisan, sedangkan CELLSPACING digunakan untuk
mengatur spasi antar dua buah sel.
Contoh (save dengan merge_tabel.html ):
<html>
<head>
<title>Contoh Merge, Cell dan Pedd</title>
</head>
<body>
<table border="2" align="center" bordercolor="#000000" bgcolor="#FFFFFF"
cellspacing="4" cellpadding="8"
width="100%">
<font face="arial" size="2" color="black">
<tr>
<td bgcolor="#EEEEEE" colspan="2" align="center">Kelas</td>
<td bgcolor="#EEEEEE" align="center" rowspan="2">Keterangan</td>
</tr>
Modul Design Web
Sharfina Faza, S.Kom., M.Kom
<tr>
<td width="200" bgcolor="#DFF9F9" align="center">I</td>
<td width="200" bgcolor="#DFF9F9" align="center">II</td>
</tr>
<tr>
<td>Ali</td>
<td>Umar</td>
<td align="center">Lunas</td>
</tr>
</table>
</body>
</head>
</html>
Modul Design Web
Sharfina Faza, S.Kom., M.Kom
