P e m r o g r a m a n W e b / R e k a y a s a P e r a n g k a t L u n a k
Tabel HTML
S L I D E 2
Disusun Oleh
F a i s h a l R u s y d a n
17050974010
Someone who has a high passion
in learning whatever it is.
Love about perfect design and
challenges that must be passed to
achieve a goal.
S L I D E 3
Pengertian
Tabel HTML
Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data dalam
bentuk table pada HTML, digunakan Tag <table>.
Elemen table berisi property <tr> untuk menentukan baris (table row) yang didalamnya terdapat properti <td> untuk menampkan data
pada setiap sel table (table data).
S L I D E 4
Untuk mendifinisikan table heading atau judul tiap
kolom menggunakan tag <th> ….. </th>
S L I D E 5
Pada HTML
Struktur elemen table
S L I D E 6
01 Atribut Elemen Table
Width = panjang (lebar table, pixel atau persen)
Height = panjang (tinggi table, pixel atau persen)
Border = pixel (tebal garis tepi)
Cellspacing = pixel (spasi antar sel)
Cellpadding = pixel (spasi di dalam sel)
Align = [left|center|right] (perataan table)
Bgcolor = warna (warna latar belakang table)
02 Atribut Table Row
Align = [left|center|right] (perataan sebaris sel secara horizontal)
Valign = [top|middle|bottom] (perataaan sebaris sel secara
vertical)
Bgcolor = warna (warna latar belakang baris)
03 Atribut Table Data
Align = [left|center|right] (perataan horizontal)
Width = [top|middle|bottom] (perataan vertical)
Height = pixel (tinggi sel, pixel atau persen)
Bgcolor = warna (warna latar belakang sel)
S L I D E 7
Dengan Spaning
Tabel HTML
Ada kalanya kita membuat table dengan menggabungkan baris, ataupun kolom sesuai dengan apa yang sedang
dibutuhkan.
Table Atribut Datanya :
Rowspan = angka (baris yang di span oleh sel)
Colspan = angka (kolom yang di span oleh sel)
S L I D E 8
Gabungan Baris (Rowspan)
Contoh Bentuk Spaning Table
Benua Negara
ASIA
Arab Saudi
India
Indonesia
Singapura
Benua EROPA
Negara Belanda Italia Inggris Jerman
Gabungan Kolom (Colspan)
S L I D E 9
Struktur HTML
Contoh
S L I D E 1 0
Dapat kita lihat bahwa di kolom “Email account note” ada table berisi tentang catatan jenis email. Jadi ada tabel di dalam tabel atau istilahnya
“nested table” atau tabel bersarang. Dalam penulisan HTML “tabel bersarang” ini adalah dengan menuliskan HTML Tabel di dalam sebuah sel dari
tabel, letaknya adalah pada <td>….</td>
Teknik tabel bersarang adalah salah satu cara untuk menghasilkan layout tabel yang kompleks tanpa membuat tabel yang sangat kompleks.
Sehingga ketika harus membuat tabel yang kompleks, maka cara sederhananya adalah membuat tabel di dalam sebuah sel (<td></td>)
Membuat Table di Dalam Table
Tabel HTML
S L I D E 1 1
Struktur HTML
Contoh
S L I D E 1 2
Menyajikan Desain Halaman Web dengan Konsep Tabel
Tabel HTML
Secara garis besar anatomi atau susunan dari suatu halaman web terdiri dari containing block, Logo, navigation,
content, white space, footer.
S L I D E 1 3
Halaman Web
Komponen Desain
Containing Block
Bagian dari halaman web
yang membungkus semua
komponen halaman web.
Umumnya dibuat dengan tag
<body>, <div> atau <table>.
Logo
Identitas Perusahaan,
organisasi, pemilik situs.
Navigation
Merupakan bagian penting
dari situs yang memudahkan
pengunjung berpindah –
pindah halaman.
Content
Content atau isi adalah
segalanya, karena disinilah
sebagian besar informasi
disajikan.
Footer
Berisi informasi singkat pemilik
situs (conpyright) dan
beberapa link.
Whitespace
Merupakan area kosong yang
membatasi antar komponen.
S L I D E 1 4
Web Layout
Top Index
Digunakan untuk menampilkan link yang banyak ke situs lain, seperti search engine. Navigasi atau
daftar isi berada dibagian atas dari halaman web.
Banner / Iklan
Daftar Isi / Navigasi
Body / Content (Isi)
Informasi Tambahan / Lain - Lain
S L I D E 1 5
Web Layout
Contoh Top Index
S L I D E 1 6
Web Layout
Bottom Index
Digunakan apabila isi dari halaman banyak berhubungan dengan topik tunggal. Navigasi / daftar isi
berada dibagian bawah dari halaman web.
Banner / Judul
Body / Content (Isi)
Daftar Isi / Lain – Lain
S L I D E 1 7
Web Layout
Contoh Bottom Index
S L I D E 1 8
Web Layout
Left Index
Digunakan untuk layar dengan resolusi yang lebar sehingga mudah dalam penyediaan navigasi, tanpa
menimbulkan kekacauan penyajian pada halaman utama. Navigasi atau daftar isi berada dibagian kiri
dari halaman web.
Daftar
Banner / Judul
Body / Content (Isi)
Lain – Lain
S L I D E 1 9
Web Layout
Contoh Left Index
S L I D E 2 0
Web Layout
Split Index
Merupakan model yang banyak dipakai, karena terjaga keseimbangan dalam halaman web. Navigasi
atau daftar isi berada dibagian kanan dan kiri dari halaman web.
Daftar
Banner / Judul
Daftar
Body / Content (Isi)
Lain – Lain
S L I D E 2 1
Web Layout
Contoh Split Index
S L I D E 2 2
Web Layout
Alternating Index
Digunakan untuk halaman yang banyak menampilkan grafik, foto dan produk yang disertai dengan teks
berupa keterangan, harga, jumlah, dan lain - lain. Navigasi atau daftar isi berada dibagian kanan dan
kiri dari halaman web.
Text / Daftar Isi Gambar
Gambar Text / Daftar Isi
Lain – Lain
S L I D E 2 3
Web Layout
Contoh Alternating Index
S L I D E 2 4
Quotes
“It’s common sense to take a method and try it. If it fails, admit it
frankly and try another. But above it all, try something
”
-Franklin D. Roosevelt-
For The Attention
Thank You

