Cara Menggabungkan Beberapa Sel Tabel Pada HTML. Dalam membuat sebuah tabel terkadang membutuhkan beberapa baris satu dengan baris lainnya yang berbeda dan kolom satu dengan kolom yang lainnya yang berbeda pula. Untuk memenuhi kebutuhan tersebut maka perlu dilakukan penggabungan antar sel dalam sebuah tabel. Dalam HTML sendiri terdapat atribut yang digunakan untuk menggabungkan sebuah sel dalam tabel dengan tabel lainnya. Atribut dalam HTML tersebut adalah colspan dan rowspan.
Untuk lebih jelasnya, silahkan Anda langsung praktekan dan ketikan kode HTML dibawah ini kemudian simpan dengan nama file tabelcolspan.html
Kode HTML diatas merupakan contoh penggunan dari atribut Colspan. Jika kita amati dari kode HTML diatas terlihat bahwa tag <td> berisi atribut colspan="2" maka kolom satu dengan kolom sebelahnya akan bersatu. Atribut tersebut memiliki nilai atau value seberapa banya kolom itu akan bersatu dengan kolom lainnya dalam satu baris. Untuk lebih jelasnya silahkan Anda cermati tampilan dari kode HTML diatas.
Sekarang kita akan praktekan penggunaan atribut rowspan pada kode HTML yaitu penggabungan baris. Silahkan Anda buka kembali Editor lalu ketikan kode HTML dibawah ini kemudian simpan file HTML tersebut dengan nama tabelcolspan.html
Untuk penjelasan atribut rowspan pada kode HTML diatas tidak berbeda jauh penggunaannya dengan atribut colspan. Pada atribut rowspan juga terdapat nilai (value), dimana nilai ini adalah seberapa banyak baris yang akan digabungkan. Jika kode HTML tersebut di running di browser maka tampilannya adalah sebagai berikut.
Agar lebih paham lagi kembali Saya akan berikan contoh penggunaan atribut colspan dan rowspan dalam satu kode HTML. Silahkan Anda praktekan kembali kemudian simpan file HTML tersebut dengan nama colsrow.html
Dari kode HTML diatas maka tampilan di browser akan nampak seperti dibawah ini.
Bagaiman cukup mudah bukan? Hal penting yang harus Anda perhatikan adalah dalam membuat tabel dengan penggunaan atribut colspan dan rowspan sebaiknya Anda desain terlebih dahulu mengenai seberapa banyak baris dan kolom yang akan dibuat, karena semakin komplek sebuah tabel maka akan semakin rumit pemasangan atribut tersebut dalam kode HTML.
Demikianlah pembahasan artikel kali ini mengenai Cara Menggabungkan Kolom dan Baris (Colspan dan Rowspan) di HTML. Semoga artikel ini menambah pengetahuan Anda dalam belajar HTML untuk membangun sebuah website. Jika bermanfaat silahkan Anda share. Terima Kasih.
Penggunaan Atribut Colspan dan Rowspan dalam Tabel
Atribut colspan dan rowspan adalah atribut yang digunakan dalam HTML untuk menggabungkan baris dan kolom menjadi satu, sehingga baris dan kolom tersebut menjadi lebar. Colspan merupakan kependekan dari ColumnSpan yang berarti beberapa kotak kesamping, sedangkan rowspan mengartikan beberapa kotak kebawah. Jadi fungsi atribut colspan adalah untuk menggabungkan kolom satu dengan kolom lainnya, sedangkan rowspan berfungsi menggabungkan baris satu dengan baris lainnya. kedua atribut tersebut diletak didalam tag <td>.Untuk lebih jelasnya, silahkan Anda langsung praktekan dan ketikan kode HTML dibawah ini kemudian simpan dengan nama file tabelcolspan.html
<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggabungan Tabel</title>
</head>
<body>
<h2>Tabel Gabungan Antar Kolom (Colspan)</h2>
<table border="1">
<tr>
<td colspan="2">Ini Baris ke 1, Kolom ke 1 dan 2</td>
<td>Ini Baris ke 1, Kolom ke 3</td>
</tr>
<tr>
<td>Ini Baris ke 2, Kolom ke 1</td>
<td>Ini Baris ke 2, Kolom ke 2</td>
<td>Ini Baris ke 2, Kolom ke 3</td>
</tr>
<tr>
<td>Ini Baris ke 3, Kolom ke 1</td>
<td colspan="2">Ini Baris ke 3, Kolom ke 2 dan 3</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Contoh Penggabungan Tabel</title>
</head>
<body>
<h2>Tabel Gabungan Antar Kolom (Colspan)</h2>
<table border="1">
<tr>
<td colspan="2">Ini Baris ke 1, Kolom ke 1 dan 2</td>
<td>Ini Baris ke 1, Kolom ke 3</td>
</tr>
<tr>
<td>Ini Baris ke 2, Kolom ke 1</td>
<td>Ini Baris ke 2, Kolom ke 2</td>
<td>Ini Baris ke 2, Kolom ke 3</td>
</tr>
<tr>
<td>Ini Baris ke 3, Kolom ke 1</td>
<td colspan="2">Ini Baris ke 3, Kolom ke 2 dan 3</td>
</tr>
</table>
</body>
</html>
Kode HTML diatas merupakan contoh penggunan dari atribut Colspan. Jika kita amati dari kode HTML diatas terlihat bahwa tag <td> berisi atribut colspan="2" maka kolom satu dengan kolom sebelahnya akan bersatu. Atribut tersebut memiliki nilai atau value seberapa banya kolom itu akan bersatu dengan kolom lainnya dalam satu baris. Untuk lebih jelasnya silahkan Anda cermati tampilan dari kode HTML diatas.
Sekarang kita akan praktekan penggunaan atribut rowspan pada kode HTML yaitu penggabungan baris. Silahkan Anda buka kembali Editor lalu ketikan kode HTML dibawah ini kemudian simpan file HTML tersebut dengan nama tabelcolspan.html
<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggabungan Tabel</title>
</head>
<body>
<h2>Contoh Gabungan Baris (Rowspan)</h2>
<table border="1">
<tr>
<td rowspan="2">Ini Baris ke 1 dan 2, Kolom ke 1</td>
<td>Ini Baris ke 1, Kolom ke 2</td>
<td>Ini Baris ke 1, Kolom ke 3</td>
</tr>
<tr>
<td>Ini Baris ke 2, Kolom ke 2</td>
<td>Ini Baris ke 2, Kolom ke 3</td>
</tr>
<tr>
<td>Ini Baris ke 3, Kolom ke 1</td>
<td>Ini Baris ke 3, Kolom ke 2</td>
<td rowspan="2">Ini Baris ke 3, Kolom ke 2 dan 3</td>
</tr>
<tr>
<td>Ini Baris ke 4, Kolom ke 1</td>
<td>Ini Baris ke 4, Kolom ke 2</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Contoh Penggabungan Tabel</title>
</head>
<body>
<h2>Contoh Gabungan Baris (Rowspan)</h2>
<table border="1">
<tr>
<td rowspan="2">Ini Baris ke 1 dan 2, Kolom ke 1</td>
<td>Ini Baris ke 1, Kolom ke 2</td>
<td>Ini Baris ke 1, Kolom ke 3</td>
</tr>
<tr>
<td>Ini Baris ke 2, Kolom ke 2</td>
<td>Ini Baris ke 2, Kolom ke 3</td>
</tr>
<tr>
<td>Ini Baris ke 3, Kolom ke 1</td>
<td>Ini Baris ke 3, Kolom ke 2</td>
<td rowspan="2">Ini Baris ke 3, Kolom ke 2 dan 3</td>
</tr>
<tr>
<td>Ini Baris ke 4, Kolom ke 1</td>
<td>Ini Baris ke 4, Kolom ke 2</td>
</tr>
</table>
</body>
</html>
Untuk penjelasan atribut rowspan pada kode HTML diatas tidak berbeda jauh penggunaannya dengan atribut colspan. Pada atribut rowspan juga terdapat nilai (value), dimana nilai ini adalah seberapa banyak baris yang akan digabungkan. Jika kode HTML tersebut di running di browser maka tampilannya adalah sebagai berikut.
Agar lebih paham lagi kembali Saya akan berikan contoh penggunaan atribut colspan dan rowspan dalam satu kode HTML. Silahkan Anda praktekan kembali kemudian simpan file HTML tersebut dengan nama colsrow.html
<!DOCTYPE html>
<html>
<head>
<title>Daftar Nilai</title>
</head>
<body>
<h2>Daftar Nilai Siswa</h2>
<table border="1">
<tr>
<td rowspan="2">Nama Siswa</td>
<td colspan="4">Nilai Mata Pelajaran</td>
</tr>
<tr>
<td>B. Indonesia</td>
<td>B. Inggris</td>
<td>Matematika</td>
<td>Kejuruan</td>
</tr>
<tr>
<td>Attharizky</td>
<td>85</td>
<td>89</td>
<td>79</td>
<td>90</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Daftar Nilai</title>
</head>
<body>
<h2>Daftar Nilai Siswa</h2>
<table border="1">
<tr>
<td rowspan="2">Nama Siswa</td>
<td colspan="4">Nilai Mata Pelajaran</td>
</tr>
<tr>
<td>B. Indonesia</td>
<td>B. Inggris</td>
<td>Matematika</td>
<td>Kejuruan</td>
</tr>
<tr>
<td>Attharizky</td>
<td>85</td>
<td>89</td>
<td>79</td>
<td>90</td>
</tr>
</table>
</body>
</html>
Dari kode HTML diatas maka tampilan di browser akan nampak seperti dibawah ini.
Bagaiman cukup mudah bukan? Hal penting yang harus Anda perhatikan adalah dalam membuat tabel dengan penggunaan atribut colspan dan rowspan sebaiknya Anda desain terlebih dahulu mengenai seberapa banyak baris dan kolom yang akan dibuat, karena semakin komplek sebuah tabel maka akan semakin rumit pemasangan atribut tersebut dalam kode HTML.
Demikianlah pembahasan artikel kali ini mengenai Cara Menggabungkan Kolom dan Baris (Colspan dan Rowspan) di HTML. Semoga artikel ini menambah pengetahuan Anda dalam belajar HTML untuk membangun sebuah website. Jika bermanfaat silahkan Anda share. Terima Kasih.
sangat bermanfaat dan trus update
ReplyDeletejangan lupa mampir di My blog
ini sangat bermanfaat, terima kasih kak.
ReplyDeletejazakumullah tipsnya kang...
ReplyDelete