Minggu, 09 Oktober 2016
Berikut ini kita akan belajar tentang html dan css sederhana :
by : Ikoma Kun
A. Html Tabel Sederhana<!Doctype html>
<html>
<head>
<title> Ulangan Tabel </title>
<link rel="stylesheet" type="text/css" href="Ulangan Tabel 1.css">
</head>
<body>
<h3>Daftar Nilai Ulangan Praktikum CSS</h3>
<table border="1">
<tr>
<th width="4%">No.</th>
<th>Nama Lengkap</th>
<th width="7%">Nilai</th>
<th>Keterangan</th>
<th width="17%"><button class="button1"><b>Tambah</b></button></th>
</tr>
<tr>
<td>1</td>
<td>Amar Fatoni</td>
<td>85</td>
<td>Baik</td>
<td><button class="button2"><b>Ubah</b></button> <button class="button3"> <b>Hapus</b></button></td>
</tr>
<tr>
<td>2</td>
<td>Arifka Shafa Dewi</td>
<td>83</td>
<td>Baik</td>
<td><button class="button2"><b>Ubah</b></button> <button class="button3"> <b>Hapus</b></button></td>
</tr>
<tr>
<td>3</td>
<td>Asih Setiyanti</td>
<td>86</td>
<td>Baik</td>
<td><button class="button2"><b>Ubah</b></button> <button class="button3"> <b>Hapus</b></button></td>
</tr>
<tr>
<td>4</td>
<td>Ayu Dita Sari</td>
<td>89</td>
<td>Baik</td>
<td><button class="button2"><b>Ubah</b></button> <button class="button3"> <b>Hapus</b></button></td>
</tr>
<tr>
<td>5</td>
<td>Dian Pracna Paramita</td>
<td>84</td>
<td>Baik</td>
<td><button class="button2"><b>Ubah</b></button> <button class="button3"> <b>Hapus</b></button></td>
</tr>
<tr>
<td>6</td>
<td>Dicky Bahrodin</td>
<td>85</td>
<td>Baik</td>
<td><button class="button2"><b>Ubah</b></button> <button class="button3"> <b>Hapus</b></button></td>
</tr>
</table>
<legend>Halaman:<button>1</button>
<button>2</button>
<button style="background-color:#4169E1">3</button>
<button>4</button></legend>
</body>
</html>
B. CSS Tabel Sederhana
* {margin:10px auto}
body{font-family: Arial;}
h3{color: #000000;
width: 80%}
table { border-collapse:collapse; width:80%;}
table, td, th { border:1px solid #CCC;
}
tr:hover {background-color:#CCC;}
th { padding: 5px 10px;
text-align:left;
background-color:#CCC;
color:black;}
td { padding: 5px 10px;
text-align:left}
legend{width:80%}
.button1 {font:bold;font-size:18px;width:150px;text-align:center;display:inline- block;border:none;color:#FFFFFF;background-color:#1E90FF;border-radius:5px}
.button2 {font:bold;width:75px;border:none;color:#FFFFFF;background- color:#FFA500;border-radius:5px}
.button3 {font:bold;width:75px;border:none;color:#FFFFFF;background- color:#FF0000;border-radius:5px}
Output :
Keterangan :
Pisahkan antara html biasa dan cssnya (buat dua folder). Fungsi dari tak berikut :
<link rel="stylesheet" type="text/css" href="Ulangan Tabel 1.css"> adalah untuk menyambungkan antara HTML dan CSSnya (link). Fungsi dari CSS adalah untuk memberikan tampilan html lebih dinamis ataupun menarik. Silahkan anda coba,semoga berhasil..!!!
Tidak ada kata menyerah jika KALIAN ingin sukses. Mudahkan ???
