Rabu, 19 Januari 2011

Tabel dengan CSS

Fungsi css sendiri adalah mengatur dari desain website itu sendiri, seperti warna background, ukuran/warna/jenis font, paragraf, dll. Sebenarnya dalam file HTML kita biasa menuliskan css tersebut. Namun, hal itu beda dengan yang akan kita pelajari kali ini. File CSS terpisah dengan file HTML. Hal ini yang disebut dengan CSS Eksternal.

  • Pembuatan Tabel dengan CSS ver 1
contoh gambar di bawah ini merupakan tabel yang menggunakan terapan selectortag.css
 Tag CSS nya :
body {
    font-family: Arial, sans-serif;
    background-color: Red;
}

p {
    font-family: Arial, sans-serif;
    color: #000099;
    font-size: 12pt
}

table {
    border-style: dashed;
    border-color: red;
}

th {
    text-align: center;
    background-color: gray;
    font-weight: bold
}  

Tag HTML nya:
<html>
<head>
<title>
Daftar Nilai Pemodelan Kelas VII A
</title>
<link rel=stylesheet href="selectortag.css" type"text/css">
</head>
<body>
<center>
<p><b>Daftar Nilai Pemodelan Kelas VII A</b></p>

<table width=100% height=20% border=1>
<tr>
<th><b>No.</b></td>
<th><b>Nama</b></td>
<th><b>Nilai</b></td>
</tr>

<tr>
<td align=right>1.</td>
<td>Brus Don Mardo</td>
<td align=center>77</td>
</tr>

<tr>
<td align=right>2.</td>
<td>Don Mardo</td>
<td align=center>70</td>
</tr>

<tr>
<td align=right>3.</td>
<td>BruzGG</td>
<td align=center>99</td>
</tr>
</table>
</center>
</body>
</html> 

  • Pembuatan Tabel dengan CSS ver 2
contoh gambar di bawah ini merupakan tabel yang menggunakan terapan selectorbebas.css

Tag CSS nya :
.bodynya {
    font-family: Arial, sans-serif;
    background-color: Pink
}

.paragraf {
    font-family: Arial, sans-serif;
    color: #009900;
    font-size: 12pt
}

.tabelku {
    border-style: dashed;
    border-color: red;
}

.headertabel {
    text-align: center;
    background-color: gray;
    font-weight: bold;
}



Tag HTML nya :
<html>
<head>
<title>
Daftar Nilai Pemodelan Kelas VII A
</title>
<link rel=stylesheet href="selectorbebas.css" type"text/css">
</head>
<body class="bodynya">
<center>
<p class="paragraf"><b>Daftar Nilai Pemodelan Kelas VII A</b></p>

<table class="tabelku" width=100% height=20% border=1>
<tr>
<th class="headertabel"><b>No.</b></td>
<th class="headertabel"><b>Nama</b></td>
<th class="headertabel"><b>Nilai</b></td>
</tr>

<tr>
<td align=right>1.</td>
<td>Brus Don Mardo</td>
<td align=center>77</td>
</tr>

<tr>
<td align=right>2.</td>
<td>Don Mardo</td>
<td align=center>70</td>
</tr>

<tr>
<td align=right>3.</td>
<td>BruzGG</td>
<td align=center>99</td>
</tr>
</table>
</center>
</body>
</html>

sekian.. ^_^
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)