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 {
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….!

Artikel terkait :