Pembuatan Tabel dan Layout Web - Praktikum 3

Ilham Prabu Zaky Setiawan
XI RPL 2
Absen 15
SMKN 4 Bandung

Assalamualaikum wr.wb.
Pada kesempatan kali ini saya akan melanjutkan materi pembahasan tentang Pengenalan Dasar HTML bagian ke-tiganya, melanjutkan bagian kedua 3 hari yang lalu,
Pada materi kali ini kita akan membahas berbagai tag html lagi beserta fungsi dan penggunaannya, begitupula dengan cara penulisannya.

Yang akan kita pelajari pada  materi ini merupakan tentang "Pembuatan Tabel, Table Spanning dan juga Layout Web", dengan menggunakan tag-tag html keren yang lain lho.
Oke tanpa berlama-lama lagi mari kita lanjut ke pembahasan materinya, pertama kita disini akan menelaah berbagai tag html lagi nih, untuk lebih jelasnya mari kita bahas secara seksama.

A. Pembuatan Tabel dan Tabel menggunakan Spanning (merge)

Untuk membuat table itu sebenarnya cukup mudah lho, hal pertama yang harus kalian tulis adalah tag <table></table>. Tag table berfungsi untuk membuat table, namun sampai sini tablenya belum muncul. Ada elemen tambahan yang nantinya akan kalian tulis seperti misalnya membuat baris dan kolom. Untuk membuat baris kalian harus menuliskan tag <tr></tr>. Dan untuk membuat kolom kalian bisa menggunakan tag <td></td>. Dan sekarang kita bisa coba praktekan dengan codingan lengkapnya. Kalian bisa ikuti contoh code dibawah ini.

Source code :
 <!DOCTYPE html>  
 <html>  
    <head>  
      <title>Tabel, by Ilham Prabu Zaky S - XI RPL 2</title>  
    </head>  
    <body>  
      <table width="80%" border="2" cellspacing="0" cellpadding="0" color="red">  
         <tr>  
           <td>baris 1 kolom 1</td>  
           <td>baris 1 kolom 2</td>  
         </tr>  
         <tr>  
           <td colspan="2">baris 2 kolom 1</td>  
         </tr>  
         <tr>  
           <td rowspan="2"> baris 3 kolom 1</td>  
           <td>baris 3, kolom 2</td>  
         </tr>  
      </table>  
    </body>  
 </html>  
Result :


Seperti yang telah tertera diatas, dengan menggunakan elemen tabel dan attribut pembangun lainnya kita dapat membuat sebuah baris beserta kolom, bukan itu saja kita juga dapat mengatur posisi cells juga. Nah sekarang saya akan memberi tahu macam-macam attribut yang ada dalam elemen tag table ini.

Attribut Table <table></table>
a. width = untuk mengatur panjang(lebar table (px/%))
b. height = untuk mengatur panjang(panjang table (px/%))
c. border = untuk mengatur ketebalan sisi luar / garis tepi table (px)
d. cellspacing = untuk mengatur spasi antar sel(px)
e. cellpadding = untuk mengatur spasi di dalam sel(px)
f. align 
= untuk menyesuaikan peletakan (left|center|right)
g. bgcolor = untuk mengatur warna latar belakang (table)

Attribut Table Row <tr></tr>
a. align = untuk mengatur perataan sebaris sel secara horizontal (left|center|right)
b. valign = untuk mengatur perataan sebaris sel secara vertikal (top|middle|bottom)
c. bgcolor = untuk mengatur warna latar belakang (baris)

Pembuatan table dengan spanning (merge) 
Nah kali ini kita akan membuat table juga tetapi dengan teknik spanning. Wiih kedengerannya keren tuh? Yap benar sekali dalam pembuatan table dengan trik ini kita akan menjadi lebih mudah dalam pembuatan tabel untuk tingkat lanjut seperti pada contoh pertama diatas disana kita menggunakan attribut tersebut.
Dalam pembuatan table ini kita akan menggunakan attribut tambahan yang tadi  pada tag tablenya / subtable nya. Berikut attributnya dan penjelasannya :

Attribut Colspan dan Rowspan

Colspan dan rowspan adalah html attribute yang digunakan untuk memperlebar atau menggabungkan beberapa kolom atau row menjadi satu, sehingga satu unit kolom atau row ini menjadi lebih lebar
a. colspan = tag table yang memiliki atribut colspan, akan membuat sel tabel bersatu dengan kolom disebelahnya.
b. rowspan = tag table yang memiliki atribut rowspan, akan membuat sel tabel bersatu dengan kolom dibawah.

Agar lebih jelas lagi  dan biar cepat paham mari langsung saja kita perhatikan dan simak contoh-contohnya  dibawah ini.

