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
Andy. R Jl. Setia Budi, 20A 22-4-1992
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….!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *