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 :

Contoh format tabel

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 :

mengubah tampilan tabel dengan css

 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.

Untuk lebih jelas bagaimana penggunaanya, silahkan lihat demo berikut atau download contoh mengatur format tabel dengan css ini.

Semoga bermanfaat

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Komentar

Halaman Lainya

  • Membuat tampilan layout 3 kolom dengan css
    Membuat layout halaman web dengan css sangatlah mudah dan tidak menggunakan perintah yang rumit. Pada artikel singkat berikut ini saya akan menjelaskan bagaiman cara membuat tampilan halaman web dengan susunan tiga kolom. Contoh yang saya buat sengaja dirancang sederhana agar dapat digunakan untuk berbagai keperluan. Lihat kode berikut ini :
  • Software gratis editor css
    Untuk membuat sebuah halaman web yang rumit dan menarik tentunya memerlukan kode perintah css yang lumayan banyak pula, oleh karena itu diperlukan perangkat lunak bantu yang dapat mempermudah penyusunan serta memvisualisasikan kode css yang kita buat.
  • Membuat menu dropdown dengan css
    Membuat dropdown menu dengan css. Banyak sekali variasi menu web/blog yang bisa dibuat dengan css, ada bentuk menu tulisan maupun gambar biasa, dan ada juga bentuk-bentuk menu dropdown/menu bercabang secara horizontal atau vertikal. Pembuatanya juga bervariasi, ada yang menggunakan javascript, ada juga menggunakan jquery, bahkan ada yang membuat menu dari flash. Pada tulisan ini anda akan mengetahui bagaimana cara membuat menu dropdown horizontal murni dibuat dengan css. Silahkan anda simak.
  • Membuat form login dengan css
    Membuat form login dengan css tidaklah susah hanya perlu beberapa menit untuk menyusun kode cssnya karena isian form yang dibuat hanya username, password dan tombol loginya. Beda kalau kita membuat form dengan css untuk keperluan yang lengkap seperti form
  • Efek gambar grayscale dengan css
    Beberapa waktu lalu saya pernah tulis tutorial tentang Membuat efek gambar dengan css, yang membahas tentang bagaimana caranya menambahkan efek glow, berputar, dan transparan. Pada tutorial kali ini saya akan berbagi tentang bagaimana membuat efek gambar grayscale atau hitam putih dengan css.

Kiriman terbaru