1 Pengenalan Web STMIK AKAKOM YOGYAKARTA2 Fungsi : Menampilkan data secara tabular (misal : untuk statistik, scientific) Mengatur Layout Bentuk dasar ...
◦ Menampilkan data secara tabular (misal : untuk statistik, scientific) ◦ Mengatur Layout
Bentuk dasar :
2
Rows (baris) Columns (kolom) Jika dibuat Detail maka berisi: ◦ ◦ ◦ ◦ ◦
Header Cell Body Cell Caption Header Row Footer Row
3
Definisi Tabel :
◦
……
Pembentuk Baris (table rows) ◦
……
Pembentuk Kolom (table data) ◦
……
4
Baris Satu Kolom Satu
Baris Satu Kolom Dua
Baris Dua Kolom Satu
Baris Dua Kolom Dua
5
Untuk Memberi judul tabel
◦
……
◦ Default lokasi ada di atas tabel ◦ Untuk merubah lokasi ditambahkan atribut align
….
◦ Pilihan untuk align : top, bottom, left,right,center
Untuk membuat header tabel (tulisan yang terletak di baris paling atas) ◦ ……
6
Untuk Membuat footer tabel (tulisan yang terletak di baris paling bawah) ◦ ……
Untuk membuat header cell (terletak di tiap kolom pada baris paling atas)
◦
……
◦ Mirip dengan
……
hanya saja kalau
akan otomatis membuat tulisan menjadi tebal dan center
Pengelompokan body / isi tabel ◦
……
7
Judul Tabel
Header Tabel
Footer Tabel
Header Satu
Header Dua
Isi Body Cell Satu
Isi Body Cell Dua
8
Untuk memberikan garis pada tabel dapat dilakukan dengan menambahkan atribut border pada tag
Border bisa dilengkapi attribut frame dengan daftar pilihan :
9
TABEL DENGAN BORDER=1
Nama Mahasiswa
Alamat
Totok
Jalan Berbatu 10 Yogyakarta
Titik
Jalan Hati-Hati 5 Klaten
10
Tabel dengan BORDER=10
Nama Mahasiswa
Alamat
Totok
Jalan Berbatu 10 Yogyakarta
Titik
Jalan Hati-Hati 5 Klaten
11
12
Tanpa ada pengaturan, maka tabel dan / atau kolom akan melebar mengikuti isi kolom yang terpanjang Pengaturan lebar tabel
◦ bisa dilakukan pada tabel
atau kolom
◦ Bisa menggunakan satuan pixel
atau menggunakan prosentase
◦ Satuan prosen bersifat relatif terhadap container yang ditempati, misal ◦
berarti lebar tabel 80% dari lebar browser ◦
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
hanya berefek pada 1 kolom
◦ Vertical align
Attribut : valign, Pilihan : top, middle, bottom
Pengaturan tinggi
◦ Menggunakan attribut height ◦ Dilakukan terhadap tabel
◦ Dilakukan terhadap baris
14
Nama Barang
Stok
Baju
120
Pensil
30
15
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
16
SATU
DUA
TIGA
EMPAT
CELLSPACING
CELLPADDING
17
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
18
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
Baris Satu Kolom Satu
Baris Satu Kolom Dua
Baris Satu Kolom Tiga
Baris Dua Kolom Satu
Baris 2 Kolom Dua penggabungan Kolom Dua dan Tiga
Baris Tiga Kolom Satu
Baris Tiga Kolom Dua
Baris Tiga Kolom Tiga
20
Pada bagian yang bercetak tebal merupakan kolom penggabungan kolom 2 dan 3
21
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
Baris 1 Kolom Satu
Baris 1 Kolom Dua
Baris 2 Kolom Satu Penggabungan baris 2 dan 3
Baris 2 Kolom Dua
Baris 3 Langsung Kolom 2
Baris 4 Kolom Satu
Baris 4 Kolom Dua
23
Pada baris 3, hanya dibuat satu buah
yang langsung masuk ke kolom dua, karena baris 3 kolom satu sudah digabung dengan baris 2 kolom satu.
24
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 : ◦ ◦ ◦ ◦
Tabel diatur kuning
Baris 1 diatur cyan
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
