Pemrograman web dasar TABEL.

Slides:



Advertisements
Presentasi serupa
Oleh Apriliya saputri X ti b
Advertisements

SESION 3 : Memformat Dokumen html (lanjutan)
Pemrograman Web 1Humisar Hasugian, S.Kom 1 Pengenalan HTML HTML • Hypertext Markup Language merupakan standard bahasa yang digunakan untuk menampilkan.
Matakuliah Pengenalan Internet STMIK Palangkaraya Oleh : Suparno Blog : Pengenalan HTML - 2 Bullet Numbering.
STMIK PPKIA Pradnya Paramita
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
HTML (Hypertext Markup Language)
Dasar Tag HTML  Catatan: Jika Anda ingin menambahkan komentar pada dokumen HTML,maka tulislah Tag,misal: NEXT.
PEMROGRAMAN WEB HTML LANJUT BY : ABD.WAHID YUNUS TI UIN ALAUDDIN MAKASSAR.
Apa itu HTML ? Perangkat lunak yang digunakan untuk membuat atau mengetikkan kode file HTML Perangkat lunak yang digunakan untuk menjalankan atau menampilkan.
ATRIBUT YG DIGUNAKAN PADA PEMROGRAMAN HTML 1. border Digunakan untuk Meniadakan atau menampilkan ketebalan garis-garis pada tabel Contoh : Contoh :
Pengantar HTML By : Muhammad Zen S. Hadi Digital Communication Laboratory EEPIS-ITS.
Basic HTML Konsep dan Fungsi HTML
Pengembangan Evangs Mailoa Enumerasi, Image & Table WEB.
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.
Enumerasi, Images & Table
TABEL , FORM DAN FRAME.
Pemprograman BaSIS Web
ADD-ON Dasar HTML.
HTML (cont.) (Nelly Sofi). Peng. Komp & TI 2C2 Untuk mempelajari HTML saat ini tidaklah sulit karena sudah banyak program yang mampu menghasilkan dokumen.
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
MATERI PERKULIAHAN REKAYASA PERANGKAT LUNAK DISUSUN OLEH : KRISTIAWAN NUGROHO, M.KOM Fakultas Kesehatan.
Pemrograman Web Ch.3 LIST dan TABLE Tommy, ST, MKom.
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
HTML HYPERTEXT MARKUP LANGUAGE
Mengenal dan Teknik Pembuatan Frame
Komputer aplikasi it-I (html)
Adi Rachmanto – UNIKOM T A B E L Komputer aplikasi iT-1 Adi Rachmanto – UNIKOM
Mengenal dan Teknik Pembuatan Frame
( Materi web HTML ) Membuat tabel.
Table.
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.
T A B E L.
Pemrograman Web HTML (4) Table Form Andy Haryoko, ST
Internet dan Web By : Lisda Juliana P..
Pertemuan ke 3 Ahmadi Sistem Informasi STMIK “BINA NUSANTARA JAYA”
Pemrograman Berorientasi Platform (IN315B)
Komputer aplikasi it-I (html)
Darmawan satyananda Mathematics department State university of malang
Pemrograman Web PG117 – 3 SKS.
Devie rosa anamisa, s.kom, m.kom
Pengenalan HTML HTML Hypertext Markup Language merupakan standard bahasa yang digunakan untuk menampilkan dokumen web Untuk membuat dokumen web yang bisa.
Enumerasi, Images & Table
Web Design HTML TIM MATRIKULASI TI-S1 UDINUS TAHUN 2018.
STMIK PPKIA Pradnya Paramita Pemrograman berbasis Web
Table dengan tag html.
Enumerasi, Images & Table
Order dan Unorder List.
List dan Image pada HTML
Internet dan Web By : Lisda Juliana P..
Transcript presentasi:

Pemrograman web dasar TABEL

Tabel Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap kolom menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolom – kolom yang menunjukkan kelompok data dalam satu kesatuan. Berikut merupakan elemen yang merupakan penyusun tabel dalam HTML statis <TABLE>…</TABLE> Mendefenisikan sebuah tabel dalam HTML jika atribut border dituliskan, maka browser akan menampilkan tabel dengan border.

Tabel Tabel terdiri dari beberapa bagian / elemen yaitu : Tabel Row atau baris tabel, yaitu baris-baris pada suatu tabel yang dinyatakan dengan pasangan tag <TR> Tabel Data atau data tabel, yaitu tempat dimana anda memasukan informasi dalam suatu tabel.Beberapa tabel data yang terdapat dalam suatu baris membentuk tabel row.Tabel data dinyatakan dengan pasangan tag <TD> Tabel Header adalah judul tabel yang biasanya terletak dibagian paling atas atau paling kiri dari suatu tabel Tabel header dinyatakan dengan pasangan tag <TH>…</TH>

