Pada tugas kali ini, membahas tentang membuat tabel dengan HTML
dalam tabel kamu harus mengerti dengan <tr> dan <td>, karena itu unsur utama pada tabel:
contoh:
<html>
<head>
<title>latihan table</title>
</head>
<body>
<table border="1" width="60%">
<tr>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">3</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
</tr>
<tr>
<td align="center">7</td>
<td align="center">8</td>
<td align="center">9</td>
<tr>
</table>
</body>
</html>
<head>
<title>latihan table</title>
</head>
<body>
<table border="1" width="60%">
<tr>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">3</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
</tr>
<tr>
<td align="center">7</td>
<td align="center">8</td>
<td align="center">9</td>
<tr>
</table>
</body>
</html>
kalau belum mengerti tentang <tr> dan <td>
sebaiknya tanya aja ke mbah google. hehehe
ini hasilnya:
klik gambar untuk memperbesar
nah bagus kan hasilnya?
hehehe
Lanjut..............
coba perhatikan gambar di bawah ini:
klik gambar untuk memperbesar
mengapa pada nomor 2 dan 6 beda dengan yang lain (lebih panjang)?
mari kita lihat:
<html>
<head>
<title>latihan table</title>
</head>
<body>
<table border="1" width="60%">
<tr>
<td align="center">1</td>
<td colspan="2" align="center">2</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">4</td>
<td align="center">5</td>
</tr>
<tr>
<td colspan="2" align="center">6</td>
<td align="center">7</td>
<tr>
</table>
</body>
</html>
<head>
<title>latihan table</title>
</head>
<body>
<table border="1" width="60%">
<tr>
<td align="center">1</td>
<td colspan="2" align="center">2</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">4</td>
<td align="center">5</td>
</tr>
<tr>
<td colspan="2" align="center">6</td>
<td align="center">7</td>
<tr>
</table>
</body>
</html>
Pada <td colspan="2" itu berfungsi untuk kolom...
di situ menggunakan 2 jd tampilannya akan menjadi 2 kolom
gimana uda ngerti belum?
kalau uda ngerti, yoiii kita lanjut....
coba kamu uda bisa belum bikin yg kayak gini?
klik gambar untuk memperbesar
iaa bener kayak yg tadi...
cuma td colspannya yg di ganti...
<html>
<head>
<title>latihan table</title>
</head>
<body>
<table border="1" width="60%">
<tr>
<td colspan="3" align="center">1</td>
</tr>
<tr>
<td colspan="2" align="center">2</td>
<td align="center">3</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
<tr>
</table>
</body>
</html>
<head>
<title>latihan table</title>
</head>
<body>
<table border="1" width="60%">
<tr>
<td colspan="3" align="center">1</td>
</tr>
<tr>
<td colspan="2" align="center">2</td>
<td align="center">3</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
<tr>
</table>
</body>
</html>
yoo kita lanjut...
<html>
<head>
<title>latihan table</title>
</head>
<body>
<table border="1" width="60%">
<tr>
<td rowspan="2" align="center">1</td>
<td align="center">2</td>
</tr>
<tr>
<td align="center">3</td>
</tr>
</table>
</body>
</html>
<head>
<title>latihan table</title>
</head>
<body>
<table border="1" width="60%">
<tr>
<td rowspan="2" align="center">1</td>
<td align="center">2</td>
</tr>
<tr>
<td align="center">3</td>
</tr>
</table>
</body>
</html>
hasilnya:
klik gambar untuk memperbesar
pada <td rowspan="2" di atas, itu menunjukan baris.
lanjut lagi ok...
<html>
<head>
<title>latihan table</title>
</head>
<body>
<table border="1" width="60%">
<tr>
<td align="center">1</td>
<td rowspan="2" align="center">2</td>
</tr>
<tr>
<td align="center">3</td>
</tr>
</table>
</body>
</html>
<head>
<title>latihan table</title>
</head>
<body>
<table border="1" width="60%">
<tr>
<td align="center">1</td>
<td rowspan="2" align="center">2</td>
</tr>
<tr>
<td align="center">3</td>
</tr>
</table>
</body>
</html>
tampilan:
klik gambar untuk memperbesar
yang ini hampir sama dengan sebelumnya.
ini tahap terakhir
<html>
<head>
<title>latihan</title>
</head>
<body>
<table border="1" width="30%">
<tr>
<td align="center">1</td>
<td colspan="2" align="center">2</td>
</tr>
<tr>
<td rowspan="10" align="center">3</td></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td colspan="2" align="center">4</td>
</tr>
<tr>
<td align="center">5</td>
<td align="center">6</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<table border="1" width="30%">
<tr>
<td></td>
<td></td>
<td rowspan="10" align="center">10</td></td>
</tr>
<tr>
<td rowspan="2" align="center">7</td>
<td align="center">8</td>
</tr>
<tr>
<td align="center">9</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
<head>
<title>latihan</title>
</head>
<body>
<table border="1" width="30%">
<tr>
<td align="center">1</td>
<td colspan="2" align="center">2</td>
</tr>
<tr>
<td rowspan="10" align="center">3</td></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td colspan="2" align="center">4</td>
</tr>
<tr>
<td align="center">5</td>
<td align="center">6</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<table border="1" width="30%">
<tr>
<td></td>
<td></td>
<td rowspan="10" align="center">10</td></td>
</tr>
<tr>
<td rowspan="2" align="center">7</td>
<td align="center">8</td>
</tr>
<tr>
<td align="center">9</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
hasil:
klik gambar untuk memperbesar
semoga bermanfaat
0 komentar:
Posting Komentar