Pengenalan Web STMIK AKAKOM YOGYAKARTA

Ukuran: px

Mulai penontonan dengan halaman:

Download "Pengenalan Web STMIK AKAKOM YOGYAKARTA"

Hartanti Liani Sudjarwadi
7 tahun lalu
Tontonan:

1 Pengenalan Web STMIK AKAKOM YOGYAKARTA

2 Fungsi : Menampilkan data secara tabular (misal : untuk statistik, scientific) Mengatur Layout Bentuk dasar : 2

3 Rows (baris) Columns (kolom) Jika dibuat Detail maka berisi: Header Cell Body Cell Caption Header Row Footer Row 3

4 Definisi Tabel : <table> </table> Pembentuk Baris (table rows) Pembentuk Kolom (table data) <td> </td> 4

5 <body> <table border="1"> <td>baris Satu Kolom Satu</td> <td>baris Satu Kolom Dua</td> <td>baris Dua Kolom Satu</td> <td>baris Dua Kolom Dua</td> </table> </body> 5

6 Untuk Memberi judul tabel <caption> </caption> Default lokasi ada di atas tabel Untuk merubah lokasi ditambahkan atribut align <caption align= bottom >. </caption> Pilihan untuk align : top, bottom, left,right,center Untuk membuat header tabel (tulisan yang terletak di baris paling atas) <thead> </thead> 6

7 Untuk Membuat footer tabel (tulisan yang terletak di baris paling bawah) <tfoot> </tfoot> Untuk membuat header cell (terletak di tiap kolom pada baris paling atas) <th> </th> Mirip dengan <td> </td> hanya saja kalau <th> akan otomatis membuat tulisan menjadi tebal dan center Pengelompokan body / isi tabel <tbody> </tbody> 7

8 <body> <table border="1"> <caption align="bottom">judul Tabel</caption> <thead align="right"><td>header Tabel</td></thead> <tfoot align="center"><td>footer Tabel</td></tfoot> <tbody> <th>header Satu</th> <th>header Dua</th> <td>isi Body Cell Satu</td> <td>isi Body Cell Dua</td> </tbody> </table> </body> 8

9 Untuk memberikan garis pada tabel dapat dilakukan dengan menambahkan atribut border pada tag <table> Border bisa dilengkapi attribut frame dengan daftar pilihan : 9

10 TABEL DENGAN BORDER=1 <table border=1> <th>nama Mahasiswa</th> <th>alamat</th> <td>totok</td> <td>jalan Berbatu 10 Yogyakarta</td> <td>titik</td> <td>jalan Hati-Hati 5 Klaten</td> </table> 10

11 <br/> Tabel dengan BORDER=10 <table border=10> <th>nama Mahasiswa</th> <th>alamat</th> <td>totok</td> <td>jalan Berbatu 10 Yogyakarta</td> <td>titik</td> <td>jalan Hati-Hati 5 Klaten</td> </table> 11

12 12

13 Tanpa ada pengaturan, maka tabel dan / atau kolom akan melebar mengikuti isi kolom yang terpanjang Pengaturan lebar tabel bisa dilakukan pada tabel <table> atau kolom <td> Bisa menggunakan satuan pixel <table width= 400px > atau menggunakan prosentase <table width= 80% > Satuan prosen bersifat relatif terhadap container yang ditempati, misal <table with= 80% > berarti lebar tabel 80% dari lebar browser <td width= 80% > berarti lebar kolom 80% dari lebar tabel 13

Terdapat 2 macam perataan: Horizontal align attribut: align, Pilihan : left, right, center Pada mengakibatkan efek di semua kolom Pada <td> hanya berefek pada 1 kolom Vertical align

14 Terdapat 2 macam perataan: Horizontal align attribut: align, Pilihan : left, right, center Pada mengakibatkan efek di semua kolom Pada <td> hanya berefek pada 1 kolom Vertical align Attribut : valign, Pilihan : top, middle, bottom Pengaturan tinggi Menggunakan attribut height Dilakukan terhadap tabel <table height= 50% > Dilakukan terhadap baris <tr height= 200px > 14

