HTML: TABLE DAN

FRAME

TIF 102 – DASAR-DASAR WEB

Oleh: MUHAMMAD SAFRI LUBIS, ST, M.COM

 HTML TABLE
Tabel terdiri dari beberapa bagian yaitu:

 Tag tabel: untuk menandai awal atau akhir tabel yang dinyatakan dengan
pasangan tag <TABLE> ... </TABLE>.
 Tabel Row: baris-baris pada suatu tabel yang dinyatakan dalam pasangan
tag <TR> ... </TR>.
 Tabel Data: tempat di mana Kita memasukkan informasi dalam suatu
tabel. Beberapa Tabel Data yang terdapat dalam suatu baris membentuk
Table Row. Tabel Data dinyatakan dengan pasangan <TD> ... </TD>.
 Tabel Header: judul tabel yang biasanya terletak di bagian paling atas
atau paling kiri tabel. Table Header yang terletak di bagian atas adalah
judul kolom tabel, sedang Table Header yang terletak di bagian kiri adalah
judul baris tabel. Table Header dinyatakan dengan pasangan tag <TH> ...
</TH>.
 LAYOUT IN TABLES
 <table> </table>
 Defines table
 <tr> </tr>
 Defines table row
 align="center/right/justify"
 bgcolor="color"
 valign="top/middle/bottom/baseline"
 <td> </td>
 Defines table devision
 <table> ATTRIBUTES
 align="center/right"
 background="image"
 bgcolor="color"
 border="value"
 bordercolor="color"
 cellpadding="value"
 cellspacing="value"
 summary="text"
 width="value"
 HTML TABLE
Atribut Fungsi

border Untuk membuat batas tepi untuk tabel

width Untuk mengatur lebar tabel

height Untuk mengatur tinggi tabel

align Untuk mengatur bentuk perataan horizontal data di dalam tabel.

valign Untuk mengatur perataan vertikal data di dalam tabel

cellspacing Untuk mengatur spasi antar sel

cellpadding Untuk mengatur spasi dalam sel

rowspan Untuk menggabungkan sel-sel dalam suatu baris

colspan Untuk menggabungkan sel-sel dalam suatu kolom

color Untuk mengatur warna suatu sel dalam tabel

summary Untuk memberi keterangan singkat mengenai struktur dan kegunaan tabel.

rules Untuk mengatur ukuran antara sel dalam tabel

frame Untuk mengatur frame di sekitar tabel

Tabel 5.2 Nilai dari atribut ALIGN
Tabel 5.3 Nilai dari atribut VALIGN

HTML TABLE
Nilai dari atribut ALIGN
Nilai Keterangan

left Merupakan nilai default data sel. Isi sel akan rata kiri

center Merupakan nilai default untuk header sel. Isi sel akan rata tengah

right Isi sel rata kanan

justify Isi sel rata kiri dan kanan

Nilai dari atribut VALIGN

Nilai Keterangan
top Isi sel akan rata atas dengan sel
middle Isi sel akan berada di tengan sel
bottom Isi sel akan di bawah bagian sel
baseline Isi sel akan berada pada posisi teks pertama diketik dalam sel.
 <td> ATTRIBUTES
 align="center/right/justify"
 bgcolor="color"
 colspan="value"
 height="value"
 rowspan="value"
 valign="top/middle/bottom/baseline"
 width="value"
 TAG TABEL (table) - DATA
<table> definisi tabel </table>
Menampilkan data dalam bentuk tabel
Tabel didefinisikan dengan cara menyatakan baris-baris dan kolom-kolom.
Tag untuk penanda baris adalah <tr> definisi baris </tr>
Tag untuk penanda kolom adalah <td>data</td>

<table border="1">
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>ddd</td><td>eee</td><td>fff</td>
</tr>
</table>
 TAG TABEL (table) - LAYOUT
<table border="1" width="500">
<tr>
Untuk menata letak (layout) isi dokumen
<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>
 Beberapa catatan:

• untuk memberi garis pada tabel = <TABLE BORDER=“bilangan”>

•Untuk meletakkan judul di bawah tabel = <TABLE><CAPTION

ALIGN=„BOTTOM>…….</CAPTION><TR><TD>…

•Menentukan warna latar belakang tabel = <table bgcolor=“..”>

•Pengaturan teks pada posisi vertikal <td valign =“top”> atau <td
valign=“middle”> atau <td valign=“bottom”>

•Mengatur jarak dalam tabel = <table cellspacing-”..” cellpadding= “10”>

 Membuat table
Tag <TABLE> digunaka untuk membuat table dalam document HTML , bagian pokok dari table adalah cell yang
didefinisikan dengan menggunakan tag <TD>.

<html>
<head>
<title>Using Table</title>
</head>
<body>
<table border="1">
<td>Table dengan sigle cell</td>
</table>
</body>
</html>

