Semangat Pagi!
Post hari ini saya akan memberi langkah-langkah atau tutorial untuk membuat sebuah kolom sesuai dengan gambar di samping, menggunakan HTML. Saya menggunakan aplikasi Notepad++ yang sudah di setting language nya menjadi html. Ini merupakan tugas matakuliah Implementasi Design Antarmuka Pengguna. Let’s check it out!
Pertama tama, apa sih html? HTML merupakan singkatan dari Hyper Text Markup Language, yang adalah bahasa untuk membuat sebuah web. Langsung saja kita buat tabelnya ..
Untuk membuat script atau kodingan kita di html, pertama tama kita harus membuat membuat rangka nya terlebih dahulu.
<!Doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
Lalu, selanjutnya diisi oleh script untuk membuat tabel. Yang pertama akan saya isi bagian <head>.
<head>
<title>Tugas Kolom</title>
</head>
Di bagian <head> hanya diisi oleh <title> yang merupakan judul pada laman tersebut. Lalu, saya akan isi bagian <body> nya. Untuk membuat tabel kita butuh tag <table>.
<body>
<table align=”center” bgcolor=”white” cellpadding=”5″ cellspacing=”0″ width=”500″ height=”500″ border=”1″></table>
</body>
Pada tabel terdapat align yang menentukan posisi tulisan, lalu bgcolor adalah warna background pada tabel tersebut, lalu cellpadding adalah jarak tulisan dengan garis pada tabel, lalu cellspacing merupakan jarak tabel, talu width dan height adalah ukuran tabel, dan border merupakan garis yang terdapat pada tabel. Selanjutnya saya akan membuat garis-garis pada tabel sesuai gambar yang ada di atas. Sebelumnya, perlu diperhatikan bahwa tabel yang akan saya buat terdiri dari 9×9 kotak kotak yang kemudian akan saya gabungkan (merge) kolom ataupun barisnya agar mendapatkan tampilan seperti gambar di atas.
<body>
<table align=”center” bgcolor=”white” cellpadding=”5″ cellspacing=”0″ width=”500″ height=”500″ border=”1″>
<tr>
<td colspan=”8″>1</td>
<td rowspan=”9″>2</td>
</tr>
<tr>
<td rowspan=”7″>3</td>
<td colspan=”7″>4</td>
</tr>
<tr>
<td rowspan=”5″>5</td>
<td colspan=”5″>6</td>
<td rowspan=”6″>7</td>
</tr>
<tr>
<td rowspan=”3″>8</td>
<td colspan=”3″>9</td>
<td rowspan=”4″>10</td>
</tr>
<tr>
<td>11
<td>12
<td rowspan=”2″>13</td>
</tr>
<tr>
<td colspan=”2″>14</td>
</tr>
<tr>
<td colspan=”4″>15</td>
</tr>
<tr>
<td colspan=”6″>16</td>
</tr>
<tr>
<td colspan=”8″>17</td>
</tr>
</table>
</body>
Di atas merupakan script yang nantinya jika di save dan dibuka di browser akan menjadi tabel yang ada pada gambar di atas. Tag <tr> merupakan table row yang digunakan untuk mendefinisikan baris pada tabel. Sedangkan tag <td> merupakan table data yang digunakan untuk membuat isi dari baris tersebut. Colspan pada script diatas digunakan untuk menggabungkan kolom, sedangan rowspan digunakan untuk menggabungkan baris.
Jika telah selesai menuliskan script di atas, kita tinggal save dan dapat langsung dibuka di browser kesayangan. Mohon maaf jika masih banyak kesalahan, sampai jumpa di posting selanjutnya!