TabeL Caption adalah judul tabel yang biasanya terletak dibagian luar suatu tabel, biasanya dibagian atas atau bagian bawah tabel.Pasangan tag yang digunakan untuk membentuk suatu caption adalah <CAPTION>…</CAPTION>.

TABEL Selain elemen – elemen tersebut tabel juga mempunyai beberapa atribut : Border, untuk membuat batas tepi dari suatu tabel Bordercolor, untuk memberi warna pada batas Width, untuk mengatur lebar tabel Align, untuk mengatur bentuk perataan horizontal data di dalam tabel, seperti dikiri, ditengah atau dibagian kanan.(left,right,center) Valign, untuk mengatur perataan vertikal dari suatu data, seperti di atas, ditengah atau dibawah.(top,middle,bottom)

TABEL Cellspacing dan Cellpadding, untuk mengatur spasi antarsel dan spasi didalam sel.Sel adalah tempat atau kotak dimana data atau judul kolom atau judul baris berada. Rowspan dan Colspan, yaitu gabungan sel-sel dalam suatu kolom atau baris Color, yaitu untuk mengatur warna suatu sel dalam tabel

Tabel Untuk pembuatan tabel didalam HTML kita perlu menggunakan tag berpasangan yaitu : <TABLE> <tr> <TD>Tabel sederhana </TD> </tr> </TABLE> Terlalu sederhana untuk dianggap sebagai tabel maka kita bisa menambahkan atribut border <TABLE BORDER= “ ...“> <TD>Tabel sederhana dengan suatu border</TD>

Tabel Didalam tag tabel ini kita dapat menentukan lebar tabel, jumlah baris dan kolom, border tabel, perataan dalam tabel, warna suatu sel dan lain sebagainya. Contoh tabel yang paling sederhana adalah tabel yang hanya terdiri dari satu baris dan satu kolom saja seperti berikut : <table><tr> <td>Tabel sederhana</td></tr> </table>

Tabel Untuk membuat border tabel, gunakan atribut BORDER seperti berikut: <table border=“ “> <tr><td>Tabel sederhana dengan suatu border</td></tr> </table>

Membuat tabel sederhana Dengan atribut border, tabel anda mulai terlihat dengan adanya batas atau border pada tabel tersebut. Lebar border ini dapat diubah-ubah dengan memberikan suatu nilai pada atribut tersebut, seperti : <table border=“5”> <tr><td>Tabel sederhana dengan lebar border = 5</td></tr> </table>

Tabel dua dimensi Pada contoh tabel diatas yang hanya terdiri dari satu baris, sel data dapat langsung didefenisikan dengan menggunakan tag <TD>…</TD>, tanpa perlu menggunakan tag<TR>…</TR>. Jadi elemen TD (table data) berfungsi sebagai pembentuk kolom pada tabel. <table border=“5”> <td>kolom satu</td> <td>kolom dua</td> <td>kolom tiga</td> </table>

Tabel dua dimensi Untuk membuat tabel dengan 2 baris, harus menggunakan elemen TR (Table row) <TABLE BORDER=“5”> <TR> <TD>Baris 1, kolom1</TD> <TD>Baris1, kolom2</TD> <TD>Baris1, kolom3</TD> </TR>

Tabel dua dimensi <TR> <TD>Baris 2, kolom 1</TD> <TD>Baris 2, kolom 2</TD> <TD>Baris 2, kolom 3</TD> </TR> </TABLE>

Menambahkan judul tabel Judul tabel, atau biasanya disebut caption, terletak dibagian luar suatu tabel. Caption bisa berada dibawah atau di atas tabel, tetapi tidak bisa dibagian kiri dan kanan luar tabel. Judul tabel dibuat dengan menggunakan elemen CAPTION, yang biasanya diletakan setelah tag awal <TABLE> <table border=“5”> <caption> <b>Judul Tabel</b> </caption>

Tabel Untuk membuat sel kosong anda cukup mendefenisikan sel tersebut dengan elemen TH atau TD tanpa disertai dengan data apapun didalamnya. <table border="1"> <tr> <th>Nama</th> <th>Nilai 1</th> <th>Nilai 2</th> </tr>

Tabel <tr> <td>Zona</td> <td>70</td> <td>90</td></tr> <tr> <td>Zono</td> <td>80</td> <td>92</td></tr> <tr> <td>Zoni</td> <td>85</td></tr> <tr> <td>Zunu</td> <td></td> <td>95</td></tr>

Perataan dalam tabel Dalam tabel ada 2 macam perataan yaitu perataan horisontal dan perataan vertikal. Horisontal biasanya ke kiri, kanan, dan tengah. Vertikal biasanya ke atas, bawah dan tengah. Perataan horisontal dinyatakan dengan atribut ALIGN dan dapat digunakan pada elemen CAPTION, TR, TD atau TH. Jika pada elemen CAPTION, atribut ALIGN akan menentukan apakah caption muncul di atasatau di bawah tabel.

