Cara Membuat Dan Mengatur Tabel di Blog

Cara Membuat dan Jenis-Jenis Tabel

Salam katro - Ketika katro bukan berarti lantas langsung mengeluh dan merasa dunia ini tidak pernah adil emang dunia ini tidak adil, untuk itulah adanya kesempurnaan dan tidak sempurna, dan posisi katro itu menguntungkan untuk kita yang haus untuk belajar, maka dari itu kalo lagi di posisi ini misal cari Cara Membuat Dan Mengatur Tabel di Blog atau lagi cari cara pengen ganteng atau cari cara pengen pinter dan sebagainya.

Semua itu butuh proses bukan, nah kalau itu sudah ditemukan yah tinggal menikmati saja prosesnya, seperti satu ini kita mau coba bikin jenis tabel untuk memper ramai tampilan blog atau untuk kebutuhan lainya, yang penting mah untuk kali ini mau bikin tabel.

Inget semua butuh proses, apalagi kalau mau sukses yah, nah sekarang tinggal teliti dan pelajari dengan santai saja.

Sebelum kita mulai, katro ingin menjelaskan sedikit mengenai element yang terdapat dalam tabel. Sebuah tabel terdiri dari beberapa element pelengkap seperti <table> yang didalamnya terdapat <caption> (Title table), <th> (Header table), <td> (Table Column) dan <tr> (Table Row).
1. Kerangka Table Sederhana (Standard)
Untuk membuat sebuah Tabel sederhana diperlukan 3 (tiga) buah element seperti <table>, <td> dan <tr> sebagai penyusunnya.

<table border="1">
        <tr><td>Division 1.1</td><td>Division 1.2</td><td>Division 1.3</td></tr>
        <tr><td>Division 2.1</td><td>Division 2.2</td><td>Division 2.3</td></tr>
        <tr><td>Division 3.1</td><td>Division 3.2</td><td>Division 3.3</td></tr>
</table>

2. Tabel Header
Tabel header terbentuk dari penambahan element <th>. Secara default (tanpa penambahan CSS tambahan), biasanya teks yang terdapat didalamnya akan tercetak tebal dan rata tengah (center).

 

<table border="1">
<tbody>
     <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td>Division 1.1</td><td>Division 1.2</td><td>Division 1.3</td></tr>
    <tr><td>Division 2.1</td><td>Division 2.2</td><td>Division 2.3</td></tr>
    <tr><td>Division 3.1</td><td>Division 3.2</td><td>Division 3.3</td></tr>
</tbody>
</table>

3. Menambahkan Judul Tabel
Element <caption> adalah sebuah element pada tabel untuk menambahkan judul kedalam tabel yang penempatannya tepat di bawah element <table> dan textnya secara otomatis akan rata tengah.

<table border="1">
   <caption>HEADER TITLE</caption>
<tbody>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td>Division 1.1</td><td>Division 1.2</td><td>Division 1.3</td></tr>
    <tr><td>Division 2.1</td><td>Division 2.2</td><td>Division 2.3</td></tr>
    <tr><td>Division 3.1</td><td>Division 3.2</td><td>Division 3.3</td></tr>
</tbody>
</table>

4. Menggabungkan Sel-Sel (Marge Cell) Tabel
Ada dua cara menggabungkan sel table, yaitu vertical (marge row) dan horizontal (marge coloumn). Attribut yang digunakan pun ada dua, rowspan dan colspan.

• Marge Cell Colspan

 <table border="1">
   <caption>HEADER TITLE</caption>
<tbody>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td colspan="2">Division 1.1</td><td>Division 1.2</td><td>Division 1.3</td></tr>
    <tr><td>Division 2.1</td><td>Division 2.2</td><td>Division 2.3</td></tr>
    <tr><td>Division 3.1</td><td>Division 3.2</td><td>Division 3.3</td></tr>
</tbody>
</table>

Catatan :
Menambahkan attribute colspan="2" pada element <td> berarti anda akan menggabungkan 2 cell column atau cell horizontal menjadi satu dan yang saya beri tanda warna biru diatas harus anda hapus. Nah, hal ini juga berlaku untuk penggabungan 2 sell row (vertical) dengan menambahkan attribut rowspan="2" dan menghapus table yang berada di bawahnya. Untuk menggabungkan 3 atau lebih sel menjadi satu, maka ganti angka 2 menjadi 3 dan seterusnya.

• Marge Cell Rowspan

<table border="1">
   <caption>HEADER TITLE</caption>
<tbody>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td rowspan="2">Division 1.1</td><td>Division 1.2</td><td>Division 1.3</td></tr>
    <tr><td>Division 2.1</td><td>Division 2.2</td><td>Division 2.3</td></tr>
    <tr><td>Division 3.1</td><td>Division 3.2</td><td>Division 3.3</td></tr>
</tbody>
</table>

Mengatur dan Mendesain Tampilan Tabel

Mengubah tampilan sebuah tabel dengan merubah warna border, background, tulisan atau mengatur jarak serta perataan text cukup menambahkan beberapa pengaturan pada kode CSS yang terdapat di dalam template.

table, th, td {
  border:1px solid #ccc;
  border-collapse:collapse;
  font:normal normal 13px/1.4 Arial,Sans-Serif;
  color:#333;
  padding:.4em 0;
  text-align:left;
  background:#fff;
  width:100%;
}

Attribut	Penjelasan
table, th dan td	pengaturan tabel secara keseluruhan
border:	mengatur warna dan ukuran border
border-collapse:	jika attribut ini tidak diberikan, maka table akan terlihat tidak rapat
font:	mengatur jenis dan ukuran huruf
color:	mengatur warna huruf yang terdapat di dalam table
padding:	mengatur jarak antara tabel dengan border
text-align:	pengaturan untuk perataan huruf (rata tengah, kiri, dan kanan)
background:	mengatur warna latar belakang tabel
width:	mengatur lebar tabel secara keseluruhan

Mungkin mulai mengerti dengan Cara Membuat Dan Mengatur Tabel di Blog dan semakin menikmati saja. Nah, di bawah ini adalah contoh tabel dengan pengaturan element yang terpisah-pisah dan itu berarti anda bisa melakukan pengaturan perbagian, mulai dari pengaturan judul, header, border, background dan seterusnya.

table {
  border-collapse:collapse;
}
table tr {
  background:#fafafa;
}
table caption {
  background:#000;
  vertical-align:top;
  padding:5px 10px;
  border:1px solid #bbb;
  color:#fff
}
table th, table td {
  vertical-align:top;
  padding:5px 10px;
  border:1px solid #bbb;
}
table tr:nth-child(even) {
  background:#f5f5f5;
}
table  th {
  background:#418AA4;
  color:#fff;
  font-weight:bold;
}

Demo / hasil dari modifikasi kode CSS tabel di atas seperti terlihat pada gambar di bawah ini :

Selesai. Cara Membuat Dan Mengatur Tabel di Blog Semoga Bermanfa'at. Jika ada yang tidak mengerti tolong tanyakan di kolom komentar dibawah ini. 

repost Cara Membuat Dan Mengatur Tabel di Blog.