Link Banner
Link Sahabat
Membuat Tabel pada Posting di Blog (Lanjutan)Di bawah ini akan saya contohkan tabel dengan model masalah yang berbeda dengan yang terdahulu. Mungkin anda akan menjumpai tabel seperti yang di bawah ini
Contoh:
<center>Jadwal Ulangan Umum Bersama</center>
<table width="480px" cellspacing="0px" cellpadding="5px" border="2px">
<tr align="center" bgcolor="#39C5FF">
<td><b>No</b></td>
<td><b>Tanggal</b></td>
<td><b>Jam</b></td>
<td><b>Materi</b></td>
<td><b>Peserta</b></td>
</tr>
<tr align="left" bgcolor="#FFFFFF">
<td>1</td>
<td>1 Juli 2009</td>
<td>14.00 – 15.00<br/>18.00 – 19.00<br/>15.00 – 16.00<br/>19.00 – 20.00</td>
<td>PAI<br/>PAI<br/>Tahsinul Khot<br/>Tahsinul Khot</td>
<td>Santri Siang<br/>Santri Malam<br/> Santri Siang<br/>Santri Malam</td>
</tr>
<tr align="left" bgcolor="#FFFFFF">
<td>2</td>
<td>2 Juli 2009</td>
<td>14.00 – 15.00<br/>18.00 – 19.00<br/>15.00 – 16.00<br/>19.00 – 20.00</td>
<td>Ilmu Tajwid<br/>Ilmu Tajwid<br/>Hafalan<br/>Hafalan</td>
<td>Santri Siang<br/>Santri Malam<br/> Santri Siang<br/>Santri Malam</td>
</tr>
<tr align="left" bgcolor="#FFFFFF">
<td>3</td>
<td>2 Juli 2009</td>
<td>14.00 – 15.00<br/>18.00 – 19.00<br/>15.00 – 16.00<br/>19.00 – 20.00</td>
<td>Praktek Wudlu<br/> Praktek Wudlu<br/>Praktek Sholat<br/> Praktek Sholat</td>
<td>Santri Siang<br/>Santri Malam<br/> Santri Siang<br/>Santri Malam</td>
</tr>
</table>
Hasil :
| No | Tanggal | Jam | Materi | Peserta |
| 1 | 1 Juli 2009 | 14.00 – 15.00 18.00 – 19.00 15.00 – 16.00 19.00 – 20.00 | PAI PAI Tahsinul Khot Tahsinul Khot | Santri Siang Santri Malam Santri Siang Santri Malam |
| 2 | 2 Juli 2009 | 14.00 – 15.00 18.00 – 19.00 15.00 – 16.00 19.00 – 20.00 | Ilmu Tajwid Ilmu Tajwid Hafalan Hafalan | Santri Siang Santri Malam Santri Siang Santri Malam |
| 3 | 2 Juli 2009 | 14.00 – 15.00 18.00 – 19.00 15.00 – 16.00 19.00 – 20.00 | Praktek Wudlu Praktek Wudlu Praktek Sholat Praktek Sholat | Santri Siang Santri Malam Santri Siang Santri Malam |
Dibawah ini adalah contoh dengan menggunakan rowspan dan colspan
Rowspan : digunakan untuk judul (isi) table yang menggunakan dua baris cell dalam satu judul (tulisan)
Colspan : digunakan untuk judul (isi) table yang menggunakan dua colom cell dalam satu judul (tulisan)
Contoh:
<center>Daftar Nilai Matematikan Kelas 7</center>
<table width="480px" cellspacing="0px" cellpadding="5px" border="2px">
<tr align="center" bgcolor="#39C5FF">
<td rowspan="2"><b>No</b></td>
<td rowspan="2"><b>Nama</b></td>
<td colspan="2"><b>Semester</b></td>
<td rowspan="2"><b>Keterangan</b></td>
</tr>
<tr align="center" bgcolor="#39C5FF">
<td><b>Gasal</b></td>
<td><b>Genap</b></td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td>1<br/>2<br/>3<br/>4</td>
<td>Sukiman<br/>Sri Hastuti<br/>Bima<br/>Santoso</td>
<td>7.50<br/>8.00<br/>9.00<br/>7.00</td>
<td>7.25<br/>8.00<br/>9.50<br/>6.50</td>
<td>Cukup Bagus<br/>Bagus<br/>Sangat Bagus<br/>Cukup</td>
</tr>
</table>
Hasil :
| No | Nama | Semester | Keterangan | |
| Gasal | Genap | |||
| 1 2 3 4 | Sukiman Sri Hastuti Bima Santoso | 7.50 8.00 9.00 7.00 | 7.25 8.00 9.50 6.50 | Cukup Bagus Bagus Sangat Bagus Cukup |
Bila anda menginginkan isi dari tabel dipisahkan oleh garis dan mempunyai warna berbeda pada setiap barisnya, sebagai berikut :
Contoh:
<center>Daftar Nilai Matematikan Kelas 7</center>
<table width="480px" cellspacing="0px" cellpadding="5px" border="2px">
<tr align="center" bgcolor="#39C5FF">
<td rowspan="2"><b>No</b></td>
<td rowspan="2"><b>Nama</b></td>
<td colspan="2"><b>Semester</b></td>
<td rowspan="2"><b>Keterangan</b></td>
</tr>
<tr align="center" bgcolor="#39C5FF">
<td><b>Gasal</b></td>
<td><b>Genap</b></td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td>1</td>
<td>Sukiman</td>
<td>7.50</td>
<td>7.25</td>
<td>Cukup Bagus</td>
</tr>
<tr align="center" bgcolor="#FFFC00">
<td>2</td>
<td>Sri Hastuti</td>
<td>8.00</td>
<td>8.00</td>
<td>Bagus</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td>3</td>
<td>Bima</td>
<td>9.00</td>
<td>9.50</td>
<td>Sangat Bagus</td>
</tr>
<tr align="center" bgcolor="#FFFC00">
<td>4</td>
<td>Santoso</td>
<td>7.00</td>
<td>6.50</td>
<td>Cukup</td>
</tr>
</table>
Hasil :
| No | Nama | Semester | Keterangan | |
| Gasal | Genap | |||
| 1 | Sukiman | 7.50 | 7.25 | Cukup Bagus |
| 2 | Sri Hastuti | 8.00 | 8.00 | Bagus |
| 3 | Bima | 9.00 | 9.50 | Sangat Bagus |
| 4 | Santoso | 7.00 | 6.50 | Cukup |
Catatan :
Bila pada tabel anda terdapat jarak yang sangat jauh, maka hilangkan jarak yang dihasilkan oleh enter atau dengan kata lain semua kode harus ditulis secara bersambungan tidak boleh dipisahkan oleh enter.
Semoga bermanfaat.
Artikel Lain Yang Terkait :
Komentar :
1
Profil Sosial
DAFTAR ARTIKEL
Perjuangan demi Bank Saku & Rayatku
Tutorial Blog Bagi Pemula
BANNER SAHABAT
jazakumullah khoir akh....