Pembuatan Table Pada WEB

Slides:



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

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
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.
ATRIBUT YG DIGUNAKAN PADA PEMROGRAMAN HTML 1. border Digunakan untuk Meniadakan atau menampilkan ketebalan garis-garis pada tabel Contoh : Contoh :
Pemrograman web dasar TABEL.
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.
TABEL , FORM DAN FRAME.
Pemprograman BaSIS Web
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.
Membuat Layout dengan Tabel
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])
STMIK PPKIA Pradnya Paramita Pemrograman berbasis Web
KOMPUTER APLIKASI IT XHTML & CSS MODUL 04
HTML LANJUT.
PERTEMUAN 2 HTML (Lanjutan).
Dasar Tag HTML Catatan:
Pertemuan 4 Khairul Anwar Hafizd
Konsep Dasar HTML SLIDE 1 Agung Brastama Putra.
HTML PEMROGRAMAN INTERNET.
HTML HyperText Markup Language
PENGANTAR HTML NEXT.
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.
Create By Widiyono, S.Kom
Table.
Zanial Mazalisa, S.Kom.,M.M
PJ : Nuraini Purwandari
Komputer aplikasi it-I (html)
Pengantar 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..
HTML Muhammad Yusuf Teknik Informatika – Universitas Trunojoyo
Pertemuan ke 3 Ahmadi Sistem Informasi STMIK “BINA NUSANTARA JAYA”
BAHAN AJAR KOMPUTER APLIKASI IT (HTML)
Pemrograman Berorientasi Platform (IN315B)
Komputer aplikasi it-I (html)
Pemrograman Web PG117 – 3 SKS.
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.
Pengantar HTML By : Muhammad Zen S. Hadi Digital Communication Laboratory EEPIS-ITS.
Table dengan tag html.
Enumerasi, Images & Table
Order dan Unorder List.
List dan Image pada HTML
HTML (Table, Form, Frame, Hyperlink)
Internet dan Web By : Lisda Juliana P..
Transcript presentasi:

Pembuatan Table Pada WEB Create By Widiyono

Tujuan : Menjelaskan Anatomi format tabel minimal dengan berbagai bentuk dalam dokumen web Mencontohkan pembuatan tabel dengan spaning Mencontohkan pembuatan tabel di dalam tabel Mencontohkan desain halamn web dengan konsep tabel Merumuskan Anatomi format tabel minimal dengan berbatai contoh dadalm dokumen web Mengembangkan pembuatan tabel dengan mengunakan perintah spaning Mengembangkan Pembuatan konsep tabel di dalam tabel Mengembangkan Pembuatan desain halaman wen menggunakan konsep tabel.

Pemanfaatan Tabel Tabel biasanya digunakan untuk menempatkan data secara spreadset, tapi untuk desain suatu web, selain untuk menempatkan data,  tabel digunakan untuk merapikan teks, ataupun gambar.

Tabel Sederhana Untuk membuat suatu tabel minimal diperlukan tiga elemen tabel. Tag TABLE digunakan sebagai awal pembuatan tabel, tag TR digunakan untuk mendifinisikan berapa banyak baris pada tabel, dan tag TD digunakan untuk menampung sel data dari tabel tersebut.

Adapun elemen-elemen yang digunakan untuk membuat suatu tabel adalah Kegunaan TABLE Tag utama. Digunakan untuk memberitahu browser “ini adalah tabel”, bersama dengan beberapa atribut seperti ukuran, lebar border dan beberapa hal lagi. Tag <TABLE>..<TABLE> TR Baris Tabel, yaitu baris-baris pada suatu tabel, yang dinyatakan dalam pasangan tag <TR>..</TR>  TD Data tabel, yaitu tempat dimana informasi/data dimasukkan dalam tabel. tabel data adalah colom dari suatu baris tabel. tabel data dinyatakan dengan tag <TD>..<TD>     TH Judul tabel, biasnya terletak di bagian paling atas atau paling kiri dari suatu tabel. Tabel header yang terletak di bagian atas adalah judul kolom tabel, sedang tabel header yan terletak di bagian kiri adalah judul baris tabel. Tag yang digunakan adalah <TH>…</TH> CAPTION Judul tabel yang terletak diluar tabel biasanya di bagian atas/bawah tabel. tag <CAPTION>..</CAPTION>

