Newest Post
// On :Rabu, 14 Desember 2016
ANATOMI TABEL PADA HALAMAN WEB
Anatomi Tabel SEderhana
Dalam
Membuat tabel dalam WEB
diperlukan
3 unsur yaitu :
1.<table> = Untuk memanggil tabel
2.<tr> = Untuk membuat baris pada tabel
3.<td> = Untuk membuat kolom (tempat mengisikan
data)
Contoh
<html>
<head>
<title>
Anatomi Tabel Sederhana </title>
<body>
<table>
<tr>
<td>
No </td>
<td>
Nama </td>
<td>
Nilai Pemrogaman Dasar </td>
<tr>
<td>
1 </td>
<td>
Abdu Rrohman Ghoni </td>
<td>
90 </td>
</tr>
<tr>
<td>
2 </td>
<td>
Abdul Azis </td>
<td>
85 </td>
</tr>
<tr>
<td>
3 </td>
<td>
Abdullah Tsani Al-Amanah </td>
<td>
10 </td>
</tr>
</table>
</body>
</head>
</html>
Maka
hasilnya
Untuk
Mengatur Tinggi dan lebarnya
Maka
beri Atribut
<width> : Untuk lebar
<height> : Untuk tinggi
TABEL SPANning
Tabel
Spanning
:
Menggabungkan 2 tabel / menggabungkan kolom / pun baris
Atribut
yang dipakai adalah
1.<Rowspan> : Untuk menggabungkan Baris tabel
2.<Colspan> : Untuk menggabungkan Kolom tabel
Contoh
<rowspan>
<html>
<head>
<title>
Anatomi Tabel Sederhana </title>
<body>
<table
border="10">
<tr>
<td
rowspan="4"> No </td>
<td>
Nama </td>
<td>
Nilai Pemrogaman Dasar </td>
<tr>
<td>
Abdu Rrohman Ghoni </td>
<td>
90 </td>
</tr>
<tr>
<td>
Abdul Azis </td>
<td>
85 </td>
</tr>
<tr>
<td>
Abdullah Tsani Al-Amanah </td>
<td>
10 </td>
</tr>
</table>
</body>
</head>
</html>
Maka
hasilnya :
Contoh
<Colspan>
<html>
<head>
<title>
Anatomi Tabel Sederhana </title>
<body>
<table
border="10">
<tr>
<td
colspan="2"> No & Nama</td>
<td>
Nilai Pemrogaman Dasar </td>
<tr>
<td>
1. </td>
<td>
Abdu Rrohman Ghoni </td>
<td>
90 </td>
</tr>
<tr>
<td>
2. </td>
<td>
Abdul Azis </td>
<td>
85 </td>
</tr>
<tr>
<td>
3. </td>
<td>
Abdullah Tsani Al-Amanah </td>
<td>
10 </td>
</tr>
</table>
</body>
</head>
</html>
Maka
Hasilnya :
DESAIN HALAMAN WEB DENGAN TABEL
Contoh
:
<html>
<head>
<title>
Membuat Jadwal Sekolah </title>
<body
background="545909.jpg">
<br><marquee
scrollamount="50" direction="right"><Font
face="Cambaria" size="7"
Color="red"><Center> Jadwal SMK N 2 Karanganyar
</center></font></marquee></br>
<table
bgcolor="transparent" align="center" border="10"
bgcolor="blue">
<tr
bgcolor="green">
<td>
JAM </td>
<td>
Senin </td>
<td>
Selasa </td>
<td>
Rabu </td>
<td>
Kamis </td>
<td>
Jumat </td>
</tr>
<tr>
<td>
1 </td>
<td>
Upacara </td>
<td
rowspan="2"><font color="brown"> Matematika
</font></td>
<td
rowspan="4"><font color="gold"> Jaringan Dasar
</font></td>
<td
rowspan="2"><font color="blue"> Bahasa Jawa
</font></td>
<td
rowspan="2"><font color="red"> Matematika
</font></td>
</tr>
<tr>
<td>
2 </td>
<td
rowspan="3"> Olahraga </td>
</tr>
<tr>
<td>
3 </td>
<td
rowspan="2"><font color="brown"> prakarya
</font></td>
<td
rowspan="2"><font color="blue"> Sistem Komputer
</font></td>
<td
rowspan="3"><font color="red"> Pemrogaman WEB
</font></td>
</tr>
<tr>
<td>
4 </td>
</tr>
<tr>
<td>
5 </td>
<td
rowspan="3"> Agama </td>
<td
rowspan="4"><font color="brown"> Perakitan
Komputer </font></td>
<td
rowspan="2"><font color="gold"> PKN
</font></td>
<td
rowspan="2"><font color="blue"> Pemrogaman Dasar
</font></td>
</tr>
<tr>
<td>
6 </td>
<td
rowspan="2"><font color="red"> Sholat Jumat
</font></td>
</tr>
<tr>
<td>
7 </td>
<td
rowspan="2"><font color="gold"> Bahasa Indonesia
</font></td>
<td
rowspan="2"><font color="blue"> Sejarah Indonesia
</font></td>
</tr>
<tr>
<td>
8 </td>
<td
rowspan="2"> Fisika </td>
<td><font
color="red"> Pemrogaman WEB </font></td>
</tr>
<tr>
<td>
9 </td>
<td
rowspan="2"><font color="brown"> Seni Budaya
</font></td>
<td
rowspan="2"><font color="gold"> Bahasa Inggris
</font></td>
<td
rowspan="2"><font color="blue"> Bahasa Indonesia
</font></td>
<td><font
color="red"> BP/PK </font></td>
</tr>
<tr>
<td>
10 </td>
<td
rowspan="3"> Sistem Operasi </td>
<td
rowspan="3"><font color="red"> Simulasi Digital
</font></td>
</tr>
<tr>
<td>
11 </td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
12 </td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<hr><p
align="right"><font size="5"
color="black"><marquee width="50%"> SMK N 2
Karanganyar </marquee></font></p></hr>
</body>
</head>
</html>
Maka
Hasilnya :
