Skrip Membuat Table Colspan dan Rowspan HTML
- blogging
Kangje.com - Belajar HTML memang menyenangkan bagi kebanyakan orang, tetapi tidak sedikit juga yang bingung dalam belajar HTML. Mayoritas orang bingung dalam belajar HTML adalah dari penggunaan skrip HTML itu sendiri.
HTML memang memiliki banyak sekali sintak untuk membangun sebuah halaman site. Salah satu sintak dan skrip yang banyak dipakai adalah tabel. Sintak tabel memiliki banyak sekali propertis, diantaranya adalah penggabungan baris atau kolom, atau lebih dikenal dengan nama merge.
Struktur skrip di atas sudah mnejadikan sebuah tabel dengan merge kolom dan baris. Semoga bisa membantu.
HTML memang memiliki banyak sekali sintak untuk membangun sebuah halaman site. Salah satu sintak dan skrip yang banyak dipakai adalah tabel. Sintak tabel memiliki banyak sekali propertis, diantaranya adalah penggabungan baris atau kolom, atau lebih dikenal dengan nama merge.
Skrip Membuat Table Colspan dan Rowspan HTML
Dalam kesempatan kali ini akan membahas tentang teknik dasar menggabungkan kolom atau baris pada HTML. Cara ini sangat mudah dan cepat bisa dipahami. Berikut adalah caranya:- Susunlah struktur HTML yang benar terlebih dahulu, contoh seperti di bawah ini:
<html><head><title>Latihan Membuat Tabel HTML</title></head><body>isi body</body></html>
- Setelah struktur HTML di atas, kita akan edit bagian isi body. Kita akan ganti "isi body" dengan skrip tabel untuk HTML. Skrip tabel 3 baris 3 kolom seperti berikut:
<table border="1"><tr><td>Kolom 1, Baris 1</td><td>Kolom 2, Baris 1</td><td>Kolom 3, Baris 1</td></tr><tr><td>Kolom 1, Baris 2</td><td>Kolom 2, Baris 2</td><td>Kolom 3, Baris 2</td></tr><tr><td>Kolom 1, Baris 3</td><td>Kolom 2, Baris 3</td><td>Kolom 3, Baris 3</td></tr></table>
- Skrip menjadi seperti berikut:
<html><head><title>Latihan Membuat Tabel HTML</title></head><body><table border="1"><tr><td>Kolom 1, Baris 1</td><td>Kolom 2, Baris 1</td><td>Kolom 3, Baris 1</td></tr><tr><td>Kolom 1, Baris 2</td><td>Kolom 2, Baris 2</td><td>Kolom 3, Baris 2</td></tr><tr><td>Kolom 1, Baris 3</td><td>Kolom 2, Baris 3</td><td>Kolom 3, Baris 3</td></tr></table></body></html>
- Setelah model awal tabel selesai. Kita akan mulai menggabungkan "Kolom 2, Baris 1" dengan "Kolom 3, Baris 1".
<table border="1"><tr><td>Kolom 1, Baris 1</td><td colspan="2">Kolom 2, Baris 1 dan Kolom3, Baris 1</td></tr><tr><td>Kolom 1, Baris 2</td><td>Kolom 2, Baris 2</td><td>Kolom 3, Baris 2</td></tr><tr><td>Kolom 1, Baris 3</td><td>Kolom 2, Baris 3</td><td>Kolom 3, Baris 3</td></tr></table>
- Hasilnya menjadi seperti berikut:
<html>
<head>
<title>Latihan Membuat Tabel HTML</title>
</head>
<body>
<table border="1">
<tr>
<td>Kolom 1, Baris 1</td>
<td colspan="2">Kolom 2, Baris 1 dan Kolom3, Baris 1</td>
</tr>
<tr>
<td>Kolom 1, Baris 2</td>
<td>Kolom 2, Baris 2</td>
<td>Kolom 3, Baris 2</td>
</tr>
<tr>
<td>Kolom 1, Baris 3</td>
<td>Kolom 2, Baris 3</td>
<td>Kolom 3, Baris 3</td>
</tr>
</table>
</body>
</html>
- Selanjutnya kita akan menggabungkan "Kolom 1, Baris 2" dengan "Kolom 1, Baris 3"
<table border="1"><tr><td>Kolom 1, Baris 1</td><td colspan="2">Kolom 2, Baris 1 dan Kolom3, Baris 1</td></tr><tr><td rowspan="2">Kolom 1, Baris 2 dan Kolom 1, Baris 3</td><td>Kolom 2, Baris 2</td><td>Kolom 3, Baris 2</td></tr><tr><td>Kolom 2, Baris 3</td><td>Kolom 3, Baris 3</td></tr></table>
- Hasilnya menjadi seperti berikut:
<html><head><title>Latihan Membuat Tabel HTML</title></head><body><table border="1"><tr><td>Kolom 1, Baris 1</td><td colspan="2">Kolom 2, Baris 1 dan Kolom3, Baris 1</td></tr><tr><td rowspan="2">Kolom 1, Baris 2 dan Kolom 1, Baris 3</td><td>Kolom 2, Baris 2</td><td>Kolom 3, Baris 2</td></tr><tr><td>Kolom 2, Baris 3</td><td>Kolom 3, Baris 3</td></tr></table></body></html>
Struktur skrip di atas sudah mnejadikan sebuah tabel dengan merge kolom dan baris. Semoga bisa membantu.
0 Response to "Skrip Membuat Table Colspan dan Rowspan HTML"
Post a Comment
Terimakasih telah berkunjung dan berikut ini ketentuan komentar yang diperbolehkan :
1. Berkomentar dengan bahasa yang sopan dan tidak SARA.
2. Berkomentar sesuai dengan topik artikel.
3. TIDAK BOLEH memasukkan LINK AKTIF. Karena akan otomatis terhapus komentarnya.
4. Jika ingin menambahkan LINK silahkan masukkan ke dalam bagian URL atau menyertakan ke dalam komentar dengan sifat TIDAK AKTIF.
5. Berkomentarlah yang membangun dan bermanfaat untuk orang lain ya :-)
6. JANGAN MENCANTUMKAN NOMOR TELEPON ATAU SEJENISNYA DI DALAM KOMENTAR. UNTUK MENGHINDARI PENYALAHGUNAAN DARI PIHAK LAIN.
7. MOHON UNTUK TIDAK KOMENTAR YANG MENYESATKAN!
Terimakasih atas kerjasamanya demi memajukan website ini,