Tabel juga mempunyai bermacam-macam atribut yang dapat mempercantik bentuk tabel Nilai Keterangan Border Angka 0, 1 dst Digunakan untuk menentukan tebal garis batas tepi tabel Cellspacing Angka 1,2,3 dst Digunakan untuk menentukan jumlah spasi/celah diantara tiap-tiap sel Cellpadding Digunakan untuk menentukan jumlah spasi antara data dalam suatu sel width Pixel / persentase Digunakan untuk mengatur lebar tabel, dapat menggunakan ukuran piksel atau persentasi % Align Left, center.right Digunakan untuk perataan tabel secara horizontal Valign Middle, bottom, baseline Digunakan untuk perataan tabel secara vertikal bgcolor Warna/bil.hexadesimal Warna latar dari tabel atau pada sel Rowspan Menggabungkan beberapa baris tabel Colspan Menggabungkan beberapa kolom tabel

Anatomi Tabel <html> <head> <title>Judul Halaman WEB</title> </head> <body> <tabel> atau <tabel border=...> <tr> <td>..... <td>..... <td>.... </tr> </body> </html>

Contoh1 Contoh2 Contoh2 <table> <tr>     <td>Tabel sederhana Tanpa border</td>   </tr> </table> Contoh2 <table border=1> <tr> <td>Tabel sederhana dengan menggunakan border.</td> </tr> </table> Contoh2 <table border=6> <tr> <td>Tabel sederhana dengan menggunakan border=6.</td> </tr> </table>

<table border=5> <tr> Tabel Dua Dimensi Tabel biasanya tidak hanya terdiri dari dari 1 dimensi atau 1 kolom saja , tapi bisa 2, 3 atau sesuai dengan kebutuhan kita. Contoh berikut adalah pengembangan dari tabel diatas dengan dengan menambahkan 2 kolom lagi didalamnya. Contoh4 <table border=5> <tr> <td>Tabel Kolom Pertama </td>     <td>Tabel Kolom Kedua   </td>     <td>Tabel Kolom ketiga  </td> </tr> </table>

Judul Tabel Suatu tabel biasanya memiliki judul.  Judul pada tabel dibedakan menjadi tiga macam yaitu, judul tabel itu sendiri, judul kolom tabel, dan judul baris tabel. Contoh6 <html> <body> <table border=5>  <caption><b>Judul Tabel dengan Caption</b></caption>   <tr>     <td>Baris 1 Kolom 1 </td>     <td>Baris 1 Kolom 2 </td>     <td>Baris 1 Kolom 3 </td>   </tr>     <td>Baris 2 Kolom 1 </td>     <td>Baris 2 Kolom 2 </td>     <td>Baris 2 Kolom 3 </td> </table> </body> </html>

Contoh7 <html> <body> <table border=5>  <caption><b>Judul Tabel dengan Tabel Header</b></caption>   <tr>     <th>Baris 1 Kolom 1 </th>     <th>Baris 1 Kolom 2 </th>     <th>Baris 1 Kolom 3 </th>   </tr>     <td>Baris 2 Kolom 1 </th>     <td>Baris 2 Kolom 2 </td>     <td>Baris 2 Kolom 3 </td> </table> </body> </html>

Contoh8 Menggunakan Header <html> <body> <table border=5>   <caption><b>Jadwal  Dokter Jaga</b> </caption>   <tr>     <td></td>     <th>Senin</th>     <th>Selasa</th>   </tr>     <th>Pagi      </th>     <td>Dr Santi  </td>     <td>Dr Irawan </td>     <th>Siang     </th>     <td>Dr Andri  </td>     <td>Dr Dian   </td>     <th>Malam     </th>     <td>Dr Tati   </td>     <td>Dr Nana   </td> </table> </body> </html>

