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 :

Jadwal Ulangan Umum Bersama

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 :

Daftar Nilai Matematikan Kelas 7

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 :

Daftar Nilai Matematikan Kelas 7

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 :