anda bisa menambahkan beberapa cell untuk membuat satu baris cell.

<html>
<head>
<title>Using Table</title>
</head>
<body>
<table border="1">
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</table>
</body>
</html>
berikutnya kalo anda ingin membuat beberapa baris cell dalam table gunakan tag <TR>.

<html>
<head>
<title>Using Table</title>
</head>
<body>
<table border="1">
<tr>
<td>cell 1a</td>
<td>cell 1b</td>
<td>cell 1c</td>
22
</tr>
<tr>
<td>cell 2a</td>
<td>cell 2b</td>
<td>cell 2c</td>
</tr>
</table>
</body>
</html>

anda juga bisa memberi caption pada table dengan menambahkan teg berikut:

<caption>Creating Table</caption>

di dalam table.
 Menambahkan Heading cell
Untuk menambahkan heading pada table tambahkan tag berikut pada table yang sudah di buat.
.
<table border="1">
<caption>Creating Table</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
.
.
Pemformatan table

Untuk memformat perataan text di dalam table anda bisa gunakan attribute Align dan Valign (vertical Alignment)

Attribute Value
Align Center | justify | left | right
Valign BASELINE | TOP | BOTTOM | MIDDLE

<tr align="center" valign="baseline">

<td>cell 1a</td>
<td>cell 1b</td>
<td>cell 1c</td>
</tr>
<tr align="center" valign="baseline">
<td>cell 2a</td>
<td>cell 2b</td>
<td>cell 2c</td>
</tr>

Anda juga bisa menambahkan attribute cellspacing untuk memberi sepasi antar sel dan cellpadding untuk spasi dari
border ke text dalam cell.
 Merge cell
Tag <TD> memiliki atribut colspan untuk merge column dan rowspan untuk merge baris.
Contoh:

<html>
<head>
<title>Using Table</title>
</head>
<body>
<table bgcolor=”CCCCFF” width="62%" border="1"
cellpadding="0">
<tr>
<td colspan="3" align="center">Quarter 1</td>
<td colspan="3" align="center">Quarter 2</td>
</tr>
<tr align="center">
<td>Jan</td>
<td>Feb</td>
<td>Mar</td>
<td>Apr</td>
<td>May</td>
<td>Jun</td>
</tr>
<tr>
<td>100</td>
<td>5000</td>
<td>200</td>
<td>1500</td>
<td>2500</td>
<td>1750</td>
</tr>
<tr>
<td>290</td>
<td>5050</td>
<td>2300</td>
<td>100</td>
<td>270</td>
<td>300</td>
</tr>
</table>
</body>
</html>
 contoh :

<html>
<head>
<title>Rowspan</title>
</head>
<body>
<table bgcolor="lavender" width="75%" border="1"
cellpadding="0">
<tr>
<td></td>
<td></td>
<td>South</td>
<td>North</td>
</tr>
<tr>
<td rowspan="3">Quarter 1</td>
<td>Jan</td>
<td>1000</td>
<td>12000</td>
</tr>
<tr>
<td>Feb</td>
<td>12500</td>
<td>1345</td>
</tr>
<tr>
<td>Mar</td>
<td>78090</td>
<td>71080</td>
</tr>
</table>
</body>
</html>
25
 FRAMES

 The use of frames allows a browser to display more than one

web page in the same window simultaneously.
 Typically frames are used to provide navigation elements or
logos that remain fixed while the main content area changes.
 Frames are introduced by using the <frameset> element.
 Note: A page that has a <frameset> element cannot have a
<body> element. The <frameset> element of a page that uses
frames replaces the <body> element of a non-frame page.
 FRAMES
 Frame digunakan untuk:

 Membuat datar isi pada suatu sisi frame sementara sisi frame
yang lain untuk menampilkan isi.
 Membuat suatu judul atau logo yang tidak berubah-ubah
pada suatu sisi frame, sedangkan sisi frame yang lain
menampilkan isi dokumen.
 Membuat suatu dokumen tanya-jawab, di mana sisi frame
yang satu berisi daftar pertanyaan sedangkan sisi frame yang
lain berisi jawabannya.
 ATTRIBUTES OF <frameset>
 The <frameset> tag normally has one attribute that defines the spacing of the
frames either horizontally or vertically on the screen. For example:
<frameset cols="20%,*"> specifies that there are two frames in the
frameset side by side, the first occupying 20% of the width of the window,
and the other occupying the balance. Each frame extends the entire
height of the window.
<frameset rows="50,100,*"> specifies that there are three frames in the
frameset, one above the other. The first occupies 50 pixels of height, the
next 100 pixels, and the last takes up all the rest of the available vertical
space. Each frame extends the entire width of the window.
 If both rows and cols attributes are specified, then the frames are laid out in a
