Custom Search

Pages

Friday, July 27, 2012

Membuat Tabel dengan Atribut Rowspan dan Colspan dalam HTML

Diposkan oleh La Ode Amir Jaya
Dalam tutorial sebelumnya penulis telah membahas mengenal rowspan dalam tabel HTML dan mengenal colspan dalam tabel html, pada kesempatan ini penulis mencoba membahas bagaimana membuat tabel dengan menggunakan atribut rowspan dan colspan. Mari sejenak kita perhatikan tabel berikut.


Bagaimanakah membuat tabel di atas dengan menggunakan html? Untuk hal, marilah kita belajar tahap demi tahap dan mengikuti langkah-langkah sebagai berikut:

Pada Sel "No. dan Nama Lengkap" ada 2 baris (dimerger menjadi 1). Kemudian pada se Jenis Kelamin dan Nilai Ujian ada 3 kolom (dimerger menjadi 1). Kita mulai dahulu baris 1 dengan isi sel kolom 1: No, kolom 2: Nama Lengkap, kolom 3: Jenis Kelamin, kolom 4: kosong , Kolom  5: Nilai Ujian, sedangkan 6 dan 7 kosong Sintaksnya sebagai berikut:

<table border="1" cellpadding="0" cellspacing="0" bordercolor="black">

<tr align="center" valign="middle">
<td align="center" valign="middle" width="25px"><b>No.</b></td>
<td align="center" valign="middle" width="100px"><b>Nama Siswa</b></td>
<td align="center" valign="middle" width="75px"><b>Jenis Kelamin</b></td>
<td align="center" valign="middle" width="75px"></td>
<td align="center" valign="middle" width="100px"><b>Nilai Ujian</b></td>
<td align="center" valign="middle" width="100px"></td>
<td align="center" valign="middle" width="100px"></td>
</tr>

</table>

Hasilnya sebagai berikut:
No. Nama Siswa Jenis Kelamin Nilai Ujian

Selanjutnya kita lihat lagi baris 2 pada tabel 1, yakni kolom 1: kosong, kolom 2: kosong, kolom 3: L, kolom 4: P, Kolom 5: Bahasa Indonesia, kolom 6: Bahasa Inggris, kolom 7: Matematika. Dengan tetap menuliskan sintaks pada baris 1, maka sintaksnya sebagai berikut:

<table border="1" cellpadding="0" cellspacing="0" bordercolor="black">

<tr align="center" valign="middle">
<td align="center" valign="middle" width="25px"><b>No.</b></td>
<td align="center" valign="middle" width="100px"><b>Nama Siswa</b></td>
<td align="center" valign="middle" width="75px"><b>Jenis Kelamin</b></td>
<td align="center" valign="middle" width="75px"></td>
<td align="center" valign="middle" width="100px"><b>Nilai Ujian</b></td>
<td align="center" valign="middle" width="100px"></td>
<td align="center" valign="middle" width="100px"></td>
</tr>

<tr align="center" valign="middle">
<td align="center" valign="middle" width="25px"></td>
<td align="center" valign="middle" width="100px"></td>
<td align="center" valign="middle" width="75px"><b>L</b></td>
<td align="center" valign="middle" width="75px"><b>P</b></td>
<td align="center" valign="middle" width="100px"><b>Bahasa Indonesia</b></td>
<td align="center" valign="middle" width="100px"><b>Bahasa Inggris</b></td>
<td align="center" valign="middle" width="100px"><b>Matematika</b></td>
</tr>

</table>

Hasilnya sebagai berikut:

No. Nama Siswa Jenis Kelamin Nilai Ujian
L P Bahasa Indonesia Bahasa Inggris Matematika

Sekarang kita melakukan merger pada sel-sel tabel di atas yakni sebagai berikut:
  • Pada kolom 1 baris 1 dan 2 yakni menjadi sel No. kalau dimerger maka dalam sintaks kita gunakan perintah rowspan. Karena yang akan dimerger ada 2 baris, maka sintaksnya adalah: rowspan="2"
  • Pada kolom 2 baris 1 dan 2 yakni menjadi sel Nama Siswa. kalau dimerger maka dalam sintaks kita gunakan perintah rowspan juga (merger baris). Karena yang akan dimerger ada 2 baris, maka sintaksnya adalah: rowspan="2" (sama dengan bagian 1).
  • Pada baris 1 kolom 3 dan 4 (Jenis Kelamin), kalau dimerger maka kita menggunakan perintah colspan (merger kolom). Karena yang akan dimerger ada 2 kolom maka sintaksnya: colspan="2" 
  • Pada baris 1 kolom 5, 6 dan 7 (Nilai Ujian), kalau dimerger maka kita juga menggunakan perintah colspan (merger kolom). Karena yang akan dimerger ada 3 kolom maka sintaksnya: colspan="3". Perlu diperhatikan bahwa, sel yang akan dimerger, cukup ditulis 1x kali dan tidak boleh ditulis lagi pada baris selanjutnya. Sintaks html di atas menjadi:
