Tabel HTML

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

Tabel HTML

More Related Content

What's hot

Similar to Tabel HTML

Tabel HTML