TABEL DAN PUNGSI TAG NYA
Tabel
Assalamualaikum wr'wb
Hai teman teman apa kabar nya semoga kalian baik baik saja,pada kesempatan kali ini saya akan kembali memberi penjelasan tentang elemen elemen dan tag pada html.
Pada kesempatan kali ini kita akan membahas mengenai tabel dalem html.
Dalam kesempatan kali ini saya tida akan terlalu banyak memberi penjelasan mengenai tabel dalam html tetapi saya akan langsung mendemonstrasikan
Macam macam pembuatan tabel dalam html
Jika teman teman ingin lebih mengetahuinya penjelasan lebih detail nya silahkan kunjungi situs resmi w3school.com
Baiklah kita mulai saja ke pembuatan source code nya:
√Tugas 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>website pertamaku</title>
<style>
#info{
font-size: 30px;
color:grey;
box-shadow: 5px 5px 5px;
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
padding: 10px;
background: #fff;
}
#abc{
color:grey;
font-size:40px;
</style>
</head>
<body>
<div id="info">
<i id="abc"></i>
Tabel Anggota
</div>
<br>
<center />
<table width="1000" border ="1">
<tr>
<th colspan="4" bgcolor="#1e90ff">ANGGOTA GRUP KELAS XIRPL3
</th>
</tr>
<tr>
<td width="20px" bgcolor="yellow">
NO
</td>
<td bgcolor="yellow">
NAMA
</td>
<td width="20px" bgcolor="yellow">
L/P
</td>
<td bgcolor="yellow">
ALAMAT BLOG
</td>
</tr>
<tr>
<td bgcolor>
1
</td>
<td bgcolor>
ADI TAJUDIN
</td>
<td bgcolor>
L
</td>
<td bgcolor>
https://aditajudin-pelajarperdulicovid19.blogspot.com/2020/03/pelajar-perduli-covid-19.html?m=1
</td>
</tr>
<tr>
<td bgcolor>
2
</td>
<td bgcolor>
AHMAD DIMYATI
</td>
<td bgcolor>
L
</td>
<td bgcolor>
https://ahmadd-pelajarpedulicovid19.blogspot.com/?m=1
</td>
</tr>
<tr>
<td bgcolor>
3
</td>
<td bgcolor>
EKA HERMAWAN
</td>
<td bgcolor>
L
</td>
<td bgcolor>
https://ekahermawan-pelajarpedulicovid19.blogspot.com/
</td>
</tr>
<tr>
<td bgcolor>
4
</td>
<td bgcolor>
RIAN ZAENAL
</td>
<td bgcolor>
L
</td>
<td bgcolor>
https://r14nz-pelajarperdulicovid19.blogspot.com/?m=1
</td>
</tr>
<tr>
<td bgcolor>
5
</td>
<td bgcolor>
MUHAMMAD RADZU
</td>
<td bgcolor=>
L
</td>
<td bgcolor=>
Lhttps://muhamadraju-pedulicovid19.blogspot.com/
</td>
</tr>
<tr>
<td bgcolor>
6
</td>
<td bgcolor>
DVID SEPTIAN
</td>
<td bgcolor>
L
</td>
<td bgcolor>
https://davidseptian-pelajarperdulicovid19.blogspot.com/2020/03/pelajar-perduli-covid19.html?m=1
</td>
</tr>
<tr>
<td bgcolor>
7
</td>
<td bgcolor>
GILANG MARDIANSYAH
</td>
<td bgcolor>
L
</td>
<td bgcolor>
https://gilang-pelajarperdulicovid19.blogspot.com/
</td>
</tr>
<tr>
<td bgcolor>
8
</td>
<td bgcolor>
MEILYNA AMELIA
</td>
<td bgcolor>
P
</td>
<td bgcolor>
https://meilynaamellia-pelajarperdulicovid19.blogspot.com
</td>
</tr>
<tr>
<td bgcolor>
9
</td>
<td bgcolor>
HANA AZAHRA
</td>
<td bgcolor>
P
</td>
<td bgcolor>
http://hanazhra-pelajarpedulicovid19.blogspot.com/
</td>
</tr>
<tr>
<td bgcolor>
10
</td>
<td bgcolor>
SUTIANI KURNIA
</td>
<td bgcolor>
P
</td>
<td bgcolor>
https://sutiani-daringpbo.blogspot.com/2020/05/tugas-daring-materi-3-html-tag-element_10.html?m=1
</td>
</tr>
</table>
© Adi Tajudin
</body>
</html>
Jika di jalankan dengan web browser maka tampilan nya akan seperti di bawah ini
Baik selanjutnya kita melanjutkan ke materi kedua
√Tugas 2
<!DOCTYPE html>
<html>
<head>
<title>tabel warna</title>
<style>
.footer {
background: #EEE;
height: 100px;
width: 100%;
text-align: center;
color: #666;
padding: 10px 10px;
}
#info{
font-size: 30px;
color:grey;
box-shadow: 5px 5px 5px;
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
padding: 10px;
background: #fff;
}
#abc{
color:grey;
font-size:40px;
</style>
</head>
<body>
<div id="info">
<i id="abc"></i>
Tabel Warna
</div>
<br>
<center />
<table border="1" cellpadding="50">
<tr>
<td style="background-color: red"></td>
<td style="background-color: blue"></td>
<td style="background-color: blue"></td>
<td style="background-color: red"></td>
</tr>
<tr>
<td style="background-color: blue"></td>
<td colspan="2" rowspan="2"align="center">♥SMK 4 LPPM RI PADALARANG♥</td>
<td style="background-color: blue"></td>
</tr>
<tr>
<td style="background-color: blue"></td>
<td style="background-color: blue"></td>
</tr>
<tr>
<td style="background-color: red"></td>
<td style="background-color: blue"></td>
<td style="background-color: blue"></td>
<td style="background-color: red"></td>
</tr>
</table>
<br>
<div class="footer">
<br/>
<div>
© Adi Tajudin
</div>
</div>
</body>
</html>
Jika di jalankan dengan web browser maka tampilan nya akan seperti gambar di bawah ini
Baiklah selanjutnya kita akan membuat source code tugas terakhir kita
√Tugas 3
<!DOCTYPE html>
<html>
<head>
<title>table</title>
<style>
#info{
font-size: 30px;
color:grey;
box-shadow: 5px 5px 5px;
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
padding: 10px;
background: #fff;
}
#abc{
color:grey;
font-size:40px;
</style>
</head>
<body>
<div id="info">
<i id="abc"></i>
I♥Indonesia
</div>
<br>
<center />
<table border="1" cellpadding="50" style="width: 50%">
<tr style="background-color: red">
<td></td>
</tr>
<tr style="background-color: white">
<td></td>
</tr>
</table>
<h2>♥AKU CINTA INDONESIA♥</h2>
</div>
</body>
</html>
Mari kita jalankan dengan web browser yang mana tampilan nya akan muncul seperti pada gambar di bawah
Demikian pertemuan kita kali ini semoga ada guna dan manfaatnya bagi kita semua,jika diantara teman teman ada yg ingin meng copy source code saya semoga bisa menghargai karya hak cipta seseorang dengan mencantumkan darimaba sumber itu di dapat
Wassalamu'alaikum
See you next time❤
Penulis:
Mantap..
BalasHapus