MEMBUAT Tabel DENGAN Atribut Rowspan Dan Colspan Hearts HTML

Dalam tutorial sebelumnya Penulis has membahas Mengenal rowspan hearts tabel HTM L dan Mengenal colspan html hearts tabel , PADA kesempatan Penyanyi Penulis Mencoba membahas bagaimana MEMBUAT tabel DENGAN using atribut rowspan Dan colspan. Mari sejenak kitd perhatikan tabel berikut.

Bagaimanakah MEMBUAT tabel di differences DENGAN using html? Untuk review 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 PT KARYA CIPTA PUTRA baris 1 DENGAN isi sel Kolom 1: Tidak, 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 = "hitam">

<Tr align = "center" valign = "middle">

<Td align = "center" valign = "middle" width = "25px"> <b> Tidak ada. </ 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:

Tidak.

Nama Siswa

Jenis Kelamin

Nilai Ujian

Selanjutnya kitd 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. Mencari Google Artikel Tetap menuliskan sintaks PADA baris 1, Maka sintaksnya sebagai berikut:

<Table border = "1" cellpadding = "0" cellspacing = "0" bordercolor = "hitam">

<Tr align = "center" valign = "middle">

<Td align = "center" valign = "middle" width = "25px"> <b> Tidak ada. </ 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:

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

Sekarang Kita melakukan merger PADA sel-sel tabel di differences yakni sebagai berikut:

• PADA Kolom 1 baris 1 dan 2 yakni Menjadi sel No. kalau dimerger Maka hearts sintaks kitd 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 hearts sintaks kitd gunakan Perintah rowspan also (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 kitd using 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 kitd also using 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 differences Menjadi:

<Table border = "1" cellpadding = "0" cellspacing = "0" bordercolor = "hitam">

<Tr align = "center" valign = "middle">

<Td align = "center" valign = "middle" width = "25px" rowspan = "2"> <b> Tidak ada. </ 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 differences bahwa ADA sebagian sintaks Yang dicoret.Sintaks Yang dicoret artinya TIDAK boleh Ditulis Lagi, sehingga sintaks tabel di differences Menjadi seperti berikut:

<Table border = "1" cellpadding = "0" cellspacing = "0" bordercolor = "hitam">

<Tr align = "center" valign = "middle">

<Td align = "center" valign = "middle" width = "25px" rowspan = "2"> <b> Tidak ada. </ 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:

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

Selanjutnya kitd lanjutnya DENGAN baris di bawahnya Dan sintaks di differences (Tabel 1). Perlu diingat, sintaks di kitd tulis Lagi. Sintaks HTML tabel 1 sebagai berikut:

<Table border = "1" cellpadding = "0" cellspacing = "0" bordercolor = "hitam">

<Tr align = "center" valign = "middle">

<Td align = "center" valign = "middle" width = "25px" rowspan = "2"> <b> Tidak ada. </ 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 = "kiri" 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 = "kiri" 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 = "kiri" 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 = "kiri" 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 = "kiri" 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 = "kiri" 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 = "kiri" 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 = "kiri" 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 = "kiri" 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 = "kiri" 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:

Tidak.	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 saya	-	P	6,75	6,25	6,00
10.	Siswa J	-	P	8,25	8,00	9,00

Tampak Tabel di differences sama DENGAN gambar PADA tabel 1. Selamat Mencoba Dan Andari also pasti bisa!