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 **

Artikel Lainnya

  • Membuat header tetap diatas halaman
    Banyak variasi tampilan header atau footer yang digunakan untuk menghiasi halaman web dan dapat kita temukan diinternet, mulai dari yang sekedar tulisan judul, gambar logo sampai dengan model otomatis muncul dan hilang. Pada tulisan berikut ini, saya akan berbagi trick cara membuat header dan footer yang tetap diatas dan dibawah bagian halaman.
  • Membuat header table pada tiap halaman cetak
    Format cetak laporan yang baik tentunya sangatlah penting dalam membuat sebuah aplikasi berbasi web. Biasanya laporan yang menampilkan banyak record disajikan dalam bentuk tabel dengan judul kolom berbeda.
  • 6 Cara penulisan warna dalam css
    Cara penulisan warna dalam css untuk keperluan halaman web bisa kita lakukan dengan 6 cara. Semuanya mengarah pada penggunaan warna yang sama tapi ditulis dengan cara berbeda. Berikut ini saya akan berbagi tentang beberapa metode penulisan warna dalam css yang bisa anda gunakan.
  • Perbedaan html dengan css
    Dalam bidang desain web, HTML dan CSS dianggap sebagai sesuatu yang wajib digunakan dalam menyusun sebuah halaman web/blog. Hal itu sangatlah wajar karena perpaduan keduanya mampu menciptakan sebuah tampilan menarik, disukai mesin pencari, optimal dari segi kecepatan. Tapi apakah mereka bisa dipisahkan? seperti apa jika itu dilakukan? Apa perbedaan html dan css? Artikel berikut ini akan membantu anda membedakan HTML dengn CSS dari segi fungsi serta penulisan.
  • Membuat efek kotak tulisan dengan css
    CSS memilki kemampuan sangat luas dan dapat diterapkan untuk banyak kasus. Berikut ini adalah contoh sederhana untuk membuat sebuah kotak yang fleksibel bisa diletakkan dimana saja pada halaman web anda.

Kiriman terbaru