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>

 

Jika sekiranya bermanfaat bagi anda, mungkin saja juga berguna buat orang lain. Dengan teramat sangat silahkan untuk share info tersebut dengan mengklik button dibawah ini.

Terimakasih telah membaca Web Design - Web Design : Meet 2. Silahkan tinggalkan komentar, saran dan pesan Anda untuk kemajuan website  IT.DewAdy.Com. Terimakasih untuk dukungan dan partisipasi Anda.


Maaf untuk sementara fitur komentar menggunakan Facebook Kami Nonaktifkan

0 Komentar
  • Nama harus diisi, Email tidak akan disebarluaskan, Terimakasih.
  • Mohon untuk menggunakan ejaan yang benar / kata-kata yang mudah dimengerti

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.


Pencarian . . .

IP Address : 54.166.130.157
Sistem Operasi : Unknown
Browser : Unknown
Versi : ?
00018887
Contact Me

FB : Ady

TW : @ady_rhs

About Me
Sekilas tentang SAYA . . . Saya ADY Blogger asal sebuah desa kecil nan jauh disana. :D yang sekarang berdomisili di Kota Cantik, Palangka Raya, Kalimantan Tengah,
Membuat website Edukasi yang bermanfaat berdasarkan hasil pengalaman yang pernah dicoba dan sharing tentang hal yang saya rasa berguna lebih khusus kepada diri sendiri lebih-lebih jika bisa bermanfaat buat para pembaca sekalian. Hidup itu indah jika kita bisa menjadi orang yang bermanfaat bagi orang lain.
Email :
ady@dewady.com atau dewady.com@gmail.com


Web Hosting
Link Rujukan