FORMAT TABEL

HALAMAN WEB
SURYA R. LABETUBUN
APA YANG AKAN DIPELAJARI?

•Anatomi tabel Minimal

•Tabel dengan Spanning
•Tabel di dalam Tabel
•Desain Halaman Web dengan Konsep
Tabel
ANATOMI TABEL MINIMAL

Untuk membuat table yang

sederhana ada 3 elemen utama yaitu:
- Table
- Tr
- Td
Tag <table> adalah untuk membuat tabel
kemudian di ikuti dengan tag <tr> (table
rows) adalah untuk membuat baris pada
tabel kemudian tag <td> (table data)
adalah untuk membuat kolom pada tabel,
kolom-kolom hasil dari tr dan td ini
disebut dengan table cell yaitu sebagai
lokasi dimana kita memasukkan data-
data yang akan di tampilkan.
 Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2
kolom.
<table border="1">
<tr>
<td>Cell 1 - Baris 1 Kolom 1</td>
<td>Cell 2 - Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Cell 3 - Baris 2 Kolom 1</td>
<td>Cell 4 - Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Cell 5 - Baris 3 Kolom 1</td>
<td>Cell 6 - Baris 3 Kolom 2</td>
</tr>
</table>
 Mengatur LEBAR dan TINGGI
tabel
Berikut adalah contoh tabel dengan lebar
75% dari lebar dokumen dan lebar kolom
masing 50% dengan tinggi pada baris
pertama adalah 40px.
<table border="1" width="75%"
height=”80%”>
<tr>
<td width=”50%” height=”40px”>Baris 1
Kolom 1</td>
<td>Baris 1 Kolom 1</td>
</tr>
 <tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
Membuat background pada tabel
Untuk membuat background pada tabel
kita gunakan atribut style dengan properti
background.
<table bgcolor=”green"
width="75%" border="1">
<tr>
<td bgcolor=”red”
width=”50”>Header Kolom 1</td>
<td bgcolor=”red”>Header
Kolom 2</td>
</tr>
 <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 Spanning
Table Cell atau baris dan kolom dari tabel
tersebut dapat kita gabungkan sesuai
kebutuhan bentuk tabel yang diinginkan.

Untuk menggabungkan kolom dalam tabel

digunakan atribut colspan. Sedangkan untuk
menggabungkan baris dalam tabel digunakan
atribut rowspan.
COLSPAN
<table border="1" width="75%">
<tr>
<td colspan="2">Gabungan Kolom
1&amp;2 pada Baris 1</td>
</tr>
<tr>
<td width=”50%”>Baris 2 Kolom
1</td>
 <td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
ROWSPAN
<table border="1" width="75%">
<tr>
<td rowspan="2">Gabungan
Baris 1&amp;2 pada Kolom
1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
 Tabel di dalam Tabel
Tabel didalam tabel sebenarnya adalah
dua tabel atau lebih yang digabungkan
dalam satu tabel, contoh :
Tabel di atas menunjukan bahwa tabel yang berada
pada kolom 1 baris ke 2 adalah tabel yang berada
didalam tabel.
<table width="75%" border="1">
<tr><td>Header
1</td><td>Header 2</td></tr>
<tr><td>//Tempat Tabel Ke dua
<table bgcolor=”red"
width="75%" border="1"><tr>
<td>a</td><td>b</td><td> c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td> f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td> i</td>
</tr>
</table>
 <td> Pem Web </td>
</tr>
<tr>
<td>10</td>
<td>TKJ</td>
</tr>
</table>
 Desain Halaman Web dengan
Konsep Tabel

Penggunaan tabel sebagai layout merupakan

metode pembuatan layout yang paling awal.

Menggunakan elemen table sebagai layout

merupakan cara yang kurang tepat, sebab
table dibuat dengan tujuan untuk
menampilkan data tabular.
Tabel dengan ketentuan width = “800” dan
height=”500” dan border = “1”
 Tabel : Lebar=”800”
Header : tinggi =”200”
Content : lebar tabel
dibagi menjadi 3
 Tabel : Lebar=”800”
Header : tinggi =”200”
Sidebar : lebar=”200”
tinggi=”300”
Content 1 :
lebar=”600”
tinggi=”200”
Content 2 & 3 : lebar =
“300” tinggi=”100”