Materi3-Table & Frame Layout -SULHAN.pdf

❖ HTML menyediakan tag-tag yang dapat
digunakan untuk membuat tabel
❖ fasilitas tabel tersebut biasanya digunakan
untuk menampilkan dokumen yang diatur
berdasarkan kolom ataupun baris

❖Tag – tag umum untuk pembuatan tabel yang
disediakan HTML diantaranya adalah :
-TABLE → PembentukanTabel
-TD → Pembentukan Kolom
-TR → Pembentukan Baris
❖Tag – tag tersebut harus dirangkaikan
sedemikian rupa sehingga membentuk
sebuah tabel →Tidak dapat berdiri sendiri -
sendiri

Tag <TABLE> mempunyai beberapa atribut,
diantaranya adalah :
Attribut Keterangan
ALIGN Posisi hirizontal table
BACKGROUND Menentukan gambar latar belakang table
BGCOLOR Menentukan warna latar belakang table
BORDER Menentukan tebal bingkai table
BORDERCOLOR Menentukan warna bingkai table
BORDERCOLORLIGHT Menentukan warna depan bingkai table
BORDERCOLORDARK Menentukan warna bayangan bingkai table
CELLSPACING Menentukan jarak spasi antar sel
CELLPADING Menentukan jarak isi sel dengan bingkai
HEIGHT Menentukan tinggi tabel
WIDTH Menentukan lebar tabel
VALIGN Menentukan posisi vertikal teks dalam sel

Tag <TD> dan <TR> mempunyai beberapa
atribut, diantaranya adalah :
Attribut Keterangan
ALIGN Posisi hirizontal teks dalam sel
BACKGROUND Menentukan gambar latar belakang sel
BGCOLOR Menentukan warna latar belakang sel
BORDER Menentukan tebal bingkai sel
BORDERCOLOR Menentukan warna bingkai sel
BORDERCOLORLIGHT Menentukan warna depan bingkai sel
BORDERCOLORDARK Menentukan warna bayangan bingkai sel
COLSPAN Menentukan jumlah kolom yang digabung
HEIGHT Menentukan tinggi sel
NOWRAP Menentukan teks agar tetap satu baris
ROWSPAN Menentukan jumlah baris yang digabung
VALIGN Menentukan posisi vertikal teks dalam sel

<html>
<head>
<title>Membuat Tabel</title>
</head>
<body>
<table border="1">
<td>Tabel dengan satu kolom</td>
</table>
</body>
</html>

<html>
<head>
<title>Membuat Tabel</title>
</head>
<body>
<table border="1">
<td> KOLOM 1</td>
<td> KOLOM 2</td>
<td> KOLOM 3</td>
<td> KOLOM 4</td>
</table>
</body>
</html>

<html>
<head>
<title> Membuat beberapa baris sel
dalam Table</title>
</head>
<body>
<table border="1">
<tr>
<td>Kolom 1 baris 1</td>
<td> Kolom 2 baris 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>

❖ Melakukan merger antar baris atau kolom
tabel.
 Tag <TD> memiliki atribut colspan untuk
merger kolom dan rowspan untuk merger
baris

<html>
<head>
<title>Merger Kolom</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2"
align="center">Program Studi</td>
</tr>
<tr>
<td>Teknik Informatika</td>
<td>Teknik Elektro</td>
</tr>
</table>
</body>
</html>

<html>
<head> <title>Merger Baris</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">Berita Acara</td>
<td>JAM I</td>
<td>JAM II</td>
</tr>
<tr>
<td>Pengenalan WEB</td>
<td>Praktek Internet</td>
</tr>
</table>
</body>
</html>

Navigasi
Logo
Navigasi
Navigasi
Navigasi
Logo
Navigasi

Untuk menata letak (layout) isi dokumen
<table border="1" width="500">
<tr>
<td>Header kiri</td>
<td align="center" width="50%">Header tengah</td>
<td align="right">Header kanan</td>
</tr>
<tr>
<td valign="top" rowspan="2">Menu kiri</td>
<td align="center" colspan="2" height="200">Bagian
Isi</td>
</tr>
<tr>
<td align="center">Footer tengah</td>
<td align="right">Footer kanan</td>
</tr>
</table>

❖ Frame digunakan untuk membagi jendela
browser menjadi beberapa bagian.
❖ Tag yang digunakan untuk membuat Frame
- Frameset
- Frame

❖ Frame digunakan untuk membagi jendela
browser menjadi beberapa bagian.
❖ Tag yang digunakan untuk membuat Frame
- Frameset
- Frame
- iFrame

Atribut Keterangan
ROWS Membuat frame secara mendatar (baris) sekaligus
mendefinisikan lebar masing – masing
COLS Membuat frame secara vertical (kolom) sekaligus
mendefisikan lebar masing – masing
BORDERCOLOR Mendefinisikan warna bingkai frame

Atribut Keterangan
SRC Menentukan nama file HTML yang digunakan sebagai isi frame
MARGINHEIGHT Menentukan batas atas dan bawah antara dokumen dengan bingkai
dalam pixel.
MARGINWIDTH Menentukan batas kiri dan kanan antara dokumen dengan bingkai
dalam pixel
SCROLLING Menentukan apakah dapat memiliki scroll bar, Nilainya adalah yes,
no, atau auto.
NORESIZE Jika atribut ini disebutkan, frame tidak dapat diubah ukurannya
NAME Mendefinisikan nama dari objek frame. Nama ini dapat digunakan
sebagai tujuan sebuah link
BORDER Menentukan ukuran bingkai frame

Frameset
Frame-1
Frame-2
Frame-3

<html>
<head>
<title>Menggunakan Frame</title>
</head>
<body>
HALAMAN 1 PADA FRAME 1
</body>
</html>

<html>
<head>
<title>Menggunakan Frame</title>
</head>
<FRAMESET ROWS="*,*,*">
<FRAME SRC="halaman1.html" NAME=frmsatu>
<FRAME SRC="halaman2.html" NAME=frmdua SCROLLING=yes>
<FRAME SRC="halaman3.html" NAME=frmtiga NORESIZE>
</FRAMESET>
</html>

Frameset
Frame-1
Frame-2 Frame-3
Frameset

<FRAME SRC="halaman3.html" NAME=“frmtiga“>
<a href="halaman4.html" target="frmtiga">Halaman4</a>
Load dokumen HTML secara langsung :
Load dokumen HTML berdasarkan Hyperlink :

❖ iFrame digunakan untuk membuat frame
pada tempat tertentu.
❖ Skrip iFrame :
<iframe
frameborder=0 width=220 height=403
name=“konten"
src=“file_dukumen.html">
</iframe

Materi3-Table & Frame Layout -SULHAN.pdf

Recommended

Recommended

More Related Content

Similar to Materi3-Table & Frame Layout -SULHAN.pdf

Similar to Materi3-Table & Frame Layout -SULHAN.pdf (20)

More from Sulhandrive

More from Sulhandrive (13)

Recently uploaded

Recently uploaded (7)

Materi3-Table & Frame Layout -SULHAN.pdf