Tabel HTML

  • 1.
    P e mr o g r a m a n W e b / R e k a y a s a P e r a n g k a t L u n a k Tabel HTML
  • 2.
    S L ID E 2 Disusun Oleh F a i s h a l R u s y d a n 17050974010 Someone who has a high passion in learning whatever it is. Love about perfect design and challenges that must be passed to achieve a goal.
  • 3.
    S L ID E 3 Pengertian Tabel HTML Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk table pada HTML, digunakan Tag <table>. Elemen table berisi property <tr> untuk menentukan baris (table row) yang didalamnya terdapat properti <td> untuk menampkan data pada setiap sel table (table data).
  • 4.
    S L ID E 4 Untuk mendifinisikan table heading atau judul tiap kolom menggunakan tag <th> ….. </th>
  • 5.
    S L ID E 5 Pada HTML Struktur elemen table
  • 6.
    S L ID E 6 01 Atribut Elemen Table Width = panjang (lebar table, pixel atau persen) Height = panjang (tinggi table, pixel atau persen) Border = pixel (tebal garis tepi) Cellspacing = pixel (spasi antar sel) Cellpadding = pixel (spasi di dalam sel) Align = [left|center|right] (perataan table) Bgcolor = warna (warna latar belakang table) 02 Atribut Table Row Align = [left|center|right] (perataan sebaris sel secara horizontal) Valign = [top|middle|bottom] (perataaan sebaris sel secara vertical) Bgcolor = warna (warna latar belakang baris) 03 Atribut Table Data Align = [left|center|right] (perataan horizontal) Width = [top|middle|bottom] (perataan vertical) Height = pixel (tinggi sel, pixel atau persen) Bgcolor = warna (warna latar belakang sel)
  • 7.
    S L ID E 7 Dengan Spaning Tabel HTML Ada kalanya kita membuat table dengan menggabungkan baris, ataupun kolom sesuai dengan apa yang sedang dibutuhkan. Table Atribut Datanya : Rowspan = angka (baris yang di span oleh sel) Colspan = angka (kolom yang di span oleh sel)
  • 8.
    S L ID E 8 Gabungan Baris (Rowspan) Contoh Bentuk Spaning Table Benua Negara ASIA Arab Saudi India Indonesia Singapura Benua EROPA Negara Belanda Italia Inggris Jerman Gabungan Kolom (Colspan)
  • 9.
    S L ID E 9 Struktur HTML Contoh
  • 10.
    S L ID E 1 0 Dapat kita lihat bahwa di kolom “Email account note” ada table berisi tentang catatan jenis email. Jadi ada tabel di dalam tabel atau istilahnya “nested table” atau tabel bersarang. Dalam penulisan HTML “tabel bersarang” ini adalah dengan menuliskan HTML Tabel di dalam sebuah sel dari tabel, letaknya adalah pada <td>….</td> Teknik tabel bersarang adalah salah satu cara untuk menghasilkan layout tabel yang kompleks tanpa membuat tabel yang sangat kompleks. Sehingga ketika harus membuat tabel yang kompleks, maka cara sederhananya adalah membuat tabel di dalam sebuah sel (<td></td>) Membuat Table di Dalam Table Tabel HTML
  • 11.
    S L ID E 1 1 Struktur HTML Contoh
  • 12.
    S L ID E 1 2 Menyajikan Desain Halaman Web dengan Konsep Tabel Tabel HTML Secara garis besar anatomi atau susunan dari suatu halaman web terdiri dari containing block, Logo, navigation, content, white space, footer.
  • 13.
    S L ID E 1 3 Halaman Web Komponen Desain Containing Block Bagian dari halaman web yang membungkus semua komponen halaman web. Umumnya dibuat dengan tag <body>, <div> atau <table>. Logo Identitas Perusahaan, organisasi, pemilik situs. Navigation Merupakan bagian penting dari situs yang memudahkan pengunjung berpindah – pindah halaman. Content Content atau isi adalah segalanya, karena disinilah sebagian besar informasi disajikan. Footer Berisi informasi singkat pemilik situs (conpyright) dan beberapa link. Whitespace Merupakan area kosong yang membatasi antar komponen.
  • 14.
    S L ID E 1 4 Web Layout Top Index Digunakan untuk menampilkan link yang banyak ke situs lain, seperti search engine. Navigasi atau daftar isi berada dibagian atas dari halaman web. Banner / Iklan Daftar Isi / Navigasi Body / Content (Isi) Informasi Tambahan / Lain - Lain
  • 15.
    S L ID E 1 5 Web Layout Contoh Top Index
  • 16.
    S L ID E 1 6 Web Layout Bottom Index Digunakan apabila isi dari halaman banyak berhubungan dengan topik tunggal. Navigasi / daftar isi berada dibagian bawah dari halaman web. Banner / Judul Body / Content (Isi) Daftar Isi / Lain – Lain
  • 17.
    S L ID E 1 7 Web Layout Contoh Bottom Index
  • 18.
    S L ID E 1 8 Web Layout Left Index Digunakan untuk layar dengan resolusi yang lebar sehingga mudah dalam penyediaan navigasi, tanpa menimbulkan kekacauan penyajian pada halaman utama. Navigasi atau daftar isi berada dibagian kiri dari halaman web. Daftar Banner / Judul Body / Content (Isi) Lain – Lain
  • 19.
    S L ID E 1 9 Web Layout Contoh Left Index
  • 20.
    S L ID E 2 0 Web Layout Split Index Merupakan model yang banyak dipakai, karena terjaga keseimbangan dalam halaman web. Navigasi atau daftar isi berada dibagian kanan dan kiri dari halaman web. Daftar Banner / Judul Daftar Body / Content (Isi) Lain – Lain
  • 21.
    S L ID E 2 1 Web Layout Contoh Split Index
  • 22.
    S L ID E 2 2 Web Layout Alternating Index Digunakan untuk halaman yang banyak menampilkan grafik, foto dan produk yang disertai dengan teks berupa keterangan, harga, jumlah, dan lain - lain. Navigasi atau daftar isi berada dibagian kanan dan kiri dari halaman web. Text / Daftar Isi Gambar Gambar Text / Daftar Isi Lain – Lain
  • 23.
    S L ID E 2 3 Web Layout Contoh Alternating Index
  • 24.
    S L ID E 2 4 Quotes “It’s common sense to take a method and try it. If it fails, admit it frankly and try another. But above it all, try something ” -Franklin D. Roosevelt-
  • 25.