Format Table 2 Dalam HTML (Pertemuan 6)

Assalamu'alaikum Wr. Wb

Hello Guys, bertemu lagi dengan saya Salman Fauzan dipostingan kali ini. Kali ini kita masih melanjutkan pembahasan kita mengenai HTML. Kali ini kita juga masih membahas seputar Table di HTML. Meskipun kita menggunakan tabel seperti minggu kemarin, sekarang tabel yang kita buat penuh dengan warna yang dapat membuat web kita lebih menarik menggunakan tabel seperti ini. Langsung saja kita mulai pembahasannya.

1. Top Index
Top Index adalah sebuah tabel yang menampilkan Index atau Daftar isi pada kolom bagian bawah setelah Banner atau Iklan yang akan ditampilkan oleh kita. Tentu saja kita dapat mengedit tampilannya dengan sesuai selera kita. Untuk Codingan dari tabel diatas adalah seperti ini :

<html>
 <head>
   <title> Salman Fauzan Fahri Aulia XI - RPL 3 Top Index </title>
  </head>
   <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<form id = "form1" name = "form1" method = "post" action = "" >
     <table width = "800" height = "542" border = "1" align = "center" >
<tr>
      <td height = "23" align = "center" border color = "#FFFFF" bgcolor = "FFF00" >
      <strong><font size = "+5" > Banner atau Iklan </font></strong>
      </td>
     </tr>
<tr>
       <td height="27" align="center" bgcolor="#ffcccc">
        <font color="#ff0000">Daftar isi atau navigasi</font>
       </td>
     </tr>
<tr>
      <td height = "457" align = "center" bgcolor = "FF66CC">
      <p>
Body atau Contents(isi) </p>
<p>
<font color = "006600" > Body atau Contents(isi)</font></p>
<p>
<font color = "CC0000" > Body atau Contents(isi)</font></p>
<p>
<font color = "FFFF00" > Body atau Contents(isi)</font></p>
<p>
<font color = "FF6633" > Body atau Contents(isi)</font></p>
</tr>
<tr>
       <td height = "23" align = "center" bgcolor = "CCFF99" >
       <font color = "#9966CC" > Info Tambahan atau Lain-Lain </font>
       </td>
      </tr>
</table>
</form>
</body>
</html>

Hasilnya akan menjadi seperti ini :

2. Bottom Index
Bottom Index adalah sebuah tabel yang menampilkan Index atau Daftar isi pada kolom bagian bawah setelah tabel isi atau content yang telah kita buat. Untuk Codingan dari tabel diatas adalah seperti ini :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia XI - RPL 3 Bottom Index </title>
 <head>
  <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<form id = "form1" name = "form1" method ="post" action = "" >
    <table width = "800" height = "542" border = "1" align = "center" >
<tr>
     <td height = "23" align = "center" bordercolor = "#FFFFFF" bgcolor = "#FFFF00" >
     <strong><font size = "+5" > Banner / Judul </font></strong></td>
    </tr>
<tr>
     <td height = "457" align = "center" bgcolor = "#CCCCCC" >
     <p>
<font color = "#006600" > Body atau Contents(Isi) </font> </p>
<p>
<font color = "#CC0000" > Body atau Contents(Isi) </font> </p>
<p>
<font color = "#FFFF00" > Body atau Contents(Isi) </font> </p>
<p>
<font color = "#990033" > Body atau Contents(Isi) </font> </p>
</td>
    </tr>
<tr>
     <td height = "23" align = "center" bgcolor = "#CCFF00" ><font color = "#FF0000" >
     <strong><font size = "+2" > Daftar Isi atau Navigasi </font> </strong> </font>
     </td>
    </tr>
</table>
</form>
</body>
</html>

Hasilnya akan menjadi seperti ini :

3. Layout Split
Layout Split adalah sebuah tabel yang menampilkan Index atau daftar isi pada kolom kanan dan kiri darir tabel isi atau content yang telah kita buat. Untuk Codingan dari tabel diatas adalah seperti ini :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia XI - RPL 3 Left </title>
 </head>
  <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<form id = "form1" name = "form1" method = "post" action = "" >
    <table width = "800" height = "512" border = "1" align = "center" >
<tr>
     <td width = "15%" rowspan = "2" align = "center" bgcolor = "#99cc99" >
     <strong> Daftar Isi </strong></td>
     <td width = "67%" height = "23" align = "Center" bgcolor = "#FFCCFF" >
     <font size = "+3" ><strong> Banner / Judul </strong </font> </td>
     <td width = "18%" rowspan = "2" align = "center" bgcolor = "#99cc99" >
     <strong> Daftar Isi </strong> </td>
    </tr>
<tr>
     <td height = "456" align = "center" bgcolor = "#CCCCCC" >
     <p>