grid.
 MENGGUNAKAN BORDER <FRAMESET BORDER=“0”>
 MENGHILANGKAN SCROLLING <FRAME SRC=“...” SCROLLING=“NO”>
 FRAME & FRAMESET
 Lebih dari satu dokumen dapat ditampilkan secara bersamaan dalam satu tampilan
 Setiap dokumen ditampilkan dalam sebuah frame
 Sebuah frameset menentukan tata letak, ukuran, dan banyaknya frame yang akan
ditampilkan
 Di dalam frameset boleh ada frameset lain (beranak)
 Dibutuhkan satu dokumen tersendiri yang berisi definisi frameset. Dokumen tersebut
tidak mempunyai isi dokumen (tidak ada <body> </body>)
 Skema dasar dokumen frameset :

<html>
<head>
<title>Judul dokumen</title>
</head>
<frameset>
<frame src="namafile1">
<frame src="namafile2">
...dst (atau frameset yang lain)
<noframes>
bagian ini ditampilkan jika browser tidak mendukung frame
</noframes>
</frameset>
</html>
 CONTOH DOKUMEN FRAMESET
<html>
<head>
<title>Document Frameset</title>
</head>
<frameset cols="33%,43%,23%" frameborder="1">
<frameset rows="*,200">
<frame src="page1.html" name="satu"
scrolling="no" frameborder="0">
<frame src="page2.html" name="dua"
scrolling="yes" noresize>
</frameset>
<frame src="page3.html" name="tiga"
frameborder="0">
<frame src="page4.html" name="empat"
frameborder="1">
<noframes>
Ada 4 halaman :
<ol>
<li><a href="page1.html">Halaman 1</a></li>
<li><a href="page2.html">Halaman 2</a></li>
<li><a href="page3.html">Halaman 3</a></li>
<li><a href="page4.html">Halaman 4</a></li>
</ol>
</noframes>
</frameset>
</html>
 NESTING OF FRAMESETS
 One frameset can be nested inside another.
This allows more complicated layouts than
horizontal tiles, vertical tiles, or a grid.
 The nested frameset occupies the space
where otherwise a single frame of the
enclosing frameset would go.
 IFRAME (INLINE FRAME)
 Di dalam sebuah dokumen (induk) dapat ditampilkan satu atau beberapa dokumen lain
(anak)
 Setiap dokumen (anak) yang disisipkan diletakkan dalam sebuah iframe
 Dokumen induk merupakan dokumen biasa yang mempunyai isi dokumen
 Skema dasar dokumen dengan iframe :

<html>
<head>
<title>Judul dokumen</title>
</head>
<body>
…isi dokumen…
<iframe src="namafile">
bagian ini ditampilkan jika browser tidak mendukung frame
</iframe>
…isi dokumen…
</body>
</html>
<html>
<head>
CONTOH INLINE FRAME
<title>Kisah Sekolah</title>
</head>
<body>
<h1>Kisah-kisah di sekolah</h1>
Masa sekolah adalah masa yang menyenangkan bagiku. Sebagian besar waktu hidupku sampai
saat ini dihabiskan untuk sekolah, dan aku sangat menikmati saat-saat itu. Inilah
sebagian kisah-kisahku di sekolah.<p>
<iframe width='200' height='179'
src='sd.html'>
<a href="sd.html">Kisah SD</a>
</iframe>
&nbsp;
<iframe width='200' height='179'
src='smp.html' frameborder='0'>
<a href="smp.html">Kisah SMP</a>
</iframe>
&nbsp;
<iframe width='200' height='179'
src='smu.html' scrolling='no'>
<a href="smu.html">Kisah SMU</a>
</iframe>
<p>Semua pengalaman dan teman-teman
yang kudapat sungguh sangat mewarnai
hidupku dan memberikan pengaruh besar
terhadap diriku.
</body>
</html>
 The <noframes> Tag
 Older browsers may not support frames. Such browsers will
not see a document body and will display a blank page. To
avoid this, use the <noframes> tag to provide content for these
older browsers. The tag is, of course, unknown to such
browsers, so they will ignore it. You can place a short
document body within this area and it will be displayed by
these browsers. Frame-aware browsers ignore all content
between <noframes> tags.
 The noframes content should be placed inside a <body>
element because some browsers will not display content that
is not in a document body.
 LINKING BETWEEN FRAMES
 Very often it is desired for a link located in one
frame to open in another frame. This is
achieved using the target attribute in the link
element:
<a href="URL" target="frame-name">Link text.</a>
When the link text is clicked, the URL will be opened in the frame whose
name attribute is frame-name. The frame containing this link will remain in
place.
 DESAIN/LAYOUT HALAMAN
Logo

Navigasi
Navigasi

Logo

Navigasi

Navigasi

Navigasi