Kamis, 16 Agustus 2012

Cara Membuat Tabel



Ketika menulis sebuah artikel kadang kita membutuhkan tabel untuk menyajikan data. Tabel tersebut tentunya harus sesuai dengan template blog. Tabel adalah daftar berisi ikhtisar sejumlah data atau  informasi. Dengan adanya tabel ini data yang kita tampilkan akan lebih teratur dan mudah dipahami oleh pembaca. Untuk membuat sebuah tabel diperlukan beberapa tag html. Perintah pembuatan tabel diawali dengan tag <table> dan diakhiri dengan tag </table>, tag <tr> dan </tr> adalah fungsi perintah pembuatan baris, sedangkan <td> dan </td> adalah perintah pembuatan kolom dalam baris. Untuk memahami beberapa tag dalam membuat tabel silahkan anda ikuti beberapa cara membuat tabel di bawah ini. Semoga dapat bermanfaat bagi anda.

Bagian paling atas dari tabel adalah kepala tabel atau tabel header. Header tabel ditunjukkan dengan tag <th> dan </th>. Header tabel secara default akan ditulis tebal dan perataan rata kiri. Perhatikan contoh di bawah ini :
<table border="1"><tr><th>Nama</th><th>Tanggal Lahir</th></tr><tr><td>Anton</td><td>5 Januari 1978</td></tr><tr><td>Budiman</td><td>12 Maret 1971</td></tr></table>
Hasilnya seperti di bawah ini :

NamaTanggal Lahir
Anton5 Januari 1978
Budiman12 Maret 1971

Untuk menambah kolom dapat dilakukan dengan meletakan tag <th>....</th> dan <td>....</td> sebelum tag </tr>. Perhatikan contoh berikut ini :
<table border="1"><tr><th>Nama</th><th>Tanggal Lahir</th><th>Jenis Kelamin</th></tr><tr><td>Anton</td><td>5 Januari 1978</td><td>Laki-laki</td></tr><tr><td>Budiman</td><td>12 Maret 1971</td><td>Laki-laki</td></tr></table>
Hasilnya seperti di bawah ini :


NamaTanggal LahirJenis Kelamin
Anton5 Januari 1978Laki-laki
Budiman12 Maret 1971Laki-laki


Untuk menambah baris ke bawah tinggal copy saja salah satu baris, misalnya <tr><td>Budiman</td><td>12 Maret 1971</td><td>Laki-laki</td></tr> dan letakan sebelum tag </table>. Silahkan copy sebanyak yang anda butuhkan.

NamaTanggal LahirJenis Kelamin
Anton5 Januari 1978Laki-laki
Budiman12 Maret 1971Laki-laki
Budiman12 Maret 1971Laki-laki
Budiman12 Maret 1971Laki-laki
Budiman12 Maret 1971Laki-laki



Untuk membuat tabel dengan modifikasi tingkat lanjut akan membutuhkan beberapa kode tambahan seperti di bawah ini :
  • align: perintah perataan tulisan (left: rata kiri, center: rata tengah, dan right: rata kanan).
  • valign: perintah justifikasi tulisan (top: rata atas, middle: rata tengah, dan bottom: rata bawah)
  • bgcolor: warna dasar tabel biasanya menggunakan rgb (x,x,x) atau #code warna;
  • style font: jenis huruf, Georgia, Arila, Times New Roman dll;
  • style font-size: ukuran huruf, pixel(px) atau %;
  • style font-style: gaya penulisan huruf (italic, normal)
  • style font-weight: gaya penulisan huruf (bold) 

Tidak ada komentar:

Posting Komentar