HTML (Hypertext Markup Language)

Oleh: Timoti Adri Mahendra Putra, S.KomOleh: Timoti Adri Mahendra Putra, S.Kom

SMK WIRA HARAPANSMK WIRA HARAPAN

Tabel seperti yang kita tahu terdiri dari Tabel seperti yang kita tahu terdiri dari kolom dan baris. kolom dan baris.

Pada tabel data-data dimasukkan dalam Pada tabel data-data dimasukkan dalam kombinasi antara kolom dan baris kombinasi antara kolom dan baris tertentu.tertentu.

Beberapa baris dan kolom dari tabel Beberapa baris dan kolom dari tabel bisa digabungkan untuk membuat bisa digabungkan untuk membuat tampilan yang sesuai dengan kebutuhan tampilan yang sesuai dengan kebutuhan data kita.data kita.

Pada html semua itu dapat dilakukan, Pada html semua itu dapat dilakukan, namun tentunya kita harus namun tentunya kita harus mengetahui terlebih dahulu bahan-mengetahui terlebih dahulu bahan-bahan apa saja yang diperlukan untuk bahan apa saja yang diperlukan untuk meracik sebuah tabel.meracik sebuah tabel.

Untuk meracik sebuah tabel kita akan Untuk meracik sebuah tabel kita akan membutuhkan bahan-bahan sebagai membutuhkan bahan-bahan sebagai berikut, berikut, <table><table>, , <tr><tr>,, dan dan <td><td>

<table BORDER=“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 didefinisikan atau diapit oleh tag <table>

<tr> kepanjangan dari Table Row digunakan untuk membuat suatu baris baru.

<td> kepanjangan dari Table Data digunakan untuk membuat kolom/data.

Supaya gampang mengingatnya, ingat saja huruf belakangnya,

tr --> r = row,td --> d = data.

<table border="1"> <tr>

<td colspan="2">Ini adalah kolom yang digab

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

Perhatikan bagian "Ini adalah kolom Perhatikan bagian "Ini adalah kolom yang digabungkan", sebelumnya terlihat yang digabungkan", sebelumnya terlihat perintahperintah

<td colspan="2"> <td colspan="2"> Ini adalah contoh penggunaan colspan. Ini adalah contoh penggunaan colspan. ColspanColspan memerintahkan agar beberapa memerintahkan agar beberapa

kolom digabungkan tergantung dari kolom digabungkan tergantung dari nilai yang dituliskan. nilai yang dituliskan.

Pada contoh diatas nilai tersebut adalah Pada contoh diatas nilai tersebut adalah "2" sehingga 2 kolom digabungkan "2" sehingga 2 kolom digabungkan menjadi satu dan hasilnya dapat kalian menjadi satu dan hasilnya dapat kalian lihat seperti contoh tag html diatas. lihat seperti contoh tag html diatas.

<table border=“1”><tr> <td>baris 1, kolom 1</td> <td>baris 1, kolom 2</td></tr><tr> <td rowspan="2">ini yang digabungkan</td> <td>baris 2, kolom 2</td></tr><tr> <td>baris 3, kolom 2</td></tr></table>

Perhatikan bagian "Ini yang Perhatikan bagian "Ini yang digabungkan", sebelumnya terlihat digabungkan", sebelumnya terlihat perintahperintah

<td rowspan="2"> <td rowspan="2"> Ini adalah contoh penggunaan rowspam. Ini adalah contoh penggunaan rowspam. Rowspan Rowspan memerintahkan agar beberapa memerintahkan agar beberapa

baris digabungkan tergantung dari nilai baris digabungkan tergantung dari nilai yang dituliskan. yang dituliskan.

Pada contoh diatas nilai tersebut adalah Pada contoh diatas nilai tersebut adalah "2" sehingga 2 baris digabungkan "2" sehingga 2 baris digabungkan menjadi satu dan hasilnya dapat kalian menjadi satu dan hasilnya dapat kalian lihat seperti contoh tag html diatas. lihat seperti contoh tag html diatas.

Colspan digunakan untuk menggabungkan kolom

Rowspan digunakan untuk menggabungkan baris

Border Cellpadding Cellspacing Frame

Border Box Void above Below hsides vsides lhs rhs

Bgcolor Height Width Align

Center Left Right Valing top Middle bottom

<html><body><table width="403" height="121" border="1"> <tr> <td colspan="2"> </td> <td width="102"> </td> </tr> <tr> <td width="57"> </td> <td width="222" rowspan="2"> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr></table></body></html>

1

2. Cell that spans two columns:

Cell that spans two rows:

Name Telephone

Bill Gates 555 77 854 555 77 855

Name Bill Gates

Telephone 55 77 854

5555 77 855

3. DATA STASTISTIK PENJUALAN

KOMPUTER“WIRA KOMPUTER”

LOKASI BALI SURABAYA

BULAN

JAN 30% 50%

FEB 40% 55%

MAR 60% 60%

APR 50% 70%

3. SMK WIRA HARAPANMENU:1.PROFIL SEKOLAH2.JURUSAN a. PRLb.MMc.TKJd.UPWe.APf.JB3.VISI MISI SEKOLAH4.FOTO GALERY

Selamat Datang Di SMK WIRA HARAPAN

Yayasan harapan Memiliki VISI dan MISI yang jelas dan kinerja pengelola yang berkwalitas secara

berkesinambungan dengan asas “ DISIPLIN BERDASARKAN KASIH”

SMK WIRA HARAPAN tampil untuk mendukung pendidikan di Kabupaten Badung sebagai implementasi Program Pendidikan Nasional yang menginginkan SMK lebih dominan dibandingan SMA dengan rasiao 70:30.

Semua itu bertujuan agar tamatan Sekolah Mengengah Kejuruan memiliki keterampilan hidup dan siap memasuki dunia kerja.

SMK WIRA HARAPAN siap mewijutkan program pemerintah.

Terimakasih

SMK WIRA HARAPAN

copyright@2012 WIRA HARAPAN

Documents

HTML (Hypertext Markup Language)