Perataan dalam tabel Jika muncul dalam elemen TR, TH, atau TD atribut ALIGN akan menentukan apakah data didalam sel tabel diratakan kiri,tengah atau kanan sel. Perataan vertikal dinyatakan dengan atribut valign dan dapat digunakan pada elemen TR, TD, dan TH. Atribut VALIGN menentukan apakah data dalam sel tabel diratakan pada bagian atas sel, bawah sel, atau bagian tengah secara vertikal. Nilai-nilai =VALIGN=top(atas), VALIGN=middle(tengah), VALIGN=bottom(bawah).

Contoh <table border=“1”> <tr> <th><br></th> <th>satu</th> <th>dua<th> <th>tiga</th> </tr> <th>menggunakan valign atas</th> <td ALIGN=“left” VALIGN=“top”>TI</td>

Contoh <td ALIGN=“center” VALIGN=“top”>TA</td> <td ALIGN=“right” VALIGN=“top”>IF</td> </tr> <tr> <th>menggunakan valign tengah</th> <td ALIGN=“left” VALIGN=“middle”>TI</td> <td ALIGN=“center” VALIGN=“middle”>TA</td> <td ALIGN=“right” VALIGN=“middle”>IF</td>

Contoh <tr> <th>menggunakan valign BAWAH</th> <td ALIGN=“left “ VALIGN=“bottom”>TI</td> <td ALIGN=“center” VALIGN=“bottom”>TA</td> <td ALIGN=“right” VALIGN=“bottom”>IF</td> </tr> </TABLE>

Mengatur lebar tabel Lebar tabel diatur dengan atribut WIDTH. Atribut ini digunakan untuk mengubah lebar tabel maupun lebar kolom suatu tabel. Atribut ini bisa digunakan dalam elemen TABLE, TH, dan TD. Nilai atribut ini dinyatakan dalam pixel maupun persen. Jika didalam elemen TABLE atribut ini menunjukkan lebar tabel terhadap browser. Jika digunakan dalam elemen TH dan TD nilainya merupakan lebar kolom terhadap tabel

contoh <table border width=“70%”> <caption align=bottom>Tabel dengan lebar 70% dari jendela browser</caption> <tr> <td width=“50%”>Width=50%</td> <td width=“50%”’>Width=50%</td> </tr> </table> <p><p>

contoh <table border width=“100”> <caption align=bottom>Tabel dengan lebar 100% dari jendela browser</caption> <tr> <td width=“25”>Width=25</td> <td width=“75”>Width=75</td> </tr> </table>

Penggunaan warna pada tabel Untuk menentukan warna latar belakang tabel, gunakan atribut BGCOLOR. Sedangkan untuk mengubah warna border tabel hanya dapat dilakukan dalam IE yang menyediakan beberapa macam atribut, yaitu BORDERCOLOR, BORDERCOLORLIGHT dan BORDERCOLORDARK. Ketiga atribut warna untuk border ini harus digunakan bersama-sama dengan aribut BORDER. BORDERCOLORLIGHT untuk mengubah warna border dibagian atas dan kiri. BORDERCOLORDARK, digunakan untuk mengubah warna border bawah dan kanan. BORDERCOLOR, digunakan untuk mengubah warna keseluruhan border.

Contoh <center> <table border=“5” width=“110%” bordercolorlight=“blue” bordercolordark=“black”> <caption center valign=bottom>tabel berwarna</caption> <tr><td bgcolor=“yellow”>kuning</td></tr> <tr><td bgcolor=“white”>putih</td></tr> <tr><td bgcolor=“aqua”>aqua</td></tr> <tr><td bgcolor=“green”>hijau</td></tr> </table> </center>

Mengatur spasi tabel Ada dua atribut yang digunakan untuk mengatur spasi dalam tabel, yaitu CELLSPACING dan CELLPADDING. CELLSPACING digunakan untuk menentukan jumlah spasi yang terdapat diantara dua buah sel dalam suatu tabel CELLPADDING digunakan untuk menentukan jumlah spasi yang terdapat diantara border sel dan dengan isi yang ada di dalam sel tersebut.

contoh <table border=“5” cellspacing=“10” cellpadding=“15”> <tr> <td>Sistem</td> <td>sistem</td> <td>sistem</td> </tr> <td>Informasi</td> <td>informasi</td> <td>Informasi</td> </table>

Menggabungkan kolom dan baris Anda dapat menggabungkan dua atau lebih kolom / baris menjadi satu kolom / baris. Atribut yang digunakan untuk menggabungkan kolom adalah COLSPAN. Atribut yang digunakan untuk menggabungkan baris adalah ROWSPAN.

Contoh colspan dan rowspan <table > <caption>COLSPAN</caption> <tr> <td>1</td> <td colspan=“2”>2</td> </tr> <td>2.1</td> <td>2.2</td> </table> <table border=“1”> <caption>ROWSPAN</caption> <tr> <td rowspan=2>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table>