Web Design : Meet 2

html

Untuk Materi Web Design Meet 2

Pembahasan tentang :

  • Pembuatan Tabel, colgroup
  • Penggunaan┬áInternal Style Sheet,┬áInline Style Sheet
  • Class pada HTML

simpan file dengan nama p2.html

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh Penggunaan Colgroup Tabel</title>
  <style>
    body{background:brown;font-family:Arial;}
    .contoh{font-weight:bold;
            font-size:30pt;
            font-style:italic;
            color:red;}
    .baru{border:5px solid orange;
          padding:10px;
          border-radius:10px;
          background:blue;}
    .tengah{text-align:center;}
    .warna{color:green;}
  </style>

  </head>
  <body>
    <center>
    <table border='1' width="100%">
      <colgroup>
        <col style="background:yellow;">
        <col style="background:pink">
        <col style="background:red">
        <col style="background:orange">
      </colgroup>
      <tr>
        <th>No</th>
        <th>Nama</th>
        <th>TTL</th>
        <th>Pekerjaan</th>
      </tr>
      <tr style="color:white;font-weight: bold;">
        <td>1</td>
        <td>Udin</td>
        <td>10 Juli 2000</td>
        <td>Mahasiswa</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Yudi</td>
        <td>10 Januari 1997</td>
        <td>Mahasiswa</td>
      </tr>
    </table>
    </center>

    <div style="font-weight:bold;font-size:30pt;font-style:italic;color:red;">LP3I
    </div>

    <div class="contoh">
      PALANGKA RAYA
    </div>

    <div class="baru contoh tengah warna">
      Kalimantan Tengah
    </div>

  </body>
</html>

Update dengan penambahan Background, Border, Border Radius

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh Penggunaan Colgroup Tabel</title>
  <style>
    body{background:brown;font-family:Arial;}
    .contoh{font-weight:bold;
            font-size:30pt;
            font-style:italic;
            color:red;}
    .baru{border:5px solid orange;
          padding:10px;
          border-radius:10px;
          background:blue;}
    .tengah{text-align:center;}
    .warna{color:green;}
  </style>

  </head>
  <body>
    <center>
    <table border='1' width="100%">
      <colgroup>
        <col style="background:yellow;">
        <col style="background:pink">
        <col style="background:red">
        <col style="background:orange">
      </colgroup>
      <tr>
        <th>No</th>
        <th>Nama</th>
        <th>TTL</th>
        <th>Pekerjaan</th>
      </tr>
      <tr style="color:white;font-weight: bold;">
        <td>1</td>
        <td>Udin</td>
        <td>10 Juli 2000</td>
        <td>Mahasiswa</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Yudi</td>
        <td>10 Januari 1997</td>
        <td>Mahasiswa</td>
      </tr>
    </table>
    </center>

    <div style="font-weight:bold;font-size:30pt;font-style:italic;color:red;">LP3I
    </div>

    <div class="contoh">
      PALANGKA RAYA
    </div>

    <div class="baru contoh tengah warna">
      Kalimantan Tengah
    </div>

  </body>
</html>

 

Recommended For You

About the Author: adyrhs

Leave a Reply

Your email address will not be published. Required fields are marked *