Codingan HTML membuat Table sederhana

-

Membuat table


kali ini saya akan mengajarkan cara membuat table sederhana dengan html lalu di perbagus menggunakan css, berikut adalah cara dan code nya:

pertama pastikan kalian punya text editor, disini saya menggunakan text editor IDE visual studio code.

jika sudah kalian bisa buat file index.html untuk membuat table nya, code nya seperti di bawah ini:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Document</title>
    <link rel="stylesheet" href="style2.css">
</head>

<body>
  <div id="bg">
    <img src="5.jpeg" alt="">
  </div>
  <h1>LAPORAN HASIL UJIAN ONLINE PADA SMK BERJAYA</h1>
  <SPAN></SPAN>
  <h3>Berikut adalah daftar nama siswa-siswa yang termasuk ke dalam 10 besar : </h3>
  <br>
  <table align="center">
  <thead>
    <tr>
      <th>NO</th>
      <th>Nama siswa</th>
      <th>Mata pelajaran</th>
      <th>Nilai</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Andre ramadhan</td>
      <td>MTK</td>
      <td>80</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Dian sastro</td>
      <td>MTK</td>
      <td>80</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Rina marlina</td>
      <td>Produktif TKJ</td>
      <td>90</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Yuki kartina</td>
      <td>Bahasa Indonesia</td>
      <td>88</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Della Rahma</td>
      <td>Produktif TKJ</td>
      <td>86</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Kirantina</td>
      <td>Fisika</td>
      <td>84</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Fathir maulana</td>
      <td>Kimia</td>
      <td>81</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Qinandhiya putri</td>
      <td>Pemograman</td>
      <td>86</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Erna winata</td>
      <td>Bahasa Inggris</td>
      <td>80</td>
    </tr>
    <tr>
      <td>10</td>
      <td>sulisanti</td>
      <td>Pancasila</td>
      <td>80</td>
    </tr>
  </tbody>
  </table>
</body>
</html>





seperti itu contoh code nya.

lalu kita tambahkan background gambar nya contoh gambar :
 saya menggunakan gambar itu sebagai background nya.
lalu kita perbagus menggunakan css, kita buat terlebih dahulu file nya dengan nama style.css,berikut adalah code nya :


h1,h3 {
  text-align: center;
  font-family: italic;
}

img {
  opacity: 0.4;
  filter: alpha(opacity=30);
  width: 100%;
  height: auto;
}

#bg {
  right: 50%;
  left: 50%;
}

#bg img {
  position: fixed;
  top: 0px;
  left: 0px;
}
table {
  font-family: sans-serif;
  color: rgb(0, 0, 0);
  border-collapse: collapse;
  width: 50%;
  border: 1px solid #000000;
}

table tr th {
  background: #35A9DB;
  color: rgb(0, 0, 0);
  font-weight: normal;
}

table,
th{
  padding: 10px 25px;
  text-align: center;
}
td {
  padding: 9px 20px;
}

table tr:hover {
  background-color: #cac6c6;
}

table tr:nth-child(even) {
  background-color: #ffa7a7;
}
berikut hasil nya :

 Selamat mencoba semua nya :)
terima kasih...

Komentar

Posting Komentar

Postingan populer dari blog ini

konfigurasi firewall cisco packet tracer

-
Gambar
  KONFIGURASI FIREWALL BLOK IP DI CISCO  Yoo, balik lagi disini kita akan membuat konfigurasi firewall blok ip agar client tidak bisa mengakses suatu web yang telah di atur nanti nya . Oke langsung saja penjelasan nya di bawah ini: Pertama tama komponen yang akan di gunakan adalah: 1 buah server 1 switch 3 pc client  Untuk topologi nya yang akan kita gunakan adalah seperti di bawah ini lalu kita setting ip address nya yang akan saya gunakan ip dengan class c yaitu 19.158.10.1-192.168.10.254 setelah pemberian ip kita masuk ke tahap selanjut nya yaitu setting server nya. Yang akan kita setting yang pertama yaitu DNS settingan nya seperti di bawah ini isi bagian address nya sesuai dengan ip server ya guyssss okeeyyyy selanjut nya konfigurasi EMAIL, beri nama domain nya, lalu setting username dan password sesuai jumlah password client jika sudah jangan lupa di bagian ip client nya di setting gateway dan dns name nya yang di isi dengan ip server. Dan jika sudah isi configurasi...
Baca selengkapnya

Pbx cisco packet tracker

-
Gambar
  Cara Membuat Layanan PBX Sederhana di Cisco 1. Pilih peralatan di bawah ini untuk di gunakan : Router 2811 Switches 2960 IP Phone 7960 d. Kabel Straight 2. Hubungkan Router (Fast Ethernet 0/0) dengan Switches (Fast Ethernet 0/1). 3. Hubungkan IP Phone (Port Switch) dengan Switches di port Fast Ethernet selanjutnya. Hubungkan semua seperti gambar ini 4. Sambungkan kabel power IP Phone pada menu Physical. 5. Kemudian konfigurasi Switch dengan perintah dibawah ini : en config terminal int range fa0/1-24 switchport voice vlan 1 exit 6. Kemudian konfigurasi router dengan perintah dibawah ini : en config terminal ip dhcp pool voice network 192.168.31.2 255.255.255.0 default-router 192.168.31.1 option 150 ip 192.168.31.1 exit ip dhcp excluded-address 192.168.31.1 int fastethernet 0/0 ip address 192.168.31.1 255.255.255.0 no shutdown exit telephony-service max-ephones 3 max-dn 3 ip source-address 192.168.31.1 port 2000 auto assign 4 to 6 auto assign 1 to 5 ephone-dn 1 (Tunggu dan kemudia...
Baca selengkapnya

Firewall

-
firewall pada komputer  Pengertian Firewall           Firewall dalam artian Teknologi adalah, sebagai suatu cara atau mekanisme yang diterapkan baik terhadap   Hardware,  ataupun   System   itu sendiri dengan tujuan untuk melindungi baik dengan menyaring , membatasi atau bahkan menolak suatu atau semua hubungan/kegiatan suatu segmen pada jaringan pribadi dengan jaringan luar yang bukan merupakan ruang lingkupnya.              Firewall didefinisikan sebagai suatu komponen atau kumpulan komponen yang membatasi akses antara sebuah jaringan yang diproteksi dan internet, atau antara kumpulan kumpulan jaringan lainnya Fungsi Firewall              Fungsi Firewall secara umum : Menjadi pengatur, penyaring, dan pengontrol trafik data yang dapat masuk untuk mengakses jaringan privat yang telah dilindungi firewall. Mencatat semua transaksi dari seluruh peristiwa ya...
Baca selengkapnya