Download - Format Tabel Halaman Web
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&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&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”