PWPB | Pertemuan 5
Materi 5 Tabel
Nama : Muhammad Fahru Rozi
Kelas : XI RPL 2
1. Lat12Tabel1.html
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="shorcut icon" href="../img/Logo.ico">
<style type="text/css">
body {
background-color: cyan;
}
center{
margin-top: 200px;
font-size: 20px;
}
</style>
</head>
<body>
<center>
<h1>Berikut Contoh Tabel dengan rowspan dan colspan</h1>
<table width="80%" border="1" cellpadding="4" cellspacing="0.5" bgcolor="grey">
<tr>
<td>Baris 1 kolom 1</td>
<td>Baris 2 kolom 2</td>
</tr>
<tr>
<td colspan="2">Baris 1 kolom 2</td>
</tr>
<tr>
<td rowspan="2">Baris 1 kolom 3</td>
<td>Baris 2 kolom 3</td>
</tr>
</table>
</center>
</body>
</html>
Hasil :
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="shorcut icon" href="../img/Logo.ico">
<style type="text/css">
body {
background-color: cyan;
}
p {
font-family: monospace;
font-size: 50px;
margin-top: 200px;
}
</style>
</head>
<body>
<center>
<p>Daftar Wiraniaga</p>
<table border="1" cellpadding="10" cellspacing="0.5" width="50%" cellpadding="4">
<tr>
<th colspan="2" rowspan="2">WIRANIAGA</th>
<th colspan="3">KOTA</th>
</tr>
<tr>
<th>Pati</th>
<th>Kudus</th>
<th>Solo</th>
</tr>
<tr>
<th rowspan="2">Jenis Kelamin</th>
<th>Pria</th>
<td align="center">30 orang</td>
<td align="center">20 orang</td>
<td align="center">30 orang</td>
</tr>
<tr>
<th>Wanita</th>
<td align="center">30 orang</td>
<td align="center">20 orang</td>
<td align="center">30 orang</td>
</tr>
</table>
</center>
</body>
</html>
Hasil :
3. Lat14Tabel.html
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="shorcut icon" href="../img/Logo.ico">
<style type="text/css">
body{
background-color: cyan;
}
table{
margin-top: 250px;
font-size: 30px;
}
</style>
</head>
<body>
<center>
<table border="1" cellspacing="0.5" cellpadding="4">
<tr>
<th align="left" width="200px">Nama</th>
<th align="left" width="250px">Usia</th>
</tr>
<tr>
<td>Adji</td>
<td>25</td>
</tr>
<tr>
<td>Azka</td>
<td>27</td>
</tr>
</table>
</center>
</body>
</html>
Hasil :
4. Lat15Tabel.html
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="shorcut icon" href="../img/Logo.ico">
<style type="text/css">
body{
background-color: cyan;
}
table{
margin-top: 200px;
font-size: 30px;
}
</style>
</head>
<body>
<center>
<table border="1" cellspacing="0.5" width="40%" cellpadding="4">
<tr>
<th width="250px" align="center" height="80" valign="bottom">Nama</th>
<th width="300px" align="center" height="80" valign="bottom">Usia</th>
</tr>
<tr>
<td height="80px" valign="top">Adji</td>
<td height="80px" valign="top">25</td>
</tr>
<tr>
<td height="80px" valign="top">Azka</td>
<td height="80px" valign="top">27</td>
</tr>
</table>
</center>
</body>
</html>
Hasil :
5. Lat16Tabel.html
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="shorcut icon" href="../img/Logo.ico">
<style type="text/css">
body{
background-color: cyan;
}
table {
margin-top: 200px;
font-size: 35px;
}
</style>
</head>
<body>
<center>
<table border="1" width="35%" cellpadding="4">
<tr>
<th rowspan="2" bgcolor="pink">No</th><th rowspan="2" bgcolor="#00BFFF">Nama</th><th colspan="5" bgcolor="#ADFF2F">Pertemuan</th>
</tr>
<tr align="center" bgcolor="lavender">
<th>1</th><th>2</th><th>3</th><th>4</th><th>5</th>
</tr>
<tr align="center">
<td>1</td><td>Neymar</td><td>✔</td><td>✔</td><td>✔</td><td>✔</td><td>s</td>
</tr>
<tr align="center">
<td>2</td><td>Ronaldo</td><td>a</td><td>✔</td><td>i</td><td>s</td><td>✔</td>
</tr>
<tr align="center">
<td>3</td><td>Bale</td><td>a</td><td>✔</td><td>✔</td><td>✔</td><td>✔</td>
</tr>
</table>
</center>
</body>
</html>
Hasil :
6. Lat17TabelTanah.html
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="shorcut icon" href="../img/Logo.ico">
<style type="text/css">
body {background-color: cyan;}
table {margin-top: 250px; font-size: 25px;}
</style>
</head>
<body>
<center>
<table border="1" cellspacing="0.5" width="50%" cellpadding="4">
<tr>
<th scope="col">Nama Perusahaan</th>
<th scope="col">Tipe / Luas Tanah (m<sup>2</sup>)</th>
</tr>
<tr>
<td rowspan="4" align="center">Griya Indah Permai</td>
<td align="center">21 / 60</td>
</tr>
<tr>
<td align="center">36 / 90</td>
</tr>
<tr>
<td align="center">45 / 120</td>
</tr>
<tr>
<td align="center">54 / 120</td>
</tr>
</table>
</center>
</body>
</html>
Hasil :
7. Lat18TabelTanah2.html
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="shorcut icon" href="../img/Logo.ico">
<style type="text/css">
body {
background-color: cyan;
}
table {
margin-top: 300px;
font-size: 25px;
}
</style>
</head>
<body>
<center>
<table border="1" cellspacing="0.5" width="700" cellpadding="4">
<tr>
<th scope="col">Perumahan</th>
<th colspan="4" scope="col">Tipe / Luas Tanah (m<sup>2</sup>)</th>
</tr>
<tr align="center">
<td>Griya Indah Permai</td>
<td>21/60</td>
<td>36/90</td>
<td>45/120</td>
<td>54/120</td>
</tr>
</table>
</center>
</body>
</html>
Hasil :
8. Lat19TabelBenua.html
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="shorcut icon" href="../img/Logo.ico">
<style type="text/css">
body {background-color: cyan;}
table {margin-top: 250px; font-size: 20px;}
</style>
</head>
<body>
<center>
<table border="1" cellspacing="0.5" cellpadding="4">
<tr>
<th width="300" bgcolor="grey">Benua</th>
<th width="300" bgcolor="grey"colspan="5">Negara</th>
</tr>
<tr>
<td rowspan="5" valign="top">ASIA</td>
</tr>
<tr>
<td style="background: linear-gradient(200deg,white,white,green,green)">Arab Saudi</td>
</tr>
<tr>
<td style="background: linear-gradient(200deg,white,white,red,red)">Indonesia</td>
</tr>
<tr>
<td style="background: linear-gradient(200deg,orange,orange,white,white,green,green)">India</td>
</tr>
<tr>
<td style="background: linear-gradient(200deg,white,white,red,red,white)">Singapura</td>
</tr>
<tr>
<td rowspan="5" valign="top">EROPA</td>
</tr>
<tr>
<td style="background: linear-gradient(200deg,blue,blue,white,white,red,red)">Belanda</td>
</tr>
<tr>
<td style="background: linear-gradient(200deg,red,red,white,white,green,green)">Italia</td>
</tr>
<tr>
<td style="background: linear-gradient(200deg,black,black,red,red,yellow,yellow)">Jerman</td>
</tr>
<tr>
<td style="background: linear-gradient(200deg,white,white,red,red,white,white)">Inggris</td>
</tr>
</table>
</center>
</body>
</html>
Hasil :
9. Lat20TabelBenua2.html
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="shorcut icon" href="../img/Logo.ico">
<style type="text/css">
body {
background-color: cyan;
}
table {
margin-top: 250px;
font-size: 20px;
}
</style>
</head>
<body>
<center>
<table border="1" cellspacing="0.5" cellpadding="4">
<tr align="left">
<th width="150">Benua</th>
<th width="250" colspan="2">EROPA</th>
<th width="250" colspan="2">ASIA</th>
</tr>
<tr align="left">
<th>Negara</th>
<td>Belanda</td>
<td>Italia</td>
<td>Indonesia</td>
<td>Singapura</td>
</tr>
</table>
</center>
</body>
</html>
Hasil :
10. Lat21TabelBuah.html
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="shorcut icon" href="../img/Logo.ico">
<style type="text/css">
body {
background-color: cyan;
}
table {
margin-top: 250px;
font-size: 30px;
}
</style>
</head>
<body>
<center>
<table border="1" width="50%" cellspacing="0.5" height="200" cellpadding="6">
<tr>
<td>apel</td><td rowspan="2"><br>jeruk</td><td>mangga</td>
</tr>
<tr>
<td>pisang</td><td>nanas</td>
</tr>
<tr>
<td>leci</td><td></td><td></td>
</tr>
</table>
</center>
</body>
</html>
Hasil :
0 Comments