Mengatur format table dengan CSS

Anda mungkin sudah tidak asing lagi dengan css, yang umumnya digunakan untuk mengatur layout halaman web. Berikut ini saya akan berbagi tentang bagaimana mengatur format tabel dengan css. Pengaturan format tabel yang akan kita lakukan adalah mengganti warna tabel dan jenis tulisan pada tiap cell tabel. SIlahkan simak berikut ini..

Misal anda punya tabel seperti gambar berikut :

 
Dengan perintah html seperti ini:

<h1>Daftar Nama Mahasiswa</h1>

 <table>

<tr>

<th>NIM</th>

 <th>NAMA</th>

 <th>JURUSAN</th>

 </tr>

 <tr>

<td>001</td>

<td>MUHAMMAD RAMADHAN</td>

<td>TEKNIK MESIN</td>

 </tr>

 <tr>

 <td>002</td>

<td>MUHAMMAD JAMAL</td>

<td>TEKNIK SIPIL</td>

 </tr>

 <tr>

<td>003</td>

<td>ZAINUDDIN</td>

<td>MANAJEMEN</td>

</tr>

 <tr>

 <td>004</td>

<td>RAHMAT</td>

<td>AKUNTANSI</td>

 </tr>

 <tr>

 <td>005</td>

<td>RISWANDI</td>

<td>TEKNIK INFORMATIKA</td>

</tr>

 <tr>

 <td>006</td>

<td>HARTATI</td>

<td>AKUNTANSI</td>

 </tr>

 </table>

Kemudian kita akan atur tampilan tabel dengan css sehingga menghasilkan tampilan tabel seperti berikut :

Tanpa merubah perintah tabel yang sudah kita buat, kita tinggal tambahkan perintah cssseperti berikut ini : 

<style type="text/css">

 table {

 font: 12px/24px Verdana, Arial, Helvetica, sans-serif;

border-collapse: collapse;

width: 500px;

margin:0 auto;

}

 th {

border: 1px solid #CCC;

padding: 0 0.5em;

text-align: center;

background-color:#00FF66

}

td { border: 1px solid #CCC;

padding: 0 0.5em;

background-color:#DFFDD5;

}

h1 { color:#003300;

font:22px "Trebuchet MS";

text-align:center;

}

 </style>

 

Fungsi css diatas jika kita lihat secara rinci adalah mengubah semua format tampilan dasar tabel menjadi format khusus dengan warna dan ukuran tulisan yang dideklarasikan pada css.

Pada baris perintah table, ditambahkan ukuran font, posisi serta lebar tabel. Kemudian pada baris perintah th (bagian table header) disisipkan ukuran garis dan warna latar. Kemudian pada bagian td (table data) disisipkan warna berbeda dari th. Dan terakhir h1 difungsikan untuk mengatur tampilan judul pada bagian atas table agar warna, posisi serta ukuran sesuai dengan keperluan.

 Tanpa merubah perintah tabel yang sudah kita buat, kita tinggal tambahkan perintah cssseperti berikut ini : - See more at: http://www.zainalhakim.web.id/posting/mengatur-format-tabel-dengan-css.html#sthash.n3Cb7yqZ.dpuf

Misal anda punya tabel seperti gambar berikut :
- See more at: http://www.zainalhakim.web.id/posting/mengatur-format-tabel-dengan-css.html#sthash.n3Cb7yqZ.dpuf