Format table

pada web
HERI ANGGARA, S.KOM
 Format Table Web

FORMAT TABLE HTML TABLE DENGAN DESAIN WEB KONSEP

BERBAGAI BENTUK TABLE
Forma Table HTML

Table Atribut Table

Table merupakan cara untuk menampilkan
informasi dalam halaman web dengan
bentuk kolom dan baris.
Membuat Tabel
Terdapat tiga tag atau elemen utama yang
digunakan dalam pembuatan
table, yaitu: <TABLE>, <TR>, dan <TD>. Yang
perlu diingat adalah bahwa
tag <TR> dan <TD> harus terletak di antara
tag <TABLE> dan </TABLE> .
<th> adalah tag yang berfungsi untuk
membuat tag heading/judul
Table Digunakan untuk mendefinisikan
pembuatan tabel.
Memiliki attribut:
align - perataan: rata kiri (left), tengah
(center) atau kanan (right).
valign – mengatur bentuk perataan secara
vertikal
bgcolor – mengatur warna latar belakang
(background) dari tabel.
background – menentukan gambar yang
digunakan sebagai
background tabel
color – Untuk mengatur warna suatu sel
dalam tabel
Forma Table HTML

Atribut Table Atribut Table

border – menentukan ukuran border <TR>
tabel (dalam pixel).
Tag ini digunakan untuk membuat baris
rowspan – menggabungkan baru (pada tabel). Terdiri dari
beberapa baris
atribut:
colspan – menggabungkan
beberapa kolom align - perataan: rata kiri (left),
tengah (center) atau kanan (right).
cellpadding - jarak antara isi cell
dengan batas cell (dalam pixel). bgcolor - warna latar belakang dari
baris.
cellspacing – mengatur spasi/jarak
antar cell (dalam pixel). valign - perataan vertikal: top, middle
atau bottom.
width – menentukan lebar tabel
dalam pixel atau percent.
height – Menentukan tinggi tabel
Forma Table HTML

Atribut Table Atribut Table

<TD>
Tag ini digunakan untuk membuat kolom baru pada tabel. Attributnya
<table[properti]>
adalah:
align – untuk menentukan perataan kolom <tr>
background – untuk menentukan image yang digunakan sebagai <th>......</th>
latar
belakang dari kolom. <th>......</th>
bgcolor – untuk menentukan warna latar belakang
</tr>
colspan -
height – untuk mengatur ukuran tinggi cell dalam pixels. <tr>
nowrap – untuk membuat supaya isi dari kolom tetap berada pada <td>......</td>
satu baris.
<td>......</td>
rowspan
valign – untuk mengatur perataan vertikal: top, middle atau bottom. </tr>
width – untuk menentukan lebar kolom dalam pixel atau percen.
</table>
Forma Table HTML

Contoh Table A Tampak di browser

<table boder="1">
<tr>
<td>Baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>Baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
Tabel dengan Berbagai Bentuk
Table B Mengatur Jarak Sel dengan
Cellpadding
Tampak di browser
<table border="1" cellpadding="10">
<tr>
<td>Baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>Baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
Tabel dengan Berbagai Bentuk

Table C Warna pada Table Tampak di browser

<table border="1" cellpadding="10">
<tr>
<td bgcolor="yellow">Baris 1
kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr bgcolor="#00ff80">
<td>Baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
Tabel dengan Berbagai Bentuk
Gambaran rowspan dan
Menggabungkan Sel Tabel colspan
Atribut yang digunakan untuk
menggabungkan sel tabel adalah
rowspan dan colspan:
rowspan untuk menggbungkan baris;
colspan untuk mebggabungkan
kolom.
Atribut ini bisa kita berikan kepada
tag <td> atau <th>.
Tabel dengan Berbagai Bentuk
Contoh Roswpan dan Colspan
<tr>
<table border="1">
<td>Februari</td>
<tr>
<td>342 Kg</td>
<th rowspan="2" bgcolor="yellow">Bulan</th>
<td>423 Kg</td>
<th colspan="2" bgcolor="#00ff80">Hasil Panen</th>
</tr>
</tr>
<tr>
<tr>
<td>Maret</td>
<th>Padi</th>
<td>432 Kg</td>
<th>Kacang</th>
<td>124 Kg</td>
</tr>
</tr>
<tr>
<tr>
<td>Januari</td>
<td>April</td>
<td>500 Kg</td>
<td>453 Kg</td>
<td>231 Kg</td>
<td>523 Kg</td>
</tr>
</tr>
</table>
Contoh Gambar Rowspan dan
Colspan
Desain Web Konsep Tabel
Anatomi

Secara garis besar anatomi atau susunan dari suatu halaman web terdiri dari

containing block, Logo, navigation, content, white space dapat digambarkan
sebagai berikut
Keterangan Gambar
Containing block merupakan bagian dari halaman
web yang membungkus semua komponen halaman
web. Umumnya dibuat dengan
tag <body>, <div> atau <table>.
Logo. Identitas perusahaan, organisasi, pemilik situs.
Navigasi atau menu merupakan bagian penting dari
situs yang memudahkan pengunjung berpindah-
pindah halaman.
Content atau isi adalah segalanya, karena disinilah
sebagian besar informasi disajikan.
Footer merupakan bagian bawah dan berisi informasi
singkat pemilik situs (copyright) dan beberapa link.
whitespace merupakan area kosong yang membatasi
antar-komponen. Whitespace dapat juga diisi dengan
banner atau animasi.
Desain Web Konsep Tabel
Layout web
Layout situs merupakan tata letak elemen
halaman situs web.Layout situs yang baik akan
menjadikan halaman web web baik juga.
Desain layout suatu halaman web meliputi
penyusunan:
✓ - pembagian tempat pada halaman
✓ - pengaturan jarak sepasi
✓ - pengelompokan teks dan grafik
✓ - serta penekanan pada suatu bagian
tertentu
Model Layout Web
➢ Top Index digunakan untuk menampilkan link yang
banyak ke situs lain, seperti search engine.
➢ Bottom Index biasanya digunakan apabila isi dari
halaman banyak berhubungan dengan topik
tunggal.
➢ Left Index digunakan untuk layar dengan resolusi
yang lebar sehingga mudah dalam penyediaan
navigasi, tanpa menimbulkan kekacauan
penyajian pada halaman utama
➢ Layout Split merupakan model yang banyak
dipakai, karena terjaga keseimbangan dalam
halaman web
➢ Alternating Index digunakan untuk halaman yang
banyak menampilkan grafik, foto dan produk yang
disertai dengan teks berupa keterangan, harga,
jumlah, dan lain - lain.
•
Desain Web Konsep Tabel

Layout Top Index Layout Bottom Index

Desain Web Konsep Tabel

Layout Left Index Layout Split

Desain Web Konsep Tabel

Alternating Index
Tugas

1. Rangkum Materi Format Tabel pada halaman Web !

2. Buat 1 buah Tabel Siswa dengan Kolom Nis, Nama, Kelas, Jurusan dan 5 baris
(record)!
3. Pilih salah satu tema web berikut
a. Web Sekolah
b. Web Profile Perusahaan
c. Web Search Engine
Kemudian desain halaman web tersebut dengan menggunakan salah satu saja Model
layout Web!

Catatan :
Untuk tugas silahkan kerjakan saat di minta dikumpulkan wajib di kumpulkan.
Untuk informasi pengumpulan tugas diberitahukan langsung via Grup WA dan Google
Classroom