Modul Praktikum – Web Applied
PERTEMUAN
3 Tabel HTML
1. TUJUAN PRAKTIKUM
a. Mahasiswa mengenali dan memahami komponen HTML.
b. Mahasiswa mengenali dan memahami struktur dasar HTML.
c. Mahasiswa dapat membuat halaman HTML
2. PERANGKAT PENUNJANG
a. Komputer
b. Infocus
c. Aplikasi Penunjang (Xampp, Web Browser, Notepad++)
3. TEORI PENUNJANG
Tabel (Table) adalah sebuah data tabular dalam bentuk grid yang terdiri
dari kolom (column), baris (row) dan celll yang merupakan pertemuan antara
kolom dan baris. HTML <table> element dapat merepresentasikan data
dengan lebih dari satu dimensi dalam bentuk sebuah tabel (table).
Table di dalam HTML dibentuk dengan sebuah baris (row), tepatnya
menggunakan element <tr> yang merupakan kepanjangan dari table row.
Adapun element pendukung lain yang membentuk sebuah table adalah <th>
(table header) dan <td> (table data). <td> menunjukkan sebuah cell,
sedangkan <th> menunjukkan cell induk dan ditandai dengan tulisan cetak
tebal.
Element lain yang berkaitan dan digunakan dalam sebuah HTML table
adalah <caption>, <col>, <colgroup>, <thead>, <tfoot> dan <tbody>.
A. Elemen dan Atribut Tabel
Elemen pada HTML adalah satu blok code yang dimulai dari tag
pembuka hingga tag penutup, namun ada juga tag yang dalam
penulisannya berdiri sendiri.
Jenis elemen HTML :
1) Elemen bersarang
Elemen HTML yang bersarang ini adalah elemen yang dapat berisi
elemen atau elemen yang berada didalam elemen, karena seluruh
1
Modul Praktikum – Web Applied
PERTEMUAN
3 Tabel HTML
dokumen HTML terdiri atas elemen HTML yang bersarang, supaya
lebih jelas langsung saja lihatlah contoh yang saya sajikan berikut:
<!DOCTYPE html>
<html>
<head>latihan</head>
<body>
<h1>Pos Pertama Kamu</h1>
<p>paragraph Pertama Kamu</p>
</body>
</html>
• <html> merupakan sebuah elemen yang mendefinisikan
keseluruhan dokumen, elemen tersebut memiliki tag
pembuka <html> dan tag penutup </html>. Isi pada elemen
HTML adalah elemen <body>.
• <body> merupakan sebuah elemen yang mendefinisikan
tubuh dokumen, elemen tersebut memiliki tag pembuka
<body> dan tag penutup </body>. Isi pada elemen body
adalah ada dua elemen, yaitu elemen <h1> dan elemen
</h1>.
• <h1> merupakan sebuah elemen yang mendefinisikan
heading, elemen tersebut memiliki tag pembuka <h1> dan
tag penutup </h1>. Isi pada elemen nya <h1> adalah pos
pertama kamu <h1>.
• <p> merupakan sebuah elemen yang mendefinisikan
paragraph, elemen tersebut memiliki tag pembuka <p> dan
tag penutup </p>. isi pada elemen nya <p> adalah paragraph
pertama kamu.
2) Elemen kosong
Element HTML tanpa konten akan disebut sebagai elemen yang
kosong. Elemen <br> merupakan sebuah elemen kosong dan tanpa
2
Modul Praktikum – Web Applied
PERTEMUAN
3 Tabel HTML
tag penutup, tag <br> mendefinisikan pergantian satu baris atau
baris baru. Elemen kosong bisa menjadi tag "tertutup" dalam tag
pembukaan seperti ini <br/>. Beberapa elemen kosong html yang
sering digunakan seperti tag <br> dan tag <hr>. Dalam HTML5
tidak mengharuskan elemen kosong ditutup.
<!DOCTYPE html>
<html>
<head>
<title>Chapter 2</title>
</head>
<body>
<p>This is my first paragraph</p>
<br>
<hr>
</body>
</html>
Atribut adalah informasi tambahan yang diberikan kepada tag HTML.
Informasi ini bisa berupa instruksi untuk warna dari text, besar huruf dari
text, dll. Setiap atribut memiliki pasangan nama dan nilai (value) yang
ditulis dengan name=”value”. Value diapit tanda kutip, boleh
menggunakan tanda kutip satu (‘) atau dua (“).
Beberapa atribut tabel HTML :
• Border
Atribut border digunakan untuk mengatur ketebalan dari garis
tepi (border) dari tabel. Jika atribut ini tidak ditulis, maka web
browser akan menampilkan tabel tanpa garis tepi.
• Cellpadding
Atribut cellpadding adalah atribut untuk mengatur jarak teks
dengan garis di dalam sel.
3
Modul Praktikum – Web Applied
PERTEMUAN
3 Tabel HTML
• Cellspacing
Atribut cellspacing digunakan untuk mengatur jarak antara garis
tepi (border) bagian dalam dan luar.
• Bgcolor
Untuk menambahkan warna pada sel dan baris, kita bisa
menambahkan atribut bgcolor di dalam tag <td> atau <tr>..
• Rowspan dan Colspan
Atribut yang digunakan untuk menggabungkan sel tabel adalah
rowspan dan colspan. rowspan untuk menggbungkan baris dan
colspan untuk mebggabungkan kolom.
B. Contoh Tabel
<!DOCTYPE html>
<html>
<head>
<title> Tabel HTML</title>
</head>
<body>
<h3>Belajar atribut dalam Tabel</h3>
<table border="0" cellpadding=”3” cellspacing="3">
<tr bgcolor=”blue”>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
</table>
<br />
<table border="6" cellpadding=”9” cellspacing="9">
<tr>
<td bgcolor=”#bb0123”>Baris 1, Kolom 1</td>
4
Modul Praktikum – Web Applied
PERTEMUAN
3 Tabel HTML
<td bgcolor=”#aabbcc”>Baris 1, Kolom 2</td>
<td bgcolor=”#111222”>Baris 1, Kolom 3</td>
</tr>
</table>
</body>
</html>
4. TUGAS PENDAHULUAN
a. Pelajari modul sebelum perkuliahan dimulai
b. Pelajari referensi seperti buku yang sesuai mata kuliah.
5. PELAKSANAAN PRAKTIKUM
Tugas latihan individu :
• Buat kode HTML untuk setiap tag HTML diatas
• Simpan setiap satu tag kedalam satu halaman HTML
6. TUGAS AKHIR
-