Kamis, 06 Juni 2013

Mengatur format tabel 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.

Sumber :
http://www.zainalhakim.web.id/posting/mengatur-format-tabel-dengan-css.html

Tidak ada komentar:

Poskan Komentar

1. Silahkan masukkan komentar
2. Berkomentar dengan kata-kata yang santun
3. Jangan menggunakan kata-kata kotor
4. Jika anda tidak suka dengan yang kami sajikan, lebih baik jangan di baca
5. Tinggalkan link web/blog anda agar admin bisa visit back
6. Jadilah pengunjung yang baik
7. Kami hanya memberikan informasi dari sumber-sumber yang bisa admin percaya.
8. Maaf jika ada salah satu artikel tidak ada sumbernya.