CARA MEMBUAT TABEL PADA HTML
oke guys !!!
pada pertemuan kali ini saya ingin menunjukkan kepada kalian bagaimanasih cara membuat tabel pada html, ntah itu tabel bersarang ataupun tabel lainnya, oke guys langsung simak saja cara membuatnya.
☺☺☺
1.membuat tabel sederhana
pertama,seperti biasanya kalian buka apk web editor kalian ntah itu notepad++,atau sublime, disini saya memakai apk sublime karena menurut saya ini enak,wkwkwk.
setalah kalian buka kalian tinggal tulis aja skrip seperti gambar di bawah ini👇👇
CONTOH TABEL SEDERHANA
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title> membuat tabel </title>
</head>
<body>
<div class="judul">
<center><h1>JADWAL KEGITAN ORGANISASI</h1></center>
</div>
<table border="5" cellpadding="15" cellspacing="0" align="center" frame="box">
<thead>
<th>senin</th>
<th colspan="2">selasa</th>
<th>rabu</th>
</thead>
<tbody>
<tr>
<td><center>gilang<center></td>
<td colspan="2">farid,rahel & pandu</td>
<td><center>arda<center></td>
</tr>
<tr>
<td rowspan="2">jonathan & andrea, sabrina</td>
<td align="right">sabrina</td>
<td align="right">alya</td>
<td align="right">nanda</td>
</tr>
<tr>
<td align="left">raffa</td>
<td align="left">adhi</td>
<td align="left">nopal</td>
</tr>
<tr>
<td><center>dimas<center></td>
<td><center>adnan<center></td>
<td><center>farhan<center></td>
<td><center>dwi septian<center></td>
</tr>
<tr>
<td><center>eka<center></td>
<td><center>asri<center></td>
<td><center>zainal<center></td>
<td><center>andrew<center></td>
</tr>
</tbody>
</table>
disini saya membuat jadwal kegiatan organisasi, sebenarnya ini saya asal buat aja,hanya sebagai contoh, nah di dalam skrip ini ada kata;
#border:garis pinggir tabel
#align:posisi tesk atau table(center,left,right)
#valign:posisi teks atau table(bottom,middle,top)
#cellpadding:enter antar cell
#cellspacing:spasi antar cell
#rowspan:merger bariw
#colspan:merger kolom
untuk menambahkan background sama saja kalian bisa lihat di postingan aku sebelumnya yg berjudul "cara membuat daftar menu makanan menggunakan apk sublime teks
 |
| HASILNYA |
2.membuat tabel bersarang
nah tabel bersarang ini sedikit berbeda dengan contoh tabel diatas, yg bikin beda itu bisa kalian lihat sendri pada gambar di bawah ini.
 |
| CONTOH TABEL BERSARANG |
nah kalian bisa liat sendiri kan perbedaaan nya gimana,oke kita langsung liat aja skrip nya di bawah ini,
<!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css">
body {background-color:pink;}
small {color:blue;}
p {color:red;}
</style>
<body>
<center><h1>TABEL BERSARANG</h1></center>
<table border="5">
<tr>
<td><center><b>introduce my self</b></center></td>
<td><center><b>tentang saya</b></center></td>
</tr>
<tr>
<td>
<p><b><i>Profil</i> :</b> <small>nama ku adalah gilang januar,
kalian bisa memanggilku gilang,atau nama kerenku yaitu sipit</small></p>
<p><b><i>Umur</i> :</b> <small>16 tahun</small></p>
<p><b><i>Kontak</i> :</b> <small>085765324577</small></p>
<p><b><i>Status</i> :</b> <small>pelajar</small></p>
</td>
<td> <b><small>Aku bersekolah di SMKN 2 CIKARANG BARAT, bukan hanya seorang pelajar aku juga adalah seorang youtuber, nama channel ku SIPIT5505, aku bermulai di youtube sudah sejak aku SMP,sekarang akun youtube ku sudah mencapai 5000-an subcriber, ini juga berkat kalian para subriber-ku,terimakasih ya atas kesetian kalian dalam membangun channel ku ini.</small></b>
</td>
</tr>
<tr>
<td>Tertanda <b>Gilangjanuar</b></td>
<td><b><i>QUOTES</i> :</b> <small>"biarpun kamu menghadapi berbagai masalah dalam kehidupan tetap hadapi masalah itu dengan senyuman, sesungguh nya itu akan membuat-mu lebih baik"</small></td>
</tr>
</table>
</body>
</html>
TABEL BERSARANG
☺☺☺
nah guys,mungkin segitu saja tutorial pembuatan tabel dari saya,kurang lebihnya saya mohon maaf
assalamualaikum wr.wb
thank you guys!!!
☺☺☺
Komentar
Posting Komentar