15 <table border="1" width="400px"> <tr height="50"> <th valign="top">nama Barang</th> <th valign="bottom" width="20%">stok</th> <td>baju</td> <td align="right">120</td> <td>pensil</td> <td align="right">30</td> </table> 15

16 Pengaturan jarak dalam tabel ada 2 macam: Jarak antar cell, atau antara cell dengan tepi luar tabel disebut cellspacing Jarak antara Isi Cell dengan tepi dalam tiap Cell, disebut cellpadding Atribut cellpadding dan cellspacing diletakkan di tag <table> 16

17 <table border=1 cellpadding=20 cellspacing=35> <td>satu</td> <td>dua</td> <td>tiga</td> <td>empat</td> CELLSPACING </table> CELLPADDING 17

18 Terdapat dua macam penggabungan Cell, yaitu penggabungan kolom dan penggabungan baris. Penggabungan kolom dapat dilakukan dengan atribut colspan, sedangkan penggabungan baris dapat dilakukan dengan dengan atribut rowspan. Kedua atribut tersebut diletakkan di tag <td> 18

19 Misalnya ingin dilakukan penggabungan 3 kolom. Contoh : terdapat tabel yang mempunyai 3 baris. Baris pertama 3 kolom, baris kedua 2 kolom (terdapat penggabungan kolom), baris ketiga kembali 3 kolom. 19

20 <table BORDER=1> <td>baris Satu Kolom Satu</td> <td>baris Satu Kolom Dua</td> <td>baris Satu Kolom Tiga</td> <td>baris Dua Kolom Satu</td> <td colspan=2><b>baris 2 Kolom Dua penggabungan Kolom Dua dan Tiga</b></td> <td>baris Tiga Kolom Satu</td> <td>baris Tiga Kolom Dua</td> <td>baris Tiga Kolom Tiga</td> </table> 20

21 Pada bagian yang bercetak tebal merupakan kolom penggabungan kolom 2 dan 3 21

22 Misalnya ingin dilakukan pengabungan 2 baris. Contoh : Terdapat tabel yang memiliki 4 baris 2 kolom, tetapi diinginkan untuk baris 2 dan 3 dilakukan penggabungan pada kolom 1. 22

23 <table border=1> <td>baris 1 Kolom Satu</td> <td>baris 1 Kolom Dua</td> <td rowspan=2><b>baris 2 Kolom Satu Penggabungan baris 2 dan 3</b></td> <td>baris 2 Kolom Dua</td> <td>baris 3 Langsung Kolom 2</td> <td>baris 4 Kolom Satu</td> <td>baris 4 Kolom Dua</td> </table> 23

24 Pada baris 3, hanya dibuat satu buah <td> yang langsung masuk ke kolom dua, karena baris 3 kolom satu sudah digabung dengan baris 2 kolom satu. 24

25 Untuk Pengaturan warna digunakan style yang diletakkan pada tag yang akan diatur warnanya Efek pengaturan untuk warna berdasar hirarki object container, yang akan digunakan adalah aturan pada bagian terdalam Misal : <table> Tabel diatur kuning Baris 1 diatur cyan <td> baris 1kolom 2 diatur hijau Maka yang pada baris 1 kolom 2 berwarna hijau, baris 1 kolom yang lain (selain 2) berwarna cyan, baris yang lain (selain baris 1) berwarna kuning 25

26 <table border="1" style="background-color:yellow;"> <th>nama Barang</th> <th>stok</th> <tr style="background-color:cyan"> <td>pensil</td> <td style="background-color:green">120</td> <td>indomie Rasa Ayam Goreng</td> <td>30</td> </table> 26

27 27

dokumen-dokumen yang mirip

KOMPUTER APLIKASI IT (Information Technology)

KOMPUTER APLIKASI IT (Information Technology) 2 SKS Semester 1 S1 Sistem Informasi Nizar Rabbi Radliya nizar.radliya@yahoo.com Pertemuan 5 Universitas Komputer Indonesia 2014 Tabel pada HTML Tabel pada