FORMAT TABEL HALAMAN WEB

Surya R. LabetubunSMK Kartika XX-1 Makassar

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 head <THEAD> yakni kepala tabel yang biasa disebut HEADER.- Table foor <TFOOT> yakni kaki tabel yang biasa disebut FOOTER- Table body section <TBODY elements> adalah bagian badan atau isi tabel

Tag <table> adalah untuk membuat tabel kemudian diikuti dengan tag <tr> yakni table rows, yang digunakan untuk membuat baris pada tabel. Kemudian dilanjutkan dengan tag <td> atau table data untuk membuat kolom pada tabel.

Kolom-kolom hasil dari <tr> dan <td> ini disebut dengan table cell, merupakan 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 tabelBerikut adalah contoh tabel dengan lebar 75% dari lebar dokumen dan lebar kolom masing 50%. 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

Untuk menggabungkan kolom dalam tabel digunakan

colspan. Sedangkan untuk

menggabungkan baris dalam tabel digunakan 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 di dalam tabel sebenarnya adalah dua tabel atau lebih yang digabungkan dalam satu tabel.

Tabel di atas, menunjukan bahwa tabel yang berada pada kolom 1 baris ke 2 adalah tabel yang berada di dalam 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”