Belajar HTML&CSS: Table & List

22.10

Assalamu'alaikum warrahmatullahi wabarakatuh.

Pada postingan kali ini, Saya akan menjelaskan tentang table dan list pada HTML.

Seperti biasa, buka software Sublime Text 3. Selanjutnya, buatlah struktur dasar HTML.

Berikut adalah instruksi-instruksi yang akan dilakukan :

Table :

Tabel menyimpan 4 informasi: No, Nama (Nama Depan, Nama Belakang), Deskripsi.
Judul kolom "No." dan "Deskripsi" menggabungkan 2 baris tabel.
Judul Kolom "Nama" menggabungkan 2 kolom tabel.
Tulisan pada Kolom Judul dibuat rata tengah.
Tabel memiliki batas (border) yang bergabung menjadi satu (collapsed).
Tabel memiliki caption: 10 Dosen Favorit Saya ('Dosen Favorit' bisa diganti dengan yang lain)
Data yang diisi pada tabel memiliki warna background yang berbeda antara baris genap dan baris ganjil.

List :

Buatlah sebuah daftar (list) yang mencantumkan 3 barang yang terdapat di tas Anda dengan menggunakan bullet bertipe: circle.
Buatlah sebuah daftar (list) yang mencantumkan 3 cita-cita terbesar Anda dengan menggunakan poin berupa huruf kecil a, b, c.

TABLE

Pada instruksi 1, hal pertama yang harus dilakukan adalah membuat tag tabel yang terdiri dari tag row (tr), dimana pada tiap-tiap tr terdapat tag data (td) kecuali untuk row pertama, terdapat tag heading (th).

Outputnya :

Instruksi ke-2 dapat dilakukan dengan menambahkan rowspan="2" pada tag th. Untuk instruksi ke-3, gunakan colspan="2" pada tag th seperti contoh di bawah ini. Lalu untuk instruksi ke-4, tambahkan properti style=text-align:center pada tag tr.

Outputnya :

Selanjutnya, untuk instruksi ke-5 tambahkan properti style= border-collapse:collapse pada tag table, tr, th dan td agar border pada table terlihat menjadi satu seperti dibawah ini :

Outputnya :

Sesuai instruksi ke-6, tambahkan tag caption di dalam tag table (sebelum tag tr yang pertama) seperti ini :

Outputnya :

Lalu, untuk instruksi ke-7 tambahkan dua property style yang berbeda, odd(untuk ganjil) dan even(untuk genap) seperti di bawah ini :

Outputnya :

LIST

Untuk membuat list sesuai instruksi ke-1 yang menginginkan list bertipe undordered list (ul) circle saya akan menambahkan tag ul bertipe circle dan tag li seperti ini :

Outputnya :

Terakhir, instruksi ke-2 menginginkan list berbentuk ordered list (ol) tipe lowercase "a".

Outputnya :

Langkah terakhir, tambahkanlah style dan properti lain agar tampilan lebih menarik!
Berikut ini adalah sourcecode yang telah saya selesaikan :

<!DOCTYPE html>
<html>
 <head>
  <title>TABEL - <09031281621039></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
   @font-face {
      font-family: jackfrost;
      src: url(jackfrost.otf);
   }
   @font-face {
      font-family: nexalight;
      src: url(nexalight.otf);
   }
   @font-face {
      font-family: snekregular;
      src: url(snekregular.otf);
   }
   .tabelnya, .listnya {
    padding: 40px;
    margin: auto;
    margin-top: 50px;
    max-width: 500px;
    border: 10px solid #6495ED;
   }
   .about {
    float: right;
    max-width: 250px;
    position: fixed;
    top: 90px;
    right: 80px;
    border: 10px dotted #6495ED;
    background-color: #fff;
    color: #6495ED;
    padding: 20px;
    text-align: center;
   }
   .welcome {
    float: left;
    width: 250px;
    height: 110px;
    position: fixed;
    top: 90px;
    left: 80px;
    border: 10px dotted #6495ED;
    background-color: #fff;
    color: #6495ED;
    padding-left: 20px;
    padding-right: 20px;
   }
   .welcome:hover {
    height: 90px;
   }
   .illustration {
    float: right;
    position: fixed;
    max-width: 250px;
    top: 360px;
    right: 80px;
    border: 10px dotted #6495ED;
    background-color: #fff;
    color: #6495ED;
    padding: 20px;
   }
   .sosmed {
    float: left;
    position: fixed;
    top: 270px;
    left: 80px;
    border: 10px dotted #6495ED;
    background-color: #fff;
    color: #6495ED;
    padding: 20px;
    max-width: 250px
   }
   table, th,td {
    border: 2px solid #4169E1;
    border-collapse: collapse;
    font-family: nexalight;
   }
   th,td {
    padding: 10px;
    text-align:center;
   }
   tr {
    color: #fff;
    font-weight : bold;
   }
   tr:hover {
    color: #FF6347;
    font-style : italic;
    font-size: 80%;
   }
   tr:nth-child(odd) {
    background-color: #FFD700;
   }
   tr:nth-child(even) {
    background-color: #6495ED;
   }
   body {
    background-color: #E0FFFF;
   }
   h1 {
    text-align: center;
    font-family: jackfrost;
    margin-bottom: 40px;
    padding: 15px;
    background: #fff;
    border: 5px solid #ffd700;
    color: #6495ED;
   }
   h1:hover {
    font-size: 25px;
    background: #6495ED;
    border: 5px dotted #ffd700;
    color: #fff;
   }
   ul {
    font-size: 20px;
    font-weight: bold;
    font-family: nexalight;
    background-color: #FF6347;
    color: #fff;
    margin: auto;
    vertical-align: middle;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 180px;
    padding-right: 150px;
    border: 6px solid #6495ED;
   }
   li:hover {
    font-style: italic;
    font-size: 130%;
    text-decoration: overline;
   }
   ol {
    font-size: 20px;
    font-weight: bold;
    background-color: #FF6347;
    font-family: nexalight;
    color: #fff;
    margin: auto;
    vertical-align: middle;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 110px;
    padding-right: 30px;
    border: 6px solid #6495ED;
   }
   img {
    max-width: 250px;
    max-height: 300px;
   }
   h3 {
    font-family: snekregular;
    font-size: 200%;
    text-decoration: underline;
    color: #FFD700;
   }
   h3:hover {
    font-size: 180%;
    text-decoration: none;
    color: #4169E1;
   }
   p {
    font-family: nexalight;
    font-size: 16px;
   }
   span:hover {
    background-color: #FFD700;
    font-size: 30px;
   }
   img:hover {
    max-width: 200px;
    display: block;
    margin: auto;
   }
  </style>
 </head>