Source code :
  <!DOCTYPE html>  
 <html>  
    <head>  
      <title>PENGGUNAAN ALIGN, by Ilham Prabu Zaky S - XI RPL 2</title>  
    </head>  
    <body>  
      <table border="9" bgcolor="moccasin">  
         <caption>Daftar Wiraniaga</caption>  
         <tr>  
           <th colspan="2" rowspan="2">WIRANIAGA</th>  
           <th colspan="3" bgcolor="lightsalmon">KOTA</th>  
         </tr>  
         <tr>  
           <th>Pati</th> <th>Kudus</th> <th>Solo</th>  
         </tr>  
         <tr>  
           <th rowspan="2" bgcolor="pink">Jenis Kelamin</th>  
           <th>Pria</th>  
              <td align="right">30 orang</td>  
              <td align="right">20 orang</td>  
              <td align="right">30 orang</td>  
         </tr>  
         <tr>  
           <th>Wanita</th>  
              <td align="right">20 orang</td>  
              <td align="right">8 orang</td>  
              <td align="right">18 orang</td>  
         </tr>  
      </table>  
    </body>  
 </html>  
Result :












Source code :
 <!DOCTYPE html>  
 <html>  
    <head>  
      <title>TABLE PEMAIN BOLA, by Ilham Prabu Zaky S - XI RPL 2</title>  
    </head>  
    <body>  
      <table border="3" cellpadding="4">  
         <tr>  
           <th colspan="1" rowspan="2" bgcolor="tomato">NO</th>  
           <th colspan="2" rowspan="2" bgcolor="lightskyblue">NAMA</th>  
           <th colspan="5" bgcolor="lime">Pertemuan</th>  
         </tr>  
         <tr>  
           <th bgcolor="aqua">1</th> <th bgcolor="aqua">2</th> <th bgcolor="aqua">3</th> <th bgcolor="aqua">4</th> <th bgcolor="aqua">5</th>  
         </tr>  
         <tr>  
           <th>1</th> <th colspan="2">Neymar</th> <th>✓</th> <th>✓</th> <th>✓</th> <th>✓</th> <th>s</th>  
         </tr>  
         <tr>  
           <th>2</th> <th colspan="2">Cristiano</th> <th>a</th> <th>✓</th> <th>i</th> <th>s</th> <th>✓</th>  
         </tr>  
         <tr>  
           <th>3</th> <th colspan="2">Bale</th> <th>a</th> <th>✓</th> <th>✓</th> <th>✓</th> <th>✓</th>  
         </tr>  
      </table>  
    </body>  
 </html>  
Result :











Source code :
 <!DOCTYPE html>  
 <html>  
    <head>  
      <title>Latihan Table Buah, by Ilham Prabu Zaky S - XI RPL 2</title>  
    </head>  
    <body>  
      <table border="1" cellpading="0" width="40%">  
         <tr>  
           <td align="left" colspan="5">APEL</td>  
           <td align="left" rowspan="2">JERUK</td>  
           <td>MANGGA</td>  
         </tr>  
         <tr>  
           <td align="left" colspan="5">PISANG</td>  
           <td>NANAS</td>  
         </tr>  
         <tr>  
           <td align="left" colspan=5>LECI</td>  
           <td align="left" colspan="1"></td>  
           <td align="left" colspan="1"></td>  
         </tr>  
      </table>  
    </body>  
 </html>  
Result :












Nah pembahasan untuk pembuatan tabel dengan spadding sudah beres nih, gimana teman-teman? sudah lumayan paham bukan? agar lebih mengasah kepahamannya mari kita lanjut ke tahap selanjutnya yaitu kita akan membuat Layout Web, okey? langsung saja ke pembahasannya.

B. Membuat Layout Web

Dalam membuat layout web kita akan menekankan terhadap fungsi layouting yang telah kita pelajari pada tabel sebelumnya, dengan lebih dikembangkan lagi dalam pemakaian attribut-attributnya , nah sudah penasaran bukan? oke mari langsung saja ke contoh dan hasilnya biar teman-teman juga bisa langsung mencobanya.


1. Membuat bagian Top Layout Web