<table border="1" cellpadding="0" cellspacing="0" bordercolor="black">

<tr align="center" valign="middle">
<td align="center" valign="middle" width="25px" rowspan="2"><b>No.</b></td>
<td align="center" valign="middle" width="100px"rowspan="2"><b>Nama Siswa</b></td>
<td align="center" valign="middle" width="75px" colspan="2"><b>Jenis Kelamin</b></td>
<td align="center" valign="middle" width="75px"></td>
<td align="center" valign="middle" width="100px" colspan="3"><b>Nilai Ujian</b></td>
<td align="center" valign="middle" width="100px"></td>
<td align="center" valign="middle" width="100px"></td>
</tr>

<tr align="center" valign="middle">
<td align="center" valign="middle" width="25px"></td>
<td align="center" valign="middle" width="100px"></td>
<td align="center" valign="middle" width="75px"><b>L</b></td>
<td align="center" valign="middle" width="75px"><b>P</b></td>
<td align="center" valign="middle" width="100px"><b>Bahasa Indonesia</b></td>
<td align="center" valign="middle" width="100px"><b>Bahasa Inggris</b></td>
<td align="center" valign="middle" width="100px"><b>Matematika</b></td>
</tr>

</table>

Tampak pada sintaks di atas bahwa ada sebagian sintaks yang dicoret. Sintaks yang dicoret artinya tidak boleh ditulis lagi, sehingga sintaks tabel di atas menjadi seperti berikut:

<table border="1" cellpadding="0" cellspacing="0" bordercolor="black">

<tr align="center" valign="middle">
<td align="center" valign="middle" width="25px" rowspan="2"><b>No.</b></td>
<td align="center" valign="middle" width="100px"rowspan="2"><b>Nama Siswa</b></td>
<td align="center" valign="middle" width="75px" colspan="2"><b>Jenis Kelamin</b></td>
<td align="center" valign="middle" width="100px" colspan="3"><b>Nilai Ujian</b></td>
</tr>

<tr align="center" valign="middle">
<td align="center" valign="middle" width="75px"><b>L</b></td>
<td align="center" valign="middle" width="75px"><b>P</b></td>
<td align="center" valign="middle" width="100px"><b>Bahasa Indonesia</b></td>
<td align="center" valign="middle" width="100px"><b>Bahasa Inggris</b></td>
<td align="center" valign="middle" width="100px"><b>Matematika</b></td>
</tr>

</table>

Hasilnya:

No. Nama Siswa Jenis Kelamin Nilai Ujian
L P Bahasa Indonesia Bahasa Inggris Matematika

Selanjutnya kita lanjutnya dengan baris di bawahnya dan sintaks di atas (Tabel 1). Perlu diingat, sintaks di kita tulis lagi. Sintaks HTML tabel 1 sebagai berikut:

<table border="1" cellpadding="0" cellspacing="0" bordercolor="black">

<tr align="center" valign="middle">
<td align="center" valign="middle" width="25px" rowspan="2"><b>No.</b></td>
<td align="center" valign="middle" width="100px"rowspan="2"><b>Nama Siswa</b></td>
<td align="center" valign="middle" width="75px" colspan="2"><b>Jenis Kelamin</b></td>
<td align="center" valign="middle" width="100px" colspan="3"><b>Nilai Ujian</b></td>
</tr>

<tr align="center" valign="middle">
<td align="center" valign="middle" width="75px"><b>L</b></td>
<td align="center" valign="middle" width="75px"><b>P</b></td>
<td align="center" valign="middle" width="100px"><b>Bahasa Indonesia</b></td>
<td align="center" valign="middle" width="100px"><b>Bahasa Inggris</b></td>
<td align="center" valign="middle" width="100px"><b>Matematika</b></td>
</tr>

<tr align="center" valign="middle">
 <td align="center" valign="middle" width="25px">1.</td>
<td align="left" valign="middle" width="100px">Siswa A</td>
<td align="center" valign="middle" width="75px">L</td>
<td align="center" valign="middle" width="75px">-</td>
<td align="center" valign="middle" width="100px">7,25</td>
<td align="center" valign="middle" width="100px">8,50</td>
<td align="center" valign="middle" width="100px">9,00</td>
</tr>

<tr align="center" valign="middle">
<td align="center" valign="middle" width="25px">2.</td>
<td align="left" valign="middle" width="100px">Siswa B</td>

<td align="center" valign="middle" width="75px">L</td>
<td align="center" valign="middle" width="75px">-</td>
<td align="center" valign="middle" width="100px">7,00</td>
<td align="center" valign="middle" width="100px">6,75</td>
<td align="center" valign="middle" width="100px">6,00</td>
</tr>

<tr align="center" valign="middle">
<td align="center" valign="middle" width="25px">3.</td>
<td align="left" valign="middle" width="100px">Siswa C</td>
<td align="center" valign="middle" width="75px">L</td>
<td align="center" valign="middle" width="75px">-</td>
<td align="center" valign="middle" width="100px">6,25</td>
<td align="center" valign="middle" width="100px">7,00</td>
<td align="center" valign="middle" width="100px">7,75</td>
</tr>