Contoh9 Perataan tabel dengan menggunakan perintah ALIGN dan VALIGN <html> <body> <table border=5>  <caption><h3>PERALATAN PADA TABEL</h3></caption>   <tr>     <td> </td>     <th><h3>KIRI</h3></th>     <th><h3>TENGAH</h3></th>     <th><h3>KANAN</h3></th>   </tr>     <th><h4>ATAS</h4></th> <td align="left" valign="top"> <img border="0" src="G1.JPG" width="40" height="40"></td> <td align="center" valign="top"> <img border="0" src="G2.JPG" width="40" height="40"></td> <td align="right" valign="top"> <img border="0" src="G3.JPG" width="40" height="40"></td>

<tr> <th><h4>TENGAH</h4></th> <td align="left" valign="middle"><img border="0" src="G4.JPG" width="40" height="40"></td> <td align="center" valign="middle"><img border="0" src="G1.JPG" width="40" height="40"></td> <td align="right" valign="middle"><img border="0" src="G3.JPG" width="40" height="40"></td>   </tr>   <tr>     <th><h4>BAWAH</h4></th> <td align="left" valign="bottom"><img border="0" src="G2.JPG" width="40" height="40"></td> <td align="center" valign="bottom"><img border="0" src="G1.JPG" width="40" height="40"></td> <td align="right" valign="bottom"><img border="0" src="G4.JPG" width="40" height="40"></td> </table> </body> <html>

Contoh10 Penggunaan Width Pada tabel <table border=1 width=”70%”>  <caption align=”bottom”> <h3>Tabel Dengan Width 70%</h3>  </caption>   <tr>     <td width=”50%”>width 50%</td>   </tr>     <td>Lebar sel 50% dari lebar tabel</td> </table> <table border=1 width=”100%”>  <caption align=”bottom”> <h3>Tabel Dengan Width 100%</h3>     <td width=”30%”>width 30%</td>     <td width=”70%”>width 70%</td>     <td>Lebar sel 30% dari lebar tabel</td>     <td>Lebar sel 70% dari lebar tabel</td>

Contoh11 Penggunaan warna Pada tabel <center> <table border=1 width="40%" bordercolorlight="red" bordercolordark = "yellow"> <caption><h3> Warna Pada Tabel</h3> </caption> <tr bgcolor="yellow"> <td align="center"><h3><font color="white">Warna Kuning</td> <td align="center"><h3><font color="white">Warna Kuning</td></font> </tr> <tr> <td align="center" bgcolor="red"><h3>Warna merah</td> <td align="center" bgcolor="green"><h3>Warna hijau</td> </table> </center>

Contoh12 Menggunakan perintah cellpadding dan celspacing <table border=5 cellpadding=10 cellspacing=15 align=”center”> <tr> <td>Hallo</td> </tr> </table>

Contoh13 Menggunakan Colspan <html> <body> <table border=1 width=”50%”> <tr> <td align=”center”>Data1</td> <td colspan=2 align=”center”>Data 2</td> </tr> <td align=”center”>Data 1</td> <td align=”center”>Data2a</td> <td align=”center”>Data2b</td> </table> </body> </html>

Contoh14 Menggunakan Rowspan <hrml> <body> <table border=1 width=”50%”> <tr> <td rowspan=2 align=”center”>Data1</td> <td align=”center”>Data 2</td> <td align=”center”>Data 3</td> <td align=”center”>Data 4</td> </tr> </table> </body> </html>

Contoh15 Menggunakan Colspan dan Rowspan </html> </body> <table border=1 width=”50%”> <tr> <th rowspan=2 colspan=2></th> <th colspan=2>COLSPAN</th> </tr> <th>Kolom 1</th> <th>Kolom 2</th> <th rowspan=2>ROWSPAN</th> <th>Baris 1</th> <td align=”center”>1,1</td> <td align=”center”>1,2</td> </table>

Tugas 1 Nama Usia Jamilah 17 Citra Lestari 20 Ahmad Dhani 45 Tugas 2 Nama Usia Jamilah 17 Citra Lestari 20 Ahmad Dhani 45

Soal Evaluasi 1. Tuliskan 5 buah elemen-elemen tabel 2. Tuliskan 9 buah atribute-atribute tabel