| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
<html>
<head>
<title> Soal Latihan 1 No.1 </title>
</head>
<body>
<table border="1">
<tr>
<td align="center" width="50">1</td>
<td align="center" width="50">2</td>
<td align="center" width="50">3</td>
</tr>
<tr>
<td align="center" width="50">4</td>
<td align="center" width="50">5</td>
<td align="center" width="50">6</td>
</tr>
<tr>
<td align="center" width="50">7</td>
<td align="center" width="50">8</td>
<td align="center" width="50">9</td>
</tr>
</table>
</body>
</html>
<head>
<title> Soal Latihan 1 No.1 </title>
</head>
<body>
<table border="1">
<tr>
<td align="center" width="50">1</td>
<td align="center" width="50">2</td>
<td align="center" width="50">3</td>
</tr>
<tr>
<td align="center" width="50">4</td>
<td align="center" width="50">5</td>
<td align="center" width="50">6</td>
</tr>
<tr>
<td align="center" width="50">7</td>
<td align="center" width="50">8</td>
<td align="center" width="50">9</td>
</tr>
</table>
</body>
</html>
Kesimpulan :
Untuk membuat tabel seperti ini tidak ada masalah, tetapi untuk mempercantik dan mengatur tampilan tabel seperti lebar "width" berfungsi untuk menampilkan seluruh text yang tercantum dalam tabel tersebut. Kita juga dapat menambahkan script "height" yang berguna mengatur tinggi tabel. untuk penyempurnaan selanjutnya, kita bisa mengkreasikan atau mengatur tinggi dan lebar agar tabel terlihat rapi. sama seperti align="center" juga berfungsi meletakan teks didalam tabel menjadi di tengah. script ini juga berperan penting.
2. Membuat tabel di baris pertama dan baris terakhir salah satu cell memiliki luas 2 cell.
<html>
<head>
<title> Soal Latihan 1 No.1 </title>
</head>
<body>
<table border="1">
<tr>
<td width="30" align="center">1</td>
<td colspan="2" align="center">2</td>
</tr>
<tr>
<td width="30" align="center">3</td>
<td width="30" align="center">4</td>
<td width="30" align="center">5</td>
</tr>
<tr>
<td colspan="2" align="center">7</td>
<td width="30" align="center">8</td>
</tr>
</table>
</body>
</html>
<head>
<title> Soal Latihan 1 No.1 </title>
</head>
<body>
<table border="1">
<tr>
<td width="30" align="center">1</td>
<td colspan="2" align="center">2</td>
</tr>
<tr>
<td width="30" align="center">3</td>
<td width="30" align="center">4</td>
<td width="30" align="center">5</td>
</tr>
<tr>
<td colspan="2" align="center">7</td>
<td width="30" align="center">8</td>
</tr>
</table>
</body>
</html>
Kesimpulan :
Membuat tabel dengan fungsi mengubah lebar cell / membuat 2 cell tabel mejadi 1 cell ialah script "colspan". colspan akan menggunakan lebar baris sesuai keinginan kita menjadi satu , contoh pada cell 2.
3.
| 1 | ||
| 2 | 3 | |
| 4 | 5 | 6 |
<html>
<head>
<title> Soal Latihan 1 No.1 </title>
</head>
<body>
<table border="1">
<tr>
<td colspan="3" align="center">1</td>
</tr>
<tr>
<td colspan="2" align="center">2</td>
<td width="30" align="center">3</td>
</tr>
<tr>
<td width="30" align="center">4</td>
<td width="30" align="center">5</td>
<td width="30" align="center">6</td>
</tr>
</table>
</body>
</html>
<head>
<title> Soal Latihan 1 No.1 </title>
</head>
<body>
<table border="1">
<tr>
<td colspan="3" align="center">1</td>
</tr>
<tr>
<td colspan="2" align="center">2</td>
<td width="30" align="center">3</td>
</tr>
<tr>
<td width="30" align="center">4</td>
<td width="30" align="center">5</td>
<td width="30" align="center">6</td>
</tr>
</table>
</body>
</html>
Kesimpulan :
Pada tabel no.3 ini fungsi yang sama pada tabel no.2 digunakan pada baris ke-2. pada baris pertama kita hanya perlu mengubah colspan menjadi "3" dan hanya membuat satu baris script pada pembuka <tr> dan penutup </tr> pertama. sisa script lainnya sudah dibahas pada tabel 1&2.
4. Membuat 1 Kolom seperti luas 2 Kolom
| 1 | 2 |
| 3 |
<html>
<head>
<title> Soal Latihan 1 No.1 </title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2" width="50" align="center">1</td>
<td width="50" align="center">2</td>
</tr>
<tr>
<td width="50" align="center">3</td>
</tr>
</table>
</body>
</html>
<head>
<title> Soal Latihan 1 No.1 </title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2" width="50" align="center">1</td>
<td width="50" align="center">2</td>
</tr>
<tr>
<td width="50" align="center">3</td>
</tr>
</table>
</body>
</html>
Kesimpulan :
Pada tabel no.4, kolom 1 merupakan kolom yang menggunakan rowspan yang berfungsi 2 kolom menjadi 1 kolom, Dimana luas kolom sebesar yang kita inginkan. contoh coding diatas menggunakan td rowspan="2" dimana angka 2 berarti 2 kolom.
5.
| 1 | 2 |
| 3 |
<html>
<head>
<title> Soal Latihan 1 No.1 </title>
</head>
<body>
<table border="1">
<tr>
<td width="50" align="center">1</td>
<td rowspan="3" width="50" align="center">2</td>
</tr>
<tr>
<td width="50" align="center">3</td>
</tr>
</table>
</body>
</html>
<head>
<title> Soal Latihan 1 No.1 </title>
</head>
<body>
<table border="1">
<tr>
<td width="50" align="center">1</td>
<td rowspan="3" width="50" align="center">2</td>
</tr>
<tr>
<td width="50" align="center">3</td>
</tr>
</table>
</body>
</html>
kesimpulan :
Tabel no.5 hanya berbeda kolom, pada no.4 kolom 1 sedangkan kolom 2 pada no.5 hanya berbeda pada tabel pertama terdapat 2 kolom, sedangkan no.4 hanya kolom 1 dan tabel dalam kolom tersendiri.
6.
| 1 | 2 | |||||
| 3 |
| |||||
| 10 | |||||
<html>
<head>
<titlle >Latihan Table dua</title>
</head>
<body>
<table border="1">
<tr>
<td width="121" align="center">1</td>
<td width="250" colspan="3" align="center">2</td>
</tr>
<tr>
<td rowspan="2" width="100" align="center">3</td>
</tr>
<td width="250" colspan="3" width="250" height="100" align="center">
<table border="1">
<tr>
<td width="80" colspan="2" align="center">4</td>
</tr>
<tr>
<td width="80" align="center">5</td>
<td width="80" align="center">6</td>
</tr>
</table>
<tr>
<td width="250" colspan="3" height="100" align="center">
<table border="1">
<tr>
<td width="80" rowspan="2" align="center">7</td>
<td width="80" align="center">8</td>
</tr>
<tr>
<td width="80" align="center">9</td>
</tr>
</table>
<td rowspan="2" width="121"align="center">10</td>
</tr>
</table>
</body>
</html>
<head>
<titlle >Latihan Table dua</title>
</head>
<body>
<table border="1">
<tr>
<td width="121" align="center">1</td>
<td width="250" colspan="3" align="center">2</td>
</tr>
<tr>
<td rowspan="2" width="100" align="center">3</td>
</tr>
<td width="250" colspan="3" width="250" height="100" align="center">
<table border="1">
<tr>
<td width="80" colspan="2" align="center">4</td>
</tr>
<tr>
<td width="80" align="center">5</td>
<td width="80" align="center">6</td>
</tr>
</table>
<tr>
<td width="250" colspan="3" height="100" align="center">
<table border="1">
<tr>
<td width="80" rowspan="2" align="center">7</td>
<td width="80" align="center">8</td>
</tr>
<tr>
<td width="80" align="center">9</td>
</tr>
</table>
<td rowspan="2" width="121"align="center">10</td>
</tr>
</table>
</body>
</html>
Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.
untuk postingan sudah baik. namun saran kalau boleh animasinya di kurangi karna blog anda kelihatan terlalu ramai dengan animasinya.
BalasHapusAlhamdulillah telah saya perbaiki, terima kasih atas sarannya
BalasHapus