TABEL

1
TABEL

• Pengenalan Web
• STMIK AKAKOM YOGYAKARTA

2
Tabel

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

3
Pembentuk Tabel

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

4
Tag utama pembentuk tabel

• Definisi Tabel
• lttablegt lt/tablegt
• Pembentuk Baris (table rows)
• lttrgt lt/trgt
• Pembentuk Kolom (table data)
• lttdgt lt/tdgt

5
Tabel sederhana 1

• lthtmlgt
• ltbodygt
• lttable border"1"gt
• lttrgt
• lttdgtBaris Satu Kolom Satult/tdgt
• lt/trgt
• lt/tablegt
• lt/bodygt
• lt/htmlgt

6
Tabel Sederhana 2

• ltbodygt
• lttable border"1"gt
• lttrgt
• lttdgtBaris Satu Kolom Satult/tdgt
• lttdgtBaris Satu Kolom Dualt/tdgt
• lt/trgt
• lttrgt
• lttdgtBaris Dua Kolom Satult/tdgt
• lttdgtBaris Dua Kolom Dualt/tdgt
• lt/trgt
• lt/tablegt
• lt/bodygt

7
Border

• Untuk memberikan garis pada tabel dapat dilakukan
  dengan menambahkan atribut border pada tag
  lttablegt
• Border bisa dilengkapi attribut frame dengan
  daftar pilihan

8
Contoh

• TABEL DENGAN BORDER1
• lttable border1gt
• lttrgt
• lttdgtNama Mahasiswalt/tdgt
• lttdgtAlamatlt/tdgt
• lt/trgt
• lttrgt
• lttdgtTotoklt/tdgt
• lttdgtJalan Berbatu 10 Yogyakartalt/tdgt
• lt/trgt
• lttrgt
• lttdgtTitiklt/tdgt
• lttdgtJalan Hati-Hati 5 Klatenlt/tdgt
• lt/trgt
• lt/tablegt

9
Contoh (lanjutan)

• ltbr/gt
• Tabel dengan BORDER10
• lttable border10gt
• lttrgt
• lttdgtNama Mahasiswalt/tdgt
• lttdgtAlamatlt/tdgt
• lt/trgt
• lttrgt
• lttdgtTotoklt/tdgt
• lttdgtJalan Berbatu 10 Yogyakartalt/tdgt
• lt/trgt
• lttrgt
• lttdgtTitiklt/tdgt
• lttdgtJalan Hati-Hati 5 Klatenlt/tdgt
• lt/trgt
• lt/tablegt

10
Hasil
11
Tag kelengkapan yang lain

• Memberi judul tabel
• ltcaptiongt lt/captiongt
• Default lokasi ada di atas tabel
• Untuk merubah lokasi ditambahkan atribut align
• ltcaption alignbottomgt . lt/captiongt
• Pilihan untuk align top, bottom, left,
  right,center

12
Contoh

• lthtmlgt
• ltheadgtlttitlegtJudul dibawah tabellt/titlegtlt/headgt
• ltbodygt
• lttable border "1"gt
• ltcaption align"bottom"gtDaftar Mahasiswalt/captiongt
  
• lttrgtlttdgtNamalt/tdgtlttdgtJurusanlt/tdgtlt/trgt
• lttrgtlttdgtSiska Handayanilt/tdgtlttdgtTIlt/tdgtlt/trgt
• lttrgtlttdgtAni Kusumadewilt/tdgtlttdgtMIlt/tdgtlt/trgt
• lt/tablegt
• lt/bodygt
• lt/htmlgt

13
Tag kelengkapan yang lain

• Membuat header tabel
• tulisan yang terletak di baris paling atas
• lttheadgt lt/theadgt
• Membuat footer tabel (tulisan yang terletak di
  baris paling bawah)
• lttfootgt lt/tfootgt

14
Tag kelengkapan (lanjutan)

• Membuat header cell (terletak di tiap kolom pada
  baris paling atas)
• ltthgt lt/thgt
• Mirip dengan lttdgt lt/tdgt hanya saja kalau ltthgt
  akan otomatis membuat tulisan menjadi tebal dan
  center
• Pengelompokan body / isi tabel
• lttbodygt lt/tbodygt

15
Horisontal heading

• lthtmlgt
• ltbodygt
• lth4gtTable headerslt/h4gt
• lttable border"1"gt
• lttrgt
• ltthgtNamalt/thgt
• ltthgtTeleponlt/thgt
• lt/trgt
• lttrgt
• lttdgtAndilt/tdgt
• lttdgt085666666111lt/tdgt
• lt/trgt
• lt/tablegt
• lt/bodygt
• lt/htmlgt

16
Vertical heading

• lthtmlgt
• ltbodygt
• lth4gtVertical headerslt/h4gt
• lttable border"1"gt
• lttrgt
• ltthgtNamalt/thgt
• lttdgtAndilt/tdgt
• lt/trgt
• lttrgt
• ltthgtTeleponlt/thgt
• lttdgt085666666111lt/tdgt
• lt/trgt
• lt/tablegt
• lt/bodygt
• lt/htmlgt

17
Contoh

• ltbodygt
• lttable border"1"gt
• ltcaption align"bottom"gtJudul Tabellt/captiongt
• ltthead align"right"gtlttrgtlttdgtHeader
  Tabellt/tdgtlt/trgtlt/theadgt
• lttfoot align"center"gtlttrgtlttdgtFooter
  Tabellt/tdgtlt/trgtlt/tfootgt
• lttbodygt
• lttrgt
• ltthgtHeader Satult/thgt
• ltthgtHeader Dualt/thgt
• lt/trgt
• lttrgt
• lttdgtIsi Body Cell Satult/tdgt
• lttdgtIsi Body Cell Dualt/tdgt
• lt/trgt
• lt/tbodygt
• lt/tablegt
• lt/bodygt

