T A B E L.

Slides:



Advertisements
Presentasi serupa
SESION 3 : Memformat Dokumen html (lanjutan)
Advertisements

Cascading Style Sheet Gufron Gufron - Sub Bahasan • Pendahuluan • Konsep Dasar CSS • Syntax/Perintah CSS • Implementasi.
Matakuliah Pengenalan Internet STMIK Palangkaraya Oleh : Suparno Blog : Pengenalan HTML - 2 Bullet Numbering.
Perintah dan Fungsi Tag pada HTML
Cascading Style Sheets (CSS)
DASAR HTML Marina Azizah. Struktur Dokumen HTML Dokumen HTML bisa di bagi mejadi tiga bagian utama: HTML Setiap dokumen HTML harus di awali dan di tutup.
Tabel PENGGUNAAN TABEL
Apa itu HTML ? Perangkat lunak yang digunakan untuk membuat atau mengetikkan kode file HTML Perangkat lunak yang digunakan untuk menjalankan atau menampilkan.
Pemrograman web dasar TABEL.
Pemprograman & Perancangan WEB Pertemuan 6  CSS (Cascading Style Sheet)
HTML (Hypertext Markup Language)
HTML (Lanjut).
HTML (Table, Form, Frame, Hyperlink)
 Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table Anda dapat membuat halaman web "terbagi" pada beberapa kolom atau.
 Digukan utk menyajikan data dlm bentuk kolom dan baris  Tabel juga dapat dipergunakan sebagai LayOut dari document HTML  Diperbolehkan membuat table.
Pemrograman Web Mohamad Syafri Tuloli.
TABEL , FORM DAN FRAME.
Pemprograman BaSIS Web
Dasar-dasar HTML Mengenal HTML
Pemrograman Basis Data Berbasis Web
HTML singkatan dari HyperText Markup Language menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Software.
PEMBUATAN TABEL MATA KULIAH PEMROGRAMAN WEB Materi Kelima
Tim FT Elektro UHAMKA HTML (Bagian 2)
Tabel HTML Bambang Irawan.
Universitas Komputer Indonesia
IRAWATI, S.Kom.,MT. PEMROGRAMAN WEB
Pemrograman Web Ch.3 LIST dan TABLE Tommy, ST, MKom.
PENGATURAN TAMPILAN DOKUMEN
Pertemuan Ke-3 (HTML Lanjut [1])
KOMPUTER APLIKASI IT XHTML & CSS MODUL 04
HTML LANJUT.
PERTEMUAN 2 HTML (Lanjutan).
Dasar Tag HTML Catatan:
Pembuatan Table Pada WEB
Cascading Style Sheet (CSS)
HTML HyperText Markup Language
Font Font-Family Nilainya berupa nama font yang diinginkan dan generic font Memasukkan nilai dari beberapa font sekaligus dengan pemisah tanda koma (,):
Komputer aplikasi it-I (html)
PENGANTAR HTML NEXT.
HTML HYPERTEXT MARKUP LANGUAGE
Mengenal dan Teknik Pembuatan Frame
Komputer aplikasi it-I (html)
Internet dan Pengantar HTML
Adi Rachmanto – UNIKOM T A B E L Komputer aplikasi iT-1 Adi Rachmanto – UNIKOM
Mengenal dan Teknik Pembuatan Frame
Komputer aplikasi it-I (html)
( Materi web HTML ) Membuat tabel.
Table.
INTERNET (Praktikum) STMIK “BINA NUSANTARA JAYA”
Zanial Mazalisa, S.Kom.,M.M
PJ : Nuraini Purwandari
Komputer aplikasi it-I (html)
By : Ni Kadek Ariasih,S.Kom
List, Image, Link dan tabel
Pemrograman Basis Data Berbasis Web
Desain WEB.
Internet dan Web By : Lisda Juliana P..
HTML Muhammad Yusuf Teknik Informatika – Universitas Trunojoyo
Pertemuan ke 3 Ahmadi Sistem Informasi STMIK “BINA NUSANTARA JAYA”
LPIA Cileungsi Team Div-Kom ‘10
Komputer aplikasi it-I (html)
Darmawan satyananda Mathematics department State university of malang
Pengenalan HTML HTML Hypertext Markup Language merupakan standard bahasa yang digunakan untuk menampilkan dokumen web Untuk membuat dokumen web yang bisa.
Web Design HTML TIM MATRIKULASI TI-S1 UDINUS TAHUN 2018.
Table dengan tag html.
Enumerasi, Images & Table
Order dan Unorder List.
List dan Image pada HTML
List dan Image pada HTML
Internet dan Web By : Lisda Juliana P..
Transcript presentasi:

