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
Nama	Alamat	Tgl Lahir
Fha .S	Jl. Timu, 16A	16-1-1995
Budianto	Jl. Merdeka, 23B	12-2-1993
Brandy. W	Jl. Anyelir, 11C	10-1-1992
Cyntia Dewi	Jl. Pahlawan. 10C	13-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 {

Selamat Mencoba...

About the Author

Written by Admin

Previl_TM is a modern, template is very suitable for a template of your blog,and features a very cool and nice so from me, Predator Evil TM