Body atau Contents(isi) </[p>
     <p>
<font color = "#006600" > Body atau Contents (isi) </font> </p>
<p>
<font color = "#CC0000" > Body atau Contents (isi) </font> </p>
<p>
<font color = "#FFFF00" > Body atau Contents (isi) </font> </p>
<p>
<font color = "#990033" > Body atau Contents (isi) </font> </p>
</td>
    </tr>
<tr bgcolor = "#FF99FF" >
     <td height = "23" colspan = "3" align = "center" > Lain-lain </td>
    </tr>
</table>
</form>
</body>
</html>

Hasilnya akan menjadi seperti ini :

4. Left Index
Left Index adalah salah satu tampilan tabel yang sangat cocok menurut saya untuk sebuah website artikel karena tampilan yang menarik yang berbeda dari ketiga bentuk tabel diatas. Untuk Codingan dari tabel diatas adalah seperti ini :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia XI - RPL 3 Left Colour </title>
 </head>
  <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<form id = "form1" name = "form1" method = "post" action = "" >
    <table width = "800" height = "447" border = "1" align = "center" cellspacing = "1" >
<tr>
     <th width = "160" rowspan = "3" valign = "top" bgcolor = "#993366" >
     <p>
Home </p>
<p>
Profile </p>
<p>
About Us </p>
<p>
Blog </p>
<p>
Contact Us </p>
</th>
     <th width = "627" height = "23" align = "center" bgcolor = "#FFFF99" >
     <strong><font color = "#CCCCCC" size = "+4" > Electronic Shop </font></strong>
     </th>
    </tr>
<tr>
     <td height = "176" align = "center" valign = "top" bgcolor = "#FFFF99" >
     <p>
Selamat datang di web kami, penualan produk online ini adalah yang pertama di kota kami,
     kualitas dan harga dapat dipercaya langsung saja pesan dan menjadi langganan kami.
     </p>
</td>
    </tr>
<tr>
     <td height = "30" align = "center" bgcolor = "#FFFF99" >
     <font size = "+2" > Profilkami.com </font>
     </td>
    </tr>
</table>
</form>
</body>
</html>

Hasilnya akan menjadi seperti ini :

Saya juga membuat contoh artikel yang menggunakan Left Index, kalian juga dapat menambahkan hyperlink pada kolom fitur-fiture tabel diatas seperti home, contact us dan lain-lain, untuk cara menambahkan hyperlink, kalian dapat melihat caranya pada postingan sebelumnya. Nah untuk Codingan adalah seperti ini :

 <head>
  <title> Salman Fauzan Fahri Aulia XI - RPL 3 Biodata </title>
 </head>
  <body Background = "1.png" style="background-repeat: no-repeat fixed; background-size: 100% 100%;"> >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<form id = "form1" name = "form1" method = "post" action = "" >
    <table width = "1050" height = "720" border = "2" align = "center" cellspacing = "1" >
<tr>
     <th width = "100" rowspan = "3" valign = "center" bgcolor = "#6666ff" >
     <p>
Home </p>
<p>
Profile </p>
<p>
About Me </p>
<a href="https://intermation-cafe.blogspot.com/"/><p>
Blog </p>
</a>
     <a href="https://steamcommunity.com/id/BladeDancez"/> <p>
Support Us
</th>
     <th width = "627" height = "23" align = "center" bgcolor = "#4c66ff" >
     <strong><font face = "Comic Sans MS" color = "#00ccff" size = +3" > Biography of Nano </font></strong>
     </th>
    </tr>
<tr>
     <td height = "176" align = "center" valign = "top" bgcolor = "#33ccff" >
      <font face = "Comic Sans MS" color = "#0075ff">
       <br><img src = "nano.jpg" width = "50%" ></br>
       <p>
Nano was born on July 12, in New York City, America.[3] She was raised in the United States 
       as a child but then moved to Japan when she was fourteen. Nano posted covers of Vocaloid, anime 
       and Avril Lavigne songs online, first on YouTube and later on the Japanese site Niconico. 
       She is bilingual, and sometimes writes English lyrics to the covered songs, giving them a western touch 
       without losing the original style. Eventually this led to a record deal with Japanese major label Flying Dog. 
       The debut album Nanoir was released on March 14, 2012. Nano's first live performance was on March 16, 2013.
       Nano has recorded several original theme songs for various anime series, such as, "Bull's Eye" for Hidan no Aria, 
       "Now or Never" for Phi Brain: Puzzle of God, "No Pain, No Game" and "Exist" for Btooom!, "Savior of Song" 
       (feat. My First Story) for Arpeggio of Blue Steel,[4] "Born To Be" for Magical Warfare,[5] "Sable" for M3 the dark metal, 
       "Dreamcatcher" for Magical Girl Raising Project, and "Rock On." for the first film of Arpeggio of Blue Steel, 
       Arpeggio of Blue Steel: Ars Nova DC.
       </p>
<h4 align = "left">
 She have some Singles Album such as :
       <ul>
<li> 2012 </li>
<ol> "Now or Never" Released on 23 May 2012 </ol>
<ol> "No Pain No Game" Released on 10 October 2012 </ol>
<li> 2013 </li>
<ol> "Nevereverland" Released on 6 April 2013 </ol>
<ol> "Savior of Song" Released on 30 October 2013 </ol>
<li> 2014 </li>
<ol> "Born to Be" Released on 19 February 2014 </ol>
<ol> "INFINITY≠ZERO / SABLE" Released on 23 July 2014 </ol>
<li> 2015 </li>
<ol> "Bull's Eye" Released on 28 October 2015 </ol>
<li> 2016 </li>
<ol> "Dreamcatcher" Released on 2 November 2018 </ol>
<li> 2017 </li>
<ol> "My Liberation / Paraiso" Released on 2 February 2017 </ol>
</ul>
</h4>
</font>
     </td>
    </tr>
<tr>
     <td height = "30" align = "center" bgcolor = "#33ccff" >
     <font face = "Comic Sans MS" ><b> Salman Fauzan Fahri Aulia XI - RPL 3 </b></font>
     </td>
    </tr>
</table>
</form>
</body>
</html>
>

\Hasilnya akan menjadi seperti ini :

Cukup sampai disini saja ya guys pembahasan kita kali ini, semoga bermanfaat bagi kalian, mohon maaf bila ada kesalahan dalam penyampaian maupun pengetikan. See you next guys.

Wassalamu'alaikum Wr Wb.

Cyber Information Cafe

Cari Blog Ini

Format Table 2 Dalam HTML (Pertemuan 6)

Komentar

Posting Komentar