Pada postingan kali ini saya akan share cara membuat tabel pada halaman
web. dalam tabel ini saya menggunakan perintah colspan dan rowspan. dan saya kira agan-agan sudah tau apa itu atribut colspan dan rowspan pada tabel??
okeeyy kita mulai. hehehe
1. Buat script htmlnya, atau gak copas aja script yang saya buat ini.
 |
| Gambar : Output |
<html>
<head>
<title>table colspan dan rowspan</title></head>
<body>
<h4>gabungan dua kolom:<h4>
<table border="1">
<tr>
<th>Nama</th>
<th colspan="2">Telepon</th>
</tr>
<tr>
<td>Dion Buton</td>
<td>081235174081</td>
<td>081235174081</td>
</tr>
</table>
<h4>gabungan dua baris:<h4>
<table border="1">
<tr>
<th>Nama:</th>
<td>Dion Buton</td>
</tr>
< tr>
<th rowspan="2">Telepone:</th>
<td>081235174081</td>
</tr>
<tr>
<td>081235174081</td>
</tr>
</table>
</body>
</html>
<head>
<title>table colspan dan rowspan</title></head>
<body>
<h4>gabungan dua kolom:<h4>
<table border="1">
<tr>
<th>Nama</th>
<th colspan="2">Telepon</th>
</tr>
<tr>
<td>Dion Buton</td>
<td>081235174081</td>
<td>081235174081</td>
</tr>
</table>
<h4>gabungan dua baris:<h4>
<table border="1">
<tr>
<th>Nama:</th>
<td>Dion Buton</td>
</tr>
< tr>
<th rowspan="2">Telepone:</th>
<td>081235174081</td>
</tr>
<tr>
<td>081235174081</td>
</tr>
</table>
</body>
</html>
2. Simpan script tersebut dengan nama file tcolsrows.html, kemdian jalankan, maka hasilnya akan tampak seperti gambar diatas.
catatan:
jika ingin tabel tersebut terlihat menarik tambahkan atribut warna backgroud(bgcolor), style, align, frame dll.
catatan:
jika ingin tabel tersebut terlihat menarik tambahkan atribut warna backgroud(bgcolor), style, align, frame dll.
lanjutan....!!!
 |
| Gambar : Output |
<html>
<head>
<title>colspan rowspan</title></head>
<body bgcolor="red">
<table border="2"bgcolor="aqua"cellspacing="1"cellpadding="1">
<tr>
<td rowspan="2"colspan="2"align="center">Warga</td>
<td colspan="6"align="center">Kota</td></tr>
<tr><td>Klaten</td>
<td>Jogja</td>
<td>Solo</td>
<td>Wonosari</td>
<td>Ponorogo</td>
<td>Malang</td>
</tr>
<tr><td rowspan="2"align="center">jenis kelamin</td>
<td>pria</td>
<td>30</td>
<td>20</td>
<td>30</td>
<td>22</td>
<td>19</td>
<td>9</td>
</tr>
<tr>
<td>wanita</td>
<td>20</td>
<td>8</td>
<td>18</td>
<td>10</td>
<td>18</td>
<td>15</td>
</tr>
</table>
</body>
</html>
Tidak ada komentar:
Posting Komentar