T A B E L

ATRIBUT TABEL Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk tabel dalam HTML. Disamping itu tabel juga digunakan untuk menampilkan record-record pada database. Untuk membuat tabel digunakan tag <TABLE>….</TABLE>. Akan tetapi tag <TABLE> tersebut tidak bisa berdiri sendiri, harus disertai dengan tag-tag lain sebagai pembuat baris dan kolom yaitu :

ATRIBUT TABEL c. Table Header (TH) Fungsi table header sama dengan fungsi table data, akan tetapi pada table header, font akan ditampilkan dalam cetak tebal. Tag yang digunakan adalah tag <TH>…</TH>. d. Caption Elemen caption berfungsi untuk memberikan nama atau judul pada tabel. Tag yang digunakan adalah tag <CAPTION>….</CAPTION>. Tag ini ditempatkan diantara tag TABLE, tetapi tidak ditempatkan diantara tag TR, TH dan TD. a. Table Row (TR) Elemen Table Row digunakan untuk menandai awal dari tiap baris pada tabel, atau tag ini digunakan untuk membuat baris tabel. Tag yang digunakan adalah tag <TR>…..</TR>. b. Table Data (TD) Elemen table data digunakan untuk menandai awal dan akhir dari tiap sel didalam tabel atau tag ini digunkan untuk membuat colom dalam sebuah baris. Tag yang digunakan adalah tag <TD>…..</TD>.

CONTOH PROGRAM ( TABEL1.HTML) <HTML> <HEAD> <TITLE>tabel1</TITLE> </HEAD> <BODY> <TABLE border=5> <TR> <TD>baris 1 kolom 1</TD> <TD>baris 1 kolom 2</TD> </TR> </TABLE> </BODY> </HTML>

CONTOH PROGRAM ( TABEL2.HTML) <HTML> <HEAD> <TITLE>tabel2</TITLE> </HEAD> <BODY> <TABLE border=1> <TR> <TD>baris 1 kolom 1</TD> <TD>baris 1 kolom 2</TD> </TR> <TD>baris 2 kolom 1</TD> <TD>baris 2 kolom 2</TD> </TABLE> </BODY> </HTML>

CONTOH PROGRAM TABEL DENGAN HEADER DAN CAPTION <TABLE border=1> <CAPTION> TABEL MAHASISWA</CAPTION> <TR> <TH>Nim</TH> <TH>Nama</TH> </TR> <TD>21511050</TD> <TD>Leonardo</TD> <TD>21511051</TD> <TD>Siti Romlah</TD> </TABLE> <HTML> <HEAD> <TITLE>tabel3</TITLE> </HEAD> <BODY> </BODY> </HTML>

Atribut tabel Untuk lebih melengkapi tampilan dan bentuk tabel, elemen tabel memiliki atribut-atribut yaitu : a. Colspan Atribut ini menentukan jumlah kolom yang akan ditarik oleh sel. Atribut ini merupakan atribut untuk tag TD dan TH. b. Rowspan Atribut ini menentukan jumlah baris yang akan ditarik oleh sel, Atribut ini merupakan atribut untuk TD dan TH.

