e-amik - Pada tutorial sebelumnya saya telah menjelaskan tentang Dasar-Dasar HTML, dalam tutorial kali ini saya akan melanjutkannya dengan memberi style pada beberapa tag tersebut misalnya: Memberi warna pada text, table, header.Contoh Tag yang telah di beri style:
Table Mahasiswa
Cara Memberi Style pada tabelContoh Tabel:
| No | Nama | Alamat |
|---|---|---|
| 1 | Busra Ahmad | Lembang |
| 2 | Umi Setiyani | Lembang |
| 3 | Saddam Husain | Pakkola |
| 4 | Kaco' | Austria |
Kode Html dari contoh di atas:
<html>
<head>
<title>Tag Style Html</title>
<style type="text/css">
.judul {
font-family: Verdana, Geneva, sans-serif;
color: #096;
}
#mahasiswa
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:300px;
border-collapse:collapse;
text-align: center;
}
#mahasiswa td, #mahasiswa th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
text-align: left;
}
#mahasiswa th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#mahasiswa tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
.teks-biru {
color: #00F;
}
.teks-merah {
color: #F00;
}
</style>
</head>
<body>
<h1 class="judul">Table Mahasiswa </h1>
<span class="teks-biru">Cara Memberi Style pada tabel</span>
<br>
<span class="teks-merah">Contoh Tabel:</span>
<br>
<table id="mahasiswa">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Busra Ahmad</td>
<td>Lembang</td>
</tr>
<tr class="alt">
<td>2</td>
<td>Umi Setiyani</td>
<td>Lembang</td>
</tr>
<tr>
<td>3</td>
<td>Saddam Husain</td>
<td>Pakkola</td>
</tr>
<tr class="alt">
<td>4</td>
<td>Kaco</td>
<td>Austria</td>
</tr>
</table>
</body>
</html>
0 Komentar