18
Attribut Width (lebar)

• Tanpa ada pengaturan, maka tabel dan / atau kolom
  akan melebar mengikuti isi kolom yang terpanjang
• Pengaturan lebar tabel
• bisa dilakukan pada tabel lttablegt atau kolom lttdgt
• Bisa menggunakan satuan pixel lttable
  width400pxgt atau menggunakan prosen lttable
  width80gt
• Satuan prosen bersifat relatif terhadap container
  yang ditempati, misal
• lttable with80gt berarti lebar tabel 80 dari
  lebar browser
• lttd width80gt berarti lebar kolom 80 dari
  lebar tabel

19
Attribut Height dan Alignment / perataan

• Terdapat 2 macam perataan
• Horizontal align
• attribut align, Pilihan left, right dan center
• Pada lttrgt mengakibatkan efek di semua kolom
• Pada lttdgt hanya berefek pada 1 kolom
• Vertical align
• Attribut valign, Pilihan top, middle, bottom
• Pengaturan tinggi
• Menggunakan attribut height
• Dilakukan terhadap tabel lttable height50gt
• Dilakukan terhadap baris lttr height200pxgt

20
Contoh

• lttable border"1" width"400px"gt
• lttr height"50"gt
• ltth valign"top"gtNama Baranglt/thgt
• ltth valign"bottom" width"20"gtStoklt/thgt
• lt/trgt
• lttrgt
• lttdgtBajult/tdgt
• lttd align"right"gt120lt/tdgt
• lt/trgt
• lttrgt
• lttdgtPensillt/tdgt
• lttd align"right"gt30lt/tdgt
• lt/trgt
• lt/tablegt

21
Attribut CellSpacing dan CellPadding

• 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 lttablegt

22
Contoh

• lttable border1 cellpadding20 cellspacing35gt
• lttrgt
• lttdgtSATUlt/tdgt
• lttdgtDUAlt/tdgt
• lt/trgt
• lttrgt
• lttdgtTIGAlt/tdgt
• lttdgtEMPATlt/tdgt
• lt/trgt
• lt/tablegt

23
Penggabungan Cell

• 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 lttdgt

24
colspan

• 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.

25
Script

• lttable BORDER1gt
• lttrgt
• lttdgtBaris Satu Kolom Satult/tdgt
• lttdgtBaris Satu Kolom Dualt/tdgt
• lttdgtBaris Satu Kolom Tigalt/tdgt
• lt/trgt
• lttrgt
• lttdgtBaris Dua Kolom Satult/tdgt
• lttd colspan2gtltbgtBaris 2 Kolom Dua
  penggabungan Kolom Dua dan Tigalt/bgtlt/tdgt
• lt/trgt
• lttrgt
• lttdgtBaris Tiga Kolom Satult/tdgt
• lttdgtBaris Tiga Kolom Dualt/tdgt
• lttdgtBaris Tiga Kolom Tigalt/tdgt
• lt/trgt
• lt/tablegt

26
Hasil

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

27
rowspan

• 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.

28
Script

• lttable border1gt
• lttrgt
• lttdgtBaris 1 Kolom Satult/tdgt
• lttdgtBaris 1 Kolom Dualt/tdgt
• lt/trgt
• lttrgt
• lttd rowspan2gtltbgtBaris 2 Kolom Satu
  Penggabungan baris 2 dan 3lt/bgtlt/tdgt
• lttdgtBaris 2 Kolom Dualt/tdgt
• lt/trgt
• lttrgt
• lttdgtBaris 3 Langsung Kolom 2lt/tdgt
• lt/trgt
• lttrgt
• lttdgtBaris 4 Kolom Satult/tdgt
• lttdgtBaris 4 Kolom Dualt/tdgt
• lt/trgt
• lt/tablegt

29
Hasil

• Pada baris 3, hanya dibuat satu buah lttdgt yang
  langsung masuk ke kolom dua, karena baris 3 kolom
  satu sudah digabung dengan baris 2 kolom satu.

30
Warna

• 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
• lttablegt Tabel diatur kuning
• lttrgt Baris 1 diatur cyan
• lttdgt 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

31
Contoh

• lttable border"1" style"background-coloryellow"
  gt
• lttrgt
• ltthgtNama Baranglt/thgt
• ltthgtStoklt/thgt
• lt/trgt
• lttr style"background-colorcyan"gt
• lttdgtPensillt/tdgt
• lttd style"background-colorgreen"gt120lt/tdgt
• lt/trgt
• lttrgt
• lttdgtIndomie Rasa Ayam Gorenglt/tdgt
• lttdgt30lt/tdgt
• lt/trgt
• lt/tablegt

32
Contoh

• lttable border"1" bgcolor"red"gt
• lttrgt
• ltthgtNama Baranglt/thgt
• ltthgtStoklt/thgt
• lt/trgt
• lttr bgcolor"aqua"gt
• lttdgtPensillt/tdgt
• lttd bgcolor"blue"gt
• ltfont color"white"gt
• 120
• lt/fontgt
• lt/tdgt
• lt/trgt
• lttrgt
• lttdgtBolpoinlt/tdgt
• lttdgt30lt/tdgt
• lt/trgt
• lt/tablegt

33
Contoh

• lttable border"1"gt
• lttrgt
• ltthgtgambarlt/thgt
• ltthgtnama gambarlt/thgt
• lt/trgt
• lttrgt
• lttdgt
• ltimg src"a.jpg" width"100"/gt
• lt/tdgt
• lttdgtburung birult/tdgt
• lt/trgt
• lt/tablegt

34

• Selesai