<tr align="center" valign="middle">
<td align="center" valign="middle" width="25px">4.</td>
<td align="left" valign="middle" width="100px">Siswa D</td>

<td align="center" valign="middle" width="75px">L</td>
<td align="center" valign="middle" width="75px">-</td>
<td align="center" valign="middle" width="100px">8,00</td>
<td align="center" valign="middle" width="100px">7,00</td>
<td align="center" valign="middle" width="100px">7,75</td>
</tr>

<tr align="center" valign="middle">
<td align="center" valign="middle" width="25px">5.</td>
<td align="left" valign="middle" width="100px">Siswa E</td>

<td align="center" valign="middle" width="75px">-</td>
<td align="center" valign="middle" width="75px">P</td>
<td align="center" valign="middle" width="100px">8,50</td>
<td align="center" valign="middle" width="100px">6,75</td>
<td align="center" valign="middle" width="100px">7,00</td>
</tr>

<tr align="center" valign="middle">
<td align="center" valign="middle" width="25px">6.</td>
<td align="left" valign="middle" width="100px">Siswa F</td>

<td align="center" valign="middle" width="75px">-</td>
<td align="center" valign="middle" width="75px">P</td>
<td align="center" valign="middle" width="100px">6,75</td>
<td align="center" valign="middle" width="100px">8,25</td>
<td align="center" valign="middle" width="100px">7,00</td>
</tr>
<tr align="center" valign="middle">
 <td align="center" valign="middle" width="25px">7.</td>
<td align="left" valign="middle" width="100px">Siswa G</td>

<td align="center" valign="middle" width="75px">-</td>
<td align="center" valign="middle" width="75px">P</td>
<td align="center" valign="middle" width="100px">7,00</td>
<td align="center" valign="middle" width="100px">7,25</td>
<td align="center" valign="middle" width="100px">7,25</td>
</tr>


<tr align="center" valign="middle">
<td align="center" valign="middle" width="25px">8.</td>
<td align="left" valign="middle" width="100px">Siswa H</td>

<td align="center" valign="middle" width="75px">-</td>
<td align="center" valign="middle" width="75px">P</td>
<td align="center" valign="middle" width="100px">7,00</td>
<td align="center" valign="middle" width="100px">7,00</td>
<td align="center" valign="middle" width="100px">6,75</td>
</tr>


<tr align="center" valign="middle">
<td align="center" valign="middle" width="25px">9.</td>
<td align="left" valign="middle" width="100px">Siswa I</td>
<td align="center" valign="middle" width="75px">-</td>
<td align="center" valign="middle" width="75px">P</td>
<td align="center" valign="middle" width="100px">6,75</td>
<td align="center" valign="middle" width="100px">6,25</td>
<td align="center" valign="middle" width="100px">6,00</td>
</tr>

<tr align="center" valign="middle">
<td align="center" valign="middle" width="25px">10.</td>
<td align="left" valign="middle" width="100px">Siswa J</td>
<td align="center" valign="middle" width="75px">-</td>
<td align="center" valign="middle" width="75px">P</td>
<td align="center" valign="middle" width="100px">8,25</td>
<td align="center" valign="middle" width="100px">8,00</td>
<td align="center" valign="middle" width="100px">9,00</td>
</tr>

</table>

Hasilnya sebagai berikut:

No. Nama Siswa Jenis Kelamin Nilai Ujian
L P Bahasa Indonesia Bahasa Inggris Matematika
1. Siswa A L - 7,25 8,50 9,00
2. Siswa B L - 7,00 6,75 6,00
3. Siswa C L - 6,25 7,00 7,75
4. Siswa D L - 8,00 7,00 7,75
5. Siswa E - P 8,50 6,75 7,00
6. Siswa F - P 6,75 8,25 7,00
7. Siswa G - P 7,00 7,25 7,25
8. Siswa H - P 7,00 7,00 6,75
9. Siswa I - P 6,75 6,25 6,00
10. Siswa J - P 8,25 8,00 9,00

Tampak Tabel di atas sama dengan gambar pada tabel 1. Selamat Mencoba dan Anda juga pasti bisa!

G+

1 komentar:

sora Rara said...

hadeee...tuh kode byk bener...
emang kalau dengan tabel blog jadi lebih rapi.
tp low liat kode sebayk itu aja ane udah pusing, blm bikinnya lagi...!!!!
:(

Post a Comment

Silahkan tinggalkan komentar Anda. Jangan menyertakan url/nama domain dalam isi komentar. Komentar Anda sebaiknya berhubungan dengan artikel yang dibahas. Url/blog yang mengandung unsur pornografi, pornoaksi, obat-obatan/resep obat, perdagangan senjata api/tajam, yang berhubungan dengan download MP3/MP4/Video, atau url/blog/website yang melanggar serta yang melakukan SPAM termasuk blog/web yang membajak isi dalam website ini tanpa menyertakan url www.naskah.net akan dihapus.