CONTOH PROGRAM (colspan.html) <HTML> <HEAD> <TITLE>Colspan</TITLE> </HEAD> <BODY> <TABLE border=1> <TR> <TH colspan=2>ini adalah header</TH> </TR> <TD>baris 1 kolom 1</TD> <TD>baris 1 kolom 2</TD> <TD colspan=2>baris 2 colspan</TD> </TABLE> </BODY> </HTML>

CONTOH PROGRAM (rowspan.html) <HEAD> <TITLE>Rowspan</TITLE> </HEAD> <BODY> <TABLE border=1> <TR> <TH colspan=2>ini adalah header</TH> </TR> <TD rowspan=2>kolom 1 rowspan</TD> <TD>baris 1 kolom 2</TD> <TD>baris 2 kolom 2</TD> </TABLE> </BODY> </HTML>

Atribut tabel c. Border d. Cellspacing e. Cellpadding Atribut border digunakan untuk menentukan tebal dari garis yang ada pada tabel. d. Cellspacing Atribut cellspacing digunakan untuk menentukan jumlah spasi yang browser tempatkan diantara tiap-tiap sel individual atau spasi antar sel dan garis jika sel berada di sisi tabel. e. Cellpadding Atribut cellpadding digunakan untuk menentukan tebal jumlah spasi yang browser tempatkan diantara data dalam sel dan garis sel. spasi antar sel dan garis jika sel berada di sisi tabel.

CONTOH PROGRAM (space.html) <HEAD> <TITLE>Rowspan</TITLE> </HEAD> <BODY> <TABLE border=1 cellspacing=5 cellpadding=5> <TR> <TH colspan=2>ini adalah header</TH> </TR> <TD rowspan=2>kolom 1 rowspan</TD> <TD>baris 1 kolom 2</TD> <TD>baris 2 kolom 2</TD> </TABLE> </BODY> </HTML>

ATRIBUT TABEL <HTML> <HEAD> <TITLE>Cellspacing</TITLE> </HEAD> <BODY> <TABLE border=1 Cellspacing=5 cellpadding=5 width=500> <TR> <TH colspan=2 width=100%>ini adalah header</TH> </TR> <TD rowspan=2 width=30%>kolom 1 rowspan</TD> <TD width=70%> baris 1 kolom 2</TD> <TD width=70%>baris 2 kolom 2</TD> </TABLE> </BODY> </HTML> f. Width Atribut width digunakan untuk mengatur lebar horisontal tabel, atau sel. Pengaturan lebar ini menggunakan angka dalam satuan pixel satu sebagai suatu persentase lebar tampilan browser.

ATRIBUT TABEL <HTML> <HEAD> <TITLE>Cellspacing</TITLE> </HEAD> <BODY> <TABLE border=1 Cellspacing=5 cellpadding=5 width=500 height=500> <TR> <TH colspan=2 width=100% height=10%>ini adalah header</TH> </TR> <TD rowspan=2 width=30%>kolom 1 rowspan</TD> <TD width=70%> baris 1 kolom 2</TD> <TD width=70% height=20% >baris 2 kolom 2</TD> </TABLE> </BODY> </HTML> g. Height Atribut width digunakan untuk mengatur lebar vertikal tabel, atau sel. Pengaturan lebar ini menggunakan angka dalam satuan pixel satu sebagai suatu pesentase lebar tampilan browser.

ATRIBUT TABEL <HTML> <HEAD> <TITLE>warna tabel</TITLE> </HEAD> <BODY> <TABLE border=1 Cellspacing=5 cellpadding=5 bgcolor=yellow> <TR> <TH colspan=2 bgcolor=#C3C3C3>ini adalah header</TH> </TR> <TD rowspan=2>kolom 1 rowspan</TD> <TD>baris 1 kolom 2</TD> <TD bgcolor=#956ABF>baris 2 kolom 2</TD> </TABLE> </BODY> </HTML> h. Bgcolor Atribut bgcolor digunakan untuk warna backround pada tabel dan pada sel.