Source code :
 <!DOCTYPE html>  
 <html>  
    <head>  
      <title>TOP INDEX, by Ilham Prabu Zaky S - XI RPL 2</title>  
    </head>  
    <body>  
      <table width="800px" height="542px" border="0" align="center">  
         <tr>  
           <td height="23" align="center" bgcolor="bisque">  
              <strong><font size="+5" color="crimson">Banner atau Iklan</font></strong>  
           </td>  
         </tr>  
         <tr>  
           <td height="27" align="center" bgcolor="khaki">  
              <font color="dimgray">Daftar isi atau navigasi</font>  
           </td>  
         </tr>  
         <tr>  
           <td height="23" align="center" bgcolor="palegreen">  
              <p><font color="peru">Body atau content(isi)</font></p>  
              <p><font color="salmon">Body atau content(isi)</font></p>  
              <p><font color="tan">Body atau content(isi)</font></p>  
              <p><font color="chocolate">Body atau content(isi)</font></p>  
           </td>  
         </tr>  
         <tr>  
           <td height="23" align="center" bgcolor="mistyrose">  
              <font color="darkgray">Info tambahan atau lain-lain</font>  
           </td>  
         </tr>  
      </table>  
    </body>  
 </html>  
Result :





2. Membuat bagian Left Layout Web

Source code :
 <!DOCTYPE html>  
 <html>  
    <head>  
      <title>LEFT INDEX, by Ilham Prabu Zaky S - XI RPL 2</title>  
    </head>  
    <body>  
      <font face="Sue ellen fransisco">  
         <table width="800px" height="647" border="0" align="center" cellspacing="1">  
           <tr>  
              <th width="160px" rowspan="3" valign="top" background="IMG/white-pattern01.jpg">  
              <p><a href="TopIndex.html">Home </a></p>  
              <p>Profile</p>  
              <p>About Us</p>  
              <p>Blog</p>  
              <p>Contact Us</p>  
              <th width="827" height="223" align="center" background="IMG/white-pattern01.jpg">  
              <strong><font color="ghostwhite" size="+4">Aesthetic Shop</font></strong></th></th>  
           </tr>  
           <tr>  
              <td height="176" align="center" valign="top" bgcolor="papayawhip"> <font size="+2">  
                <p>Selamat datang di website kami, penjualan produk online ini adalah yang pertama di kota kami. Kualitas dan harga dapat dipercaya langsung saja pesan dan menjadi pelanggan kami</p></font></td>  
           </tr>  
           <tr>  
        <td height="30" align="center" bgcolor="thistle">  
                <font size="+2">profilkami.com</font></td>  
           </tr>  
         </table>  
      </font>  
    </body>  
 </html>  
Result :


















3. Membuat bagian Split Layout Web

Source code :
  <!DOCTYPE html>  
 <html>  
    <head>  
      <title>LAYOUT SPLIT, by Ilham Prabu Zaky S - XI RPL 2</title>  
    </head>  
    <body bgcolor="moccasin">  
      <font face="stabillo">  
         <table width="800px" height="612px" border="0" align="center">  
         <tr>  
           <td width="15%" rowspan="2" align="center" background="IMG/code.gif">  
           <strong>Daftar Isi</strong></td>  
           <td width="67%" height="90px" align="center" bgcolor="khaki">  
              <font size="+4"><strong>Planteria</strong></font>  
           </td>  
           <td bgcolor="khaki"> <img src="IMG/plant-teratai.jpg" height="120px" alt="Tumbuhan teratai">  
           </td>  
           <td width="18%" rowspan="2" align="center" background="IMG/code.gif"><strong>Daftar Isi</strong> </td>  
         </tr>  
         <tr>  
           <td height="406px" align="center" bgcolor="lightsteelblue" colspan="2">  
              <p><font color="salmon">Body atau content(isi)</font></p>  
              <p><font color="crimson">Body atau content(isi)</font></p>  
              <p><font color="lightsalmon">Body atau content(isi)</font></p>  
              <p><font color="salmon">Body atau content(isi)</font></p>  
           </td>  
         </tr>  
         <tr bgcolor="khaki">  
           <td height="23px" colspan="4" height="25px" align="center">Lain-lain</td>  
         </tr>  
         </table>  
      </font>  
    </body>  
 </html>  
Result :





























Nah, jadi akhirnya jadi juga nih Layout Web kita teman-teman !, kita telah berhasil menyelesaikannya, kalian juga bisa langsung membuatnya dengan tag-tag yang telah kita pelajari tadi sama-sama, dan untuk tag dan attribut lainnya bisa anda cari di w3schools tempat saya belajar bermacam-macam tag,  untuk link nya silahkan klik disini.

Alhamdulillah telah selesai tugas dan pembahasan kali ini, semoga dapat dimengerti dan dipahami, mohon maaf sebesar-besarnya atas segala kesalahan yang telah saya buat, dan saya ucapkan terimakasih atas kunjungannya.

Wassalamualaikum wr.wb

0 Response to "Pembuatan Tabel dan Layout Web - Praktikum 3 "

Post a Comment

Postingan Terbaru

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel