Mengatur style table HTML dengan CSS

|

Secara default, Biasanya Table pada HTML akan tampak pada browser seperti contoh yang ditampilkan pada Tag untuk membuat Table. Tetapi dengan menggunakan CSS Table, kita dapat mengatur elemen elemen yang ada didalam Table seperti Teks, Gambar dan Backgroundnya. Misalnya kita ingin membuat Table seperti dibawah ini:
Daftar Siswa Kelas IIIA
NamaAlamatTgl Lahir
Fha .SJl. Timu, 16A16-1-1995
BudiantoJl. Merdeka, 23B12-2-1993
Brandy. WJl. Anyelir, 11C10-1-1992
Cyntia DewiJl. Pahlawan. 10C13-8-1993
Solusinya adalah sebagai berikut:
Pertama, kita buat kode HTML nya dengan menggunakan Class dan ID Selector, contoh:

<table border=”0″>
<tbody>
<tr>
<th colspan=”3″>Daftar Siswa Kelas IIIA</th>
</tr>
<tr>
<td>Nama</td>
<td>Alamat</td>
<td>Tgl Lahir</td>
</tr>
<tr>
<td>Andy. R</td>
<td>Jl. Setia Budi, 20A</td>
<td>22-4-1992</td>
</tr>
<tr>
<td>Budianto</td>
<td>Jl. Merdeka, 23B</td>
<td>12-2-1993</td>
</tr>
<tr>
<td>Brandy. W</td>
<td>Jl. Anyelir, 11C</td>
<td>10-1-1992</td>
</tr>
<tr>
<td>Cyntia Dewi</td>
<td>Jl. Pahlawan. 10C</td>
<td>13-8-1993</td>
</tr>
</tbody>
</table>
Kedua, kita buatkan file CSS nya seperti berikut:
table.listItem {
width:100%;
padding:0.1em;
text-align:center;
border:1px #009966 solid;
background:#FFFFFF;}
table.listItem th {
font-size:1.4em;}
table .nameItem {
background:#006666;
font-weight:bold;
color:#FFFFFF;}
table .oldRow {
background:#009999;}
table .evenRow {
background: #00CC99;}
Nah, Coba anda Download kode HTML dan Download kode CSS diatas, dan jika anda lihat dibrowser maka hasilnya akan seperti Table di atas.
Selamat Mencoba….!

0 komentar:

Posting Komentar

Next Prev
▲Top▲