Bagaimana Tabel di Blog ini Dibuat?

Rabu, 15 April 2015

Tabel diperlukan untuk menyajikan data agar lebih mudah dimengerti. Di blog ini gaya tabel dibuat dengan dua cara , cara manual dan cara otomatis. Sebenarnya tidak ada beda di antara kedua cara itu. Yang membuat beda adalah bagaimana tabel saat ditampilkan. Untuk cara manual dilakukan sebagaimana lazimnya pembuatan tabel dengan kode html dan dibuat dengan pengaturan warna, huruf dan latar, dan lain-lain, yang dilakukan secara manual. Untuk cara gaya otomatis diatur dengan membuat kode CSS terlebih dahulu dan diberi identitas tertentu sehingga begitu tabel jadi maka tampilannya akan seperti yang sudah diatur dalam kode CSS tadi. Dalam kode "table" harus dibuat manual dengan dan disisipkan identitas CSS yang dibuat sebelumnya.
Bagaimana tabel blog ini dibuat selanjutnya dipaparkan berikut ini.
Cara manual:
Berikut ini adalah contoh tabel yang saya buat secara manual.

Percobaan [A] (M) [B] (M) Laju reaksi (M.det–1)
1 0,5 0,1 5
2 0,5 0,4 50
3 x 0,4 32
4 1,0 0,8 640

Kode html tabel yang saya buat dalam postingan ini:
Keterangan kode:
<table align="center" border="1" cellpadding="0" cellspacing="0">... hingga </table>
dimaksudkan untuk memposisikan tabel di tengah halaman dengan batas garis berukuran 1 px, tanpa jarak dari tepi atas-bawah
<tr>...hingga </tr> ini adalah kode baris;
<th align="center">...hingga </th> ini adalah kode kepala kolom pada baris dengan perataan tengah;
<td align="center">...hingga </td> ini adalah kode kolom biasa pada baris dengan perataan tengah;
<table align="center" border="1" cellpadding="0" cellspacing="0" >
<tbody>
<tr>
<th align="center">Percobaan</th>
<th align="center">[A] (M)</th>
<th align="center">[B] (M)</th>
<th align="center">Laju reaksi (M.det<sup>–1</sup>)</th>
</tr>
<tr>
<td align="center">1</td> 
<td align="center">0,5</td> 
<td align="center">0,1</td> 
<td align="center">5</td> 
</tr>
<tr> 
<td align="center">2</td>
<td align="center">0,5</td> 
<td align="center">0,4</td> 
<td align="center">50</td> 
</tr>
<tr> 
<td align="center">3</td> 
<td align="center">x</td>
<td align="center">0,4</td>
<td align="center">32</td> 
</tr>
<tr>
<td align="center">4</td> 
<td align="center">1,0</td> 
<td align="center">0,8</td> 
<td align="center">640</td> 
</tr>
</tbody> 
</table>

Contoh tabel dengan gaya yang dibuat secara otomatis:
Percobaan [A] (M) [B] (M) Laju reaksi (M.det–1)
1 0,5 0,1 5
2 0,5 0,4 50
3 x 0,4 32
4 1,0 0,8 640

Kode yang saya buat adalah sebagai berikut:
<table class="tabel">
<tbody>
<tr>
<th>Percobaan</th>
<th>[A] (M)</th>
<th>[B] (M)</th>
<th>Laju reaksi (M.det<sup>–1</sup>)</th>
</tr>
<tr>
<td>1</td>
<td>0,5</td> 
<td>0,1</td> 
<td>5</td>
</tr>
<tr>
<td>2</td>
<td>0,5</td> 
<td>0,4</td>
<td>50</td>
</tr>
<tr> 
<td>3</td>
<td>x</td>
<td>0,4</td>
<td>32</td>
</tr>
<tr>
<td>4</td>
<td>1,0</td> 
<td>0,8</td>
<td>640</td>
</tr>
</tbody> 
</table> 
 
Kode CSS yang saya buat dan saya letakkan di atas kode ]]></b:skin> dalam template blog seperti berikut ini:
/* ----format tabel urip dot infoku---- */
.tabel{
border-collapse:collapse; 
margin-left:auto; 
margin-right:auto;
text-align:center;
}
.tabel th { padding:5px 15px; background-color:#2E8B57;color:white;border-top:green 1px solid; border-left:green 1px solid; border-right:green 1px solid;border-bottom:3px solid darkgreen;}
.tabel td:nth-child(1) { padding:3px 10px; background-color: #76B291; color:black; }
.tabel td{ padding:3px; border:green 1px solid; }
/* Ini untuk memberikan tampilan minimal jika menggunakan IE8 dan di bawahnya */
.tabel tr{ background: #99FF99; }
/* Menentukan warna latar untuk semua baris ganjil */
.tabel tr:nth-child(odd){ background: #99FF99;}
/* Menentukan warna latar untuk semua baris genap */
.tabel caption{font-family:arial;font-size:14px; color:green;text-align:left; background:none}
/* Menentukan warna latar untuk kolom pertama */
.tabel tr:nth-child(even){background: #D6FFD6;} 

Keuntungan menggunakan tabel gaya otomatis ini membuat kita kerja lebih simpel. Hanya saja ini akan kita terapkan untuk setiap tabel yang kita buat dengan gaya monoton begitu saja.

Wassalam
Bagikan di

Tidak ada komentar:

Poskan Komentar

 
Copyright © 2015-2016 Urip dot Info | Disain Template Oleh Herdiansyah Hamzah Dimodivikasi Urip.Info