<body>
  <div class="tabelnya">
  <table style="width:100%">
  <div>
<caption><h1>
List of Favorite Colors</h1>
</caption></div>
<tr style="background-color: #fff; color: #FF6347">
    <th rowspan="2">No.</th>
    <th colspan="2">Name</th>
    <th rowspan="2">Description</th>

</tr>
<tr style="background-color: #fff; color: #FF6347">
    <td><b>First name</b></td>
    <td><b>Surname</b></td>
   </tr>
<tr>
    <td>1.</td>
    <td>Tisa</td>
    <td>Monita</td>
    <td>Pink</td>
   </tr>
<tr>
    <td>2.</td>
    <td>Hedi</td>
    <td>Yunus</td>
    <td>Chocolate</td>
   </tr>
<tr>
    <td>3.</td>
    <td>Mutia</td>
    <td>Mariam F.</td>
    <td>Pink</td>
   </tr>
<tr>
    <td>5.</td>
    <td>Dea</td>
    <td>Tri Ananda</td>
    <td>Red</td>
   </tr>
<tr>
    <td>6.</td>
    <td>Annisa</td>
    <td>Raidatul J.</td>
    <td>Cream</td>
   </tr>
<tr>
    <td>7.</td>
    <td>Ratih</td>
    <td>Dewi S.</td>
    <td>Blue</td>
   </tr>
<tr>
    <td>8.</td>
    <td>Dedi</td>
    <td>Ramadhan</td>
    <td>Black</td>
   </tr>
<tr>
    <td>9.</td>
    <td>Arni</td>
    <td>Fira N.</td>
    <td>Pink</td>
   </tr>
<tr>
    <td>10.</td>
    <td>Fadilah</td>
    <td>Nur I.</td>
    <td>Blue</td>
   </tr>
</table>
</div>
<div style="margin-bottom: 40px" class="listnya">
   <h1>
3 Items in my bag</h1>
<p>
<ul style="list-style-type: circle; margin-bottom: 40px ">
<li>Schedule book</li>
<li>Pencil case</li>
<li>Wallet</li>
</ul>
</p>
<hr style="border: 1px solid #6495ED">
   <p>
<h1 style="margin-top: 40px">
3 Biggest Dreams of Mine</h1>
<ol type="a">
<li>Inner peace.</li>
<li>Continue my study until having a doctoral degree.</li>
<li>Visit South Korea.</li>
</ol>
</p>
</div>
<div class="welcome">
   <h3 style="text-align: center">
WELCOME !</h3>
</div>
<div class="about">
   <h3 style="text-align: center">
About</h3>
<p style="font-size: 110%">
Hello!
   <span>Ima</span>'s here. Welcome everyone ~</p>
</div>
<div class="illustration">
   <h3 style="text-align: center">
Illust
  -ration</h3>
<a href="http://glowingcarrot.tumblr.com" target="_blank"><img src="okME.png"></a>
  </div>
<div class="sosmed">
   <h3 style="text-align: center">
Social Medias</h3>
<a href="https://www.facebook.com/fadilah.nurimani.31" target="_blank"><img src="facebook.png"></a>
   <br>
   <a href="http://motivatedsloth.blogspot.co.id/" target="_blank"><img src="blogger.png"></a>
  </div>
<br>
  <hr style="border: 5px solid #6495ED; max-width: 500px; margin-bottom: 30px;">
  <footer align="center" style="width: 300px; margin: auto; margin-bottom: 50px;">
  <p style="color:#2f4a7a">
<b style="font-family: jackfrost"><ins>Contact</ins></b> <br><br><a href="mailto:fadilahnurimani@gmail.com"><i style="color: #fff"><b><mark style="color: #6495ed; font-family: nexalight">fadilahnurimani@gmail.com</mark></b></i></a></p>
</footer>
 <div style="display: none">
   <audio controls autoplay loop >
     <source src="EdSheeran_CastleOnTheHill.mp3" type="audio/mpeg">
   </audio>
  </div>
</body>
</html>

Dan ini adalah output setelah melakukan beberapa finishing :

Silahkan download file hasil akhir di sini.

Wassalamu'alaikum warahmatullah wabarakatuh.

Fadilah Nur Imani.

Pages

Belajar HTML&CSS: Table & List

TABLE

LIST

0 komentar

About me

Users

Blog Archive

Popular Posts

Labels

Facebook

Github

Gmail

Instagram

Linkedin

Soundcloud

Pages

Belajar HTML&CSS: Table & List

TABLE

LIST

Share This Story

You Might Also Like

0 komentar

About me

Users

Blog Archive

Popular Posts

Labels

Facebook

Github

Gmail

Instagram

Linkedin

Soundcloud