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 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.
  • 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.
  • Mengatur gambar dengan css
    CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari. CSS dapat diterapkan hampir pada semua objek yang disisipkan dalam kode html baik itu tulisan, tabel dan gambar maupun objek lainya. Kali ini saya akan berbagi cara mengatur gambar dengan css agar dapat disajikan lebih hemat tempat dan hemat kode dan tentunya menarik.
  • Membuat tulisan ditengah
    Panduan lengkap cara membuat tulisan/objek di posisi tengah halaman dengan HTML/css
  • Menyusun tampilan form tanpa perintah table
    Tabel dalam html biasanya digunakan untuk menyusun laporan atau membuat layout/tampilan elemen html agar terlihat lebih rapi. Pada tutorial kali ini saya akan berbagi tentang bagaimana Menyusun tampilan form input tanpa perintah table, tetapi menggunakan css. Teknik menyusun tampilan elamen html tanpa perintah tabel ini sering disebut dengan tableless (sedikit tabel).

Kiriman terbaru