MENGUBAH WARNA Warna yang dikenal HTML 3.2 hanya 16 warna. Sekalipun demikian dalam perkembangannya sampai saat ini, jumlah warna terus bertambah. Aqua - Navy - Black Olive - Blue - Purple Fuchsia - Red - Gray Silver - Green - Teal Lime - White - Maroon yellow

MENGUBAH WARNA Selain menggunakan kata dalam bahasa Inggris untuk mengubah warna, cara yang lain bisa menggunakan hex code. Cara menuliskannya adalah dengan dimulai karakter pagar “#” dan diikuti kombinasi RGB (Red, Green, Blue).

MENGUBAH WARNA Jika kita menghendaki warna terang maka unsur F diperbanyak Dan jika warna gelap maka unsur 0 diperbanyak. Dibawah ini Ditampilkan beberapa contoh warna dengan menggunakan Hex code HEX WARNA #FF0000 MERAH #00FF00 HIJAU #0000FF BIRU #FF00FF UNGU #FFFF00 KUNING #FF8800 ORANGE #FFFFFF PUTIH #000000 HITAM #00FFFF CYAN #AA8800 COKELAT #888888 ABU - ABU #004488 NAVY

Atribut bordercolor digunakan untuk memberikan warna pada garis tabel ATRIBUT TABEL <HTML> <HEAD> <TITLE>warna tabel</TITLE> </HEAD> <BODY> <TABLE border=1 Cellspacing=5 cellpadding=5 bgcolor=yellow bordercolor=blue> <TR> <TH colspan=2 bgcolor=#C3C3C3>ini adalah header</TH> </TR> <TD rowspan=2>kolom 1 rowspan</TD> <TD>baris 1 kolom 2</TD> <TD bgcolor=#956ABF>baris 2 kolom 2</TD> </TABLE> </BODY> </HTML> i. Bordercolor Atribut bordercolor digunakan untuk memberikan warna pada garis tabel

ATRIBUT TABEL j. Align Atribut align digunakan untuk menempatkan posisi tabel atau text yang ada di dalam sel secara horisontal. Jika ditempatkan pada tag <TABLE> akan menepatkan posisi tabel dalam browser, sedangkan jika ditempatkan pada tag <TD> akan menempatkan posisi teks yang ada dalam cel. Nilai atribut ini ada tiga, yaitu : LEFT, CENTER dan RIGHT k. Valign Atribut valign digunakan untuk menempatkan posisi text yang ada di dalam sel secara vertikal. Atribut ini ditempatkan pada tag <TD> akan menempatkan posisi teks yang ada dalam cel. Nilai atribut ini ada tiga, yaitu : TOP, MIDDLE dan BOTTOM

CONTOH PROGRAM (alignment.html) <HEAD> <TITLE>Alignment</TITLE> </HEAD> <BODY> <TABLE border=1 Cellspacing=5 cellpadding=5 width=500 height=500 align=right> <TR> <TH colspan=2 width=100% height=10%> ini adalah header </TH> </TR> <TD rowspan=2 align=right valign=top> kolom 1 rowspan </TD> <TD width=70% align=center valign=bottom> baris 1 kolom 2 </TD> <TD height=20% align=left valign=middle> baris 2 kolom 2 </TD> </TABLE> </BODY> </HTML>

MENEMPATKAN IMAGE PADA SEL TABEL <HTML> <HEAD> <TITLE>Menempatkan Image</TITLE> </HEAD> <BODY> <TABLE border=1 width=100%> <TR> <TD rowspan=2 width=13%><img src="images_186.jpg" width=165 height=170></TD> <TD bgcolor=pink><marquee><h1>WeLcOmE To My WeBsItE </h1></marquee></TD> </TR> <TD bgcolor=maroon><h1><marquee behavior=alternate> <font color=“white” face=“broadway”> N A M A - A K U</h1></marquee></TD> </table> </BODY> </HTML>

L A T I H A N - 1