HTML (Hypertext Markup Language) MODUL TEORI III HTML (Hypertext Markup Language) Oleh: Timoti Adri Mahendra Putra, S.Kom SMK WIRA HARAPAN
Membuat Tabel pada Halaman HTML Tabel seperti yang kita tahu terdiri dari kolom dan baris. Pada tabel data-data dimasukkan dalam kombinasi antara kolom dan baris tertentu. Beberapa baris dan kolom dari tabel bisa digabungkan untuk membuat tampilan yang sesuai dengan kebutuhan data kita.
Pada html semua itu dapat dilakukan, namun tentunya kita harus mengetahui terlebih dahulu bahan-bahan apa saja yang diperlukan untuk meracik sebuah tabel. Untuk meracik sebuah tabel kita akan membutuhkan bahan-bahan sebagai berikut, <table>, <tr>, dan <td>
HTML TABLE <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> </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.
Menyatukan 2 kolom pada sebuah tabel secara horizontal <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 yang digabungkan", sebelumnya terlihat perintah <td colspan="2"> Ini adalah contoh penggunaan colspan. Colspan memerintahkan agar beberapa kolom digabungkan tergantung dari nilai yang dituliskan. Pada contoh diatas nilai tersebut adalah "2" sehingga 2 kolom digabungkan menjadi satu dan hasilnya dapat kalian lihat seperti contoh tag html diatas.
Menyatukan 2 kolom pada sebuah tabel secara Vertikal <table border=“1”> <tr> <td>baris 1, kolom 1</td> <td>baris 1, kolom 2</td> </tr> <td rowspan="2">ini yang digabungkan</td> <td>baris 2, kolom 2</td> <td>baris 3, kolom 2</td> </table>
Perhatikan bagian "Ini yang digabungkan", sebelumnya terlihat perintah <td rowspan="2"> Ini adalah contoh penggunaan rowspam. Rowspan memerintahkan agar beberapa baris digabungkan tergantung dari nilai yang dituliskan. Pada contoh diatas nilai tersebut adalah "2" sehingga 2 baris digabungkan menjadi satu dan hasilnya dapat kalian lihat seperti contoh tag html diatas.
Colspan digunakan untuk menggabungkan kolom Rowspan digunakan untuk menggabungkan baris
Align Bgcolor Height Width Center Left Right Valing top Middle bottom ATRIBUT TABLE Border Cellpadding Cellspacing Frame 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> <td width="57"> </td> <td width="222" rowspan="2"> </td> <td> </td> </table> </body> </html>
SOAL: 1
Cell that spans two columns: 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% APR 70%
copyright@2012 WIRA HARAPAN 3. SMK WIRA HARAPAN MENU: PROFIL SEKOLAH JURUSAN PRL MM TKJ UPW AP JB VISI MISI SEKOLAH 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 copyright@2012 WIRA HARAPAN