-- seperti tulisan lain, tulisan ini pun dapat anda copy, edit dan sebarkan sesuka anda --
Ternyata, membuat website tidak susah ya.... Dan bisa pakai notepad lagi.
Pada tulisan sebelumnya (Membuat Website sendiri (part 4))telah diperkenalkan tag untuk membuat tabel. Pada perkembangannya tag tabel banyak digunakan, selain untuk membuat tabel, juga untuk membuat layout tampilan halaman HTML. Oleh karenanya tag table akan dibahas lebih lanjut. Saya tekankan lagi bahwa tidak ada seorang pun yang mahir membuat web hanya dengan membaca tutorial html ini. Yang terpenting adalah berlatih dan membuat web sendiri berdasarkan apa yang sudah anda pelajari.
Pada contoh tabel di tulisan sebelumnya menunjukkan tabel dengan sel 2x2. Sesungguhnya jumlah sel yang bisa dibuat adalah tak terbatas, dan juga bisa dibuat bingkai (border). Perhatikan contoh berikut;
<table border="1">
<tr>
<td>Sel 1</td>
<td>Sel 2</td>
<td>Sel 3</td>
<td>Sel 4</td>
</tr>
<tr>
<td>Sel 5</td>
<td>Sel 6</td>
<td>Sel 7</td>
<td>Sel 8</td>
</tr>
<tr>
<td>Sel 9</td>
<td>Sel 10</td>
<td>Sel 11</td>
<td>Sel 12</td>
</tr>
</table>
Dan tampilan di browser kurang lebih sebagai berikut (coba tulis sendiri dan ganti nilai bordernya untuk lebih memahaminya),
| Sel 1 | Sel 2 | Sel 3 | Sel 4 |
| Sel 5 | Sel 6 | Sel 7 | Sel 8 |
| Sel 9 | Sel 10 | Sel 11 | Sel 12 |
Jumlah sel tiap barisnya pun bisa tidak sama. Untuk itu digunakan atribut colspan. Perhatikan contoh berikut;
<table border="1">
<tr>
<td>No</td>
<td>Barang</td>
<td colspan="2">Jumlah</td>
</tr>
<tr>
<td>1</td>
<td>Buku tulis</td>
<td>20</td>
<td>buah</td>
</tr>
<tr>
<td>2</td>
<td>Bolpoint</td>
<td>3</td>
<td>lusin</td>
</tr>
</table>
Dan tampilan di browser kurang lebih sebagai berikut,
| No | Barang | Jumlah | |
| 1 | Buku tulis | 20 | buah |
| 2 | Bolpoint | 3 | lusin |
Ukuran selnya pun bisa ditentukan. Untuk itu digunakan atribut width. Perhatikan contoh berikut;
<table border="1" width="450">
<tr>
<td width="10%">No</td>
<td width="55%">Barang</td>
<td colspan="2" width="35%">Jumlah</td>
</tr>
<tr>
<td>1</td>
<td>Buku tulis</td>
<td>20</td>
<td>buah</td>
</tr>
<tr>
<td>2</td>
<td>Bolpoint</td>
<td>3</td>
<td>lusin</td>
</tr>
</table>
Dan tampilan di browser kurang lebih sebagai berikut,
| No | Barang | Jumlah | |
| 1 | Buku tulis | 20 | buah |
| 2 | Bolpoint | 3 | lusin |
Dan bisa juga dibuat rata tengah atau kanan. Untuk itu digunakan atribut align. Perhatikan contoh berikut.
<table border="1" width="450">
<tr>
<td width="10%">No</td>
<td width="55%" align="center">Barang</td>
<td colspan="2" width="35%" align="center">Jumlah</td>
</tr>
<tr>
<td align="right">1</td>
<td>Buku tulis</td>
<td align="right">20</td>
<td>buah</td>
</tr>
<tr>
<td align="right">2</td>
<td>Bolpoint</td>
<td align="right">3</td>
<td>lusin</td>
</tr>
</table>
Dan tampilan di browser kurang lebih sebagai berikut,
| No | Barang | Jumlah | |
| 1 | Buku tulis | 20 | buah |
| 2 | Bolpoint | 3 | lusin |
Kalo ada colspan tentunya ada rowspan ya? Tentu, perhatikan contoh berikut.
<table border="1" width="450">
<tr>
<td width="10%">No</td>
<td width="55%" align="center">Barang</td>
<td width="35%" align="center">Warna</td>
</tr>
<tr>
<td align="right">1</td>
<td rowspan="3">Buku tulis</td>
<td>Merah</td>
</tr>
<tr>
<td align="right">2</td>
<td>Biru</td>
</tr>
<tr>
<td align="right">3</td>
<td>Hijau</td>
</tr>
</table>
Dan tampilan di browser kurang lebih sebagai berikut,
| No | Barang | Jumlah |
| 1 | Buku tulis | Merah |
| 2 | Biru | |
| 3 | Hijau |
Masih bingung dengan colspan dan rowspan? Mungkin ada baiknya anda gambarkan tabel yang ingin dibuat di secarik kertas baru menuliskan kodenya. Kalau sudah paham, ada baiknya anda coba membuat beberapa tabel dengan kombinasi colspan dan rowspan
Bersambung.....
Tidak ada komentar:
Posting Komentar