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.
  • 147 Nama warna dalam css
    Sebelumnya saya menulis tentang 6 cara penulisan warna dalam css. Pada tulisan ini saya berbagi tentang 147 nama warna yang bisa anda gunakan dalam css. Nama-nama warna ini sering dikatakan sebagai keyword yang merujuk pada warna tertentu yang hampir didukung oleh semua browser yang ada sekarang.
  • Membuat efek gambar di blog dengan css
    CSS sangat felxibel bisa digunakan untuk banyak keperluan, berbagai media, semua platform dan semua sistem pengelola konten (wordpress, blogger, joomla dll). Penggunaanya juga sangat mudah sehingga kita bisa brekreasi dengan tulisan maupun gambar. Kali ini saya akan berbagi cara bagaimana menyisipkan efek gambar dengan css pada blogger.
  • Cara Membagi halaman hasil cetak printer dengan css
    Jika kita mencetak sebuah halaman web yang isinya panjang, biasanya hasil cetaknya bersambung menjadi beberapa halaman yang tidak pasti bagian-bagianya. Bisa saja satu halaman terdiri dari beberapa bagian bahasan atau format yang berbeda sehingga menyulit
  • 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