Gimana
seh cara menggunakan CSS ?? Misalkan kita akan membuat tabel daftar
nilai menggunakan CSS maka yang pertama adalah kita buat dulu html-nya
setelah itu baru dibuat CSS-nya lihat coding dibawah ini :
<body>
<table align = "center" border = "1">
<tr>
<td>
<div id="headerTabel">
<div>Hasil Studi Semester III Tahun Akademik 2010-2011</div>
<div><u>Universitas Kristen Satya Wacana</u></div>
</div>
<div id = "headerTabel2">
<p>
<div >
Nama : NAMA ANDA
</div>
<div >
NIM : NIM ANDA
</div>
<div >
Fakultas : FAKULTAS ANDA
</div>
</p>
</div>
<table id = "hasilStudi" border ="1">
<tr class = "alt3">
<th>No.</th>
<th>Kode</th>
<th>Mata Kuliah</th>
<th>B/U</th>
<th>SKS</th>
<th>Nilai</th>
<th>AK</th>
</tr>
<tr class = "alt2">
<td>1</td>
<td>IT112E</td>
<td>Aljabar Linear dan Matriks</td>
<td>B</td>
<td>3</td>
<td>BC</td>
<td>7.5</td>
</tr>
<tr class = "alt">
<td>2</td>
<td>IT114P</td>
<td>Bahasa Inggris Profesi 2</td>
<td>B</td>
<td>2</td>
<td>B</td>
<td>6.0</td>
</tr>
<tr class = "alt2">
<td>3</td>
<td>IT250F</td>
<td>Algoritma dan Struktur Data Lanjutan</td>
<td>B</td>
<td>3</td>
<td>A</td>
<td>12.0</td>
</tr>
<tr class = "alt">
<td>4</td>
<td>IT209E</td>
<td>Pemrograman Berorientasi Objek</td>
<td>B</td>
<td>3</td>
<td>A</td>
<td>12.0</td>
</tr>
<tr class = "alt2">
<td>5</td>
<td>IT113J</td>
<td>Pendidikan Pancasila</td>
<td>B</td>
<td>2</td>
<td>B</td>
<td>6.0</td>
</tr>
<tr class = "alt">
<td>6</td>
<td>IT233L</td>
<td>Organisasi dan Ars. Komputer</td>
<td>B</td>
<td>2</td>
<td>A</td>
<td>8.0</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<table align = "center" border = "1">
<tr>
<td>
<div id="headerTabel">
<div>Hasil Studi Semester III Tahun Akademik 2010-2011</div>
<div><u>Universitas Kristen Satya Wacana</u></div>
</div>
<div id = "headerTabel2">
<p>
<div >
Nama : NAMA ANDA
</div>
<div >
NIM : NIM ANDA
</div>
<div >
Fakultas : FAKULTAS ANDA
</div>
</p>
</div>
<table id = "hasilStudi" border ="1">
<tr class = "alt3">
<th>No.</th>
<th>Kode</th>
<th>Mata Kuliah</th>
<th>B/U</th>
<th>SKS</th>
<th>Nilai</th>
<th>AK</th>
</tr>
<tr class = "alt2">
<td>1</td>
<td>IT112E</td>
<td>Aljabar Linear dan Matriks</td>
<td>B</td>
<td>3</td>
<td>BC</td>
<td>7.5</td>
</tr>
<tr class = "alt">
<td>2</td>
<td>IT114P</td>
<td>Bahasa Inggris Profesi 2</td>
<td>B</td>
<td>2</td>
<td>B</td>
<td>6.0</td>
</tr>
<tr class = "alt2">
<td>3</td>
<td>IT250F</td>
<td>Algoritma dan Struktur Data Lanjutan</td>
<td>B</td>
<td>3</td>
<td>A</td>
<td>12.0</td>
</tr>
<tr class = "alt">
<td>4</td>
<td>IT209E</td>
<td>Pemrograman Berorientasi Objek</td>
<td>B</td>
<td>3</td>
<td>A</td>
<td>12.0</td>
</tr>
<tr class = "alt2">
<td>5</td>
<td>IT113J</td>
<td>Pendidikan Pancasila</td>
<td>B</td>
<td>2</td>
<td>B</td>
<td>6.0</td>
</tr>
<tr class = "alt">
<td>6</td>
<td>IT233L</td>
<td>Organisasi dan Ars. Komputer</td>
<td>B</td>
<td>2</td>
<td>A</td>
<td>8.0</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Nah
jika sudah buat HTML-nya sekarang kita buat CSS-nya, oh iya
teman-teman untuk pemanggilan CSS ini jika dibuat #header misalnya maka
pemanggilan CSS header harus menggunakan id ="header"kalau menggunakan .header pemanggilan nya menggunakan class = "header".
CSS untuk code diatas :
#hasilStudi {font-family : "Arial"; width : 100%; color : black;
text-align : center; border-collapse : collapse; border : 1px solid #000000;
}
#hasilStudi td {
font-size : 12; color:blue;
}
#hasilStudi tr.alt td {
color:blue; background-color:#EAF2D3;
}
#hasilStudi tr.alt2 td {
color:green;
}
#hasilStudi tr.alt3 th {
color : black; background-color: yellow; text-align : center; font-size : 12;
}
#headerTabel {
font-family : "Times New Roman"; font-size : 15;
color : black; text-align :center;
}
#headerTabel2 { align : justify; font-family :"Cambria"; font-size : 11;}
#tabelLuar { table-align : center;}
Selamat mencoba... GBU
Tidak ada komentar:
Posting Komentar