Wednesday, March 13, 2019

Tutorial HTML Cara Mengabungkan Baris dan Kolom di HTML Dengan Tag Rowspan dan Colspan

cara mengabungkan Baris dan Kolom di HTML dengan menggunakan atribut Rowspan dan Colspan yang merupakan atribut dari tag <td> atau <th> dalam pembuatan sebuah tabel. Menggabungkan baris dan kolom di html sangat penting di pelajari sekaligus dipahami, karena penggunaan tabel dalam sebuah web sangat penting dan harus mengerti teknik menggabungkan baris pada tabel di html dan menggabungkan kolom pada tabel html.

Pengertian Colspan dan Rowspan

Rowspan adalah atribut dari tag <td> dan <th> yang berguna untuk menggabungkan sel tertentu dalam bentuk vertikal atau dikenal dengan sebutan menggabungkan baris pada kolom tertentu. tag html yang digunakan untuk menggabungkan dua atau lebih baris di html adalah tag rowspan

Colspan adalah atribut dari tag  <td> dan <th> yang berguna untuk menggabungkan sel tertentu dalam bentuk horizontal atau biasa disebut menggabungkan kolom pada baris tertentu. tag html yang digunakan untuk menggabungkan dua atau lebih kolom di html adalah tag Colspan

Setelah anda mengerti pengertian colspan dan rowspan diatas, maka kita boleh lanjut cara penuslian kedua atribut tag <td> dan <th> tersebut yang digunakan untuk menggabungkan cell di tabel html.

Menggabungkan Baris Dengan Rowspan di HTML

Bentuk penulisan rowspan dalam menggabungkan baris dalam pada tabel di html

<th rowspan=”jumlah_sel_yang_akan digabungkan_secara vertikal”

Contoh penusliannya

<td rowspam=”2”> atau <th rowspan=”2”>

diatas adalah tag html yang digunakan untuk mengabungkan 2 baris pada tabel di html.

Kita coba kecontoh script membuat tabel dengan baris digabungkan dengan rowspan di html.


<table width="40%" border="1">
 <tr>
  <th rowspan="3">Ini Menggunakan Rowspan</th>
  <th> a2 </th> 
  <th> a3 </th> 
  <th> a4 </th>
 </tr>
  <td> b2 </td>
  <td> b3 </td>
  <td> b4 </td>
 <tr"> 
 </tr>
 <tr"> 
  <td> c2 </td>
  <td> c3 </td>
  <td> c4 </td>
 </tr>
</table>

Maka hasil dari menggabungkan baris di html tersebut sebagai berikut
tag html untuk menggabungkan baris pada tabel
Gambar Menggabungkan Baris di HTML dengan Atribut Rowspan

Perhatikan bahwa rowspan=”3” itu berarti sudah mewakilkan dalam membentuk 2 baris dibawahnya, coba perhatikan baik-baik bahwa pada tag <tr> pertama terdapat 4 buah <th> sedangkan pada tag <tr> kedua dan ketiga hanya terdapat 3 buah tag <td> yang mana seharusnya kan 4 juga.

Ini lah yang saya maksud tadi bahwa dia sudah mewakilkan dibawahnya sebanyak angka rowspan-1. Coba kita buat jumlahnya sama-sama 4, seperti contoh berikut ini


<table width="40%" border="1">
 <tr>
  <th> a1 </th>
  <th> a2 </th> 
  <th> a3 </th> 
  <th> a4 </th>
 </tr>
  <td> b1 </td>
  <td rowspan="2" bgcolor="red"> b2 </td>
  <td> b3 </td>
  <td> b4 </td>
 <tr"> 
 </tr>
 <tr"> 
  <td> c1 </td>
  <td> c3 </td>
  <td rowspan="2" bgcolor="red"> c4 </td>
 </tr>
  <tr"> 
  <td> d1 </td>
  <td> d2 </td>
  <td> d3 </td>
 </tr>
</table>


Maka hasil setelah cell baris pada kolom pertama digabungkan jika disamakan 4 sebagai berikut
menggabungkan baris dan kolom di html
Gambar Menggabungkan baris tabel di html

Jadi penting dalam memahami perhitungannya, bahwa yang digabungkan tersebut juga tetap terhitung.  Contoh lainnya dalam menggabungkan sell baris dalam html.


<table width="40%" border="1">
 <tr>
  <th> a1 </th>
  <th> a2 </th> 
  <th> a3 </th> 
  <th> a4 </th>
 </tr>
  <td> b1 </td>
  <td rowspan="2" bgcolor="red"> b2 </td>
  <td> b3 </td>
  <td> b4 </td>
 <tr"> 
 </tr>
 <tr"> 
  <td> c1 </td>
  <td> c3 </td>
  <td rowspan="2" bgcolor="red"> c4 </td>
 </tr>
  <tr"> 
  <td> d1 </td>
  <td> d2 </td>
  <td> d3 </td>
 </tr>
</table>
Hasil dari beberapa penggabungan baris di html tersebut sebagai berikut ini
tag html yang digunakan untuk menggabungkan baris di html dengan tag rowspan
Gambar Menggabungkan dua baris di html

Itulah cara menggabungkan sel/cell secara vertikal di html, dan berikutnya kita membahas bagaimana menggabungkan sel secara horizontal di html

Hal ini sama saja dengan menggabungkan baris tabel di html, sama juga penempatannya adalah di tag <td> atau tag <th>. 

Bentuk Penulisannya 

<td colspan=”jumlah sel yang digabung secara horizontal”>

Contohnya penulisan tag Colspan di HTML

<td colspan=”2”> atau <th colspan=”2”>

Diatas adalah tag html yang digunakan untuk menggabungkan dua kolom pada tabel di html. cara menggabungkan 2 kolom di html sama saja cara menggabungkan lebih dari 2 kolom di html, hanya perbedaan angkanya saja yang harus anda rubah.

Semisal kita akan membuat tabel mahasiswa sebagai berikut ini


<table width="40%" border="1">
 <tr>
<th>Tabel Mahasiswa</th
</tr>
 <tr> <td> No </td>
  <td> NIM</td>
   <td> Nama Mahasiswa</td>
   <td>Jenis Kelamin</td>
 </tr>
 <tr"> 
  <td> 1 </td>
  <td> 1601003112</td>
    <td> Anakit</td> 
   <td> Laki-Laki</td> 
 </tr>
 <tr"> 
  <td> 2 </td>
  <td> 1601003112</td> 
   <td> Budi </td> 
   <td> Laki-laki</td> 
 </tr>
</table>
Perhatikan pada bagian <th>Tabel Mahasiswa</th>, tidak ada kolom lain pada baris ini. Hanya satu kolom,  hasilnya seperti berikut ini
tag html yang digunakan untuk menggabungkan kolom di html dengan tag colspan
Gambar Menggabungkan sel tabel di html

Yang kita inginkan adalah menggabungkan kolom dalam 1 tag <Th> saja dengan menggunakan colspan=”4”, karena ada 4 kolom yang ingin kita gabungkan. 
script cara menggunakan tag colspan di html yang digunakan untuk menggabungkan kolom di html
Gambar Menggunakan Atribut Colspan untuk Menggabungkan Kolom di HTML

Maka hasil dari penggabungan kolom tersebut sebagai berikut ini
cara menggabungkan kolom di html dengan tag coslpan
Gambar Menggabungkan Kolom Sel Tabel di HTML dengan atribute Colspan

Tinggal memposisikan tulisnnya saja di tengah, selesai. 

Menggabungkan baris dan kolom bisa dilakukan dimana saja didalam tabel, bisa ditengah, dipinggir, di atas, dibawah. 

Contoh lainnya penggabung baris dan kolom di html dengan satu tabel


<table border="1" width=30%">
 <tr>
  <td colspan="4" align="center" bgcolor="red"> colspan 4</td>
 </tr>
 <tr>
  <td rowspan="2" align="center" bgcolor="yellow">Rowspan 2</td>
  <td align="center">c</td>
  <td rowspan="3" bgcolor="yellow" align="center"> rowspan 3</td>
 </tr>
 <tr>
  <td align="center">d</td>
 </tr>
 <tr>
  <td align="center" colspan="2" bgcolor="red">colspan 2</td>
 </tr>
</table>
Nah, script diatas anda harus benar-benar paham dalam menggunakan tag <td> dan tag <tr> sehingga anda tau perbedaan ketika terjadi penggabungan baris atau kolom di html table. Coba perhatikan hasil dari penggabugan baris dan kolom dari tabel tersebut
cara menggabungkan kolom dan baris di html dengan rowspan dan colspan
Gambar Menggabungkan Baris dan Kolom di HTML

Cara terbaik untuk membantu anda dalam mehami penggunaan  dan perbedaan atribut rowspan dan atribut colspan adalah denga mempraktekkan contoh-contoh script html diatas dan coba melakukan pergantian kolom yang digabungkan atau baris yang digabungkan.

Metode penggabungan baris dan kolom di html ini bisa anda gunakan sebagai design dasar dari halaman web untuk membentuk susunan header, conten, widget, footer, dll. Seperti gambar berikut ini
Cara Menggabungkan Baris dan Kolom di HTML dengan tag Rowspan dan Colspan
Gambar Menggabungkan Baris dan Kolom di HTML Rowspan dan Colspan


Nah, jadi betapa pentingnya kegunaan rowspan dan colspan ini dalam membuat tabel yang bagus di html dengan menggabungkan beberapa cell kolom dan menggabungkan beberapa sel baris di html.

Demikianlah pembahasan bagimana cara menggabungkan baris dan kolom di html dengan Rowspan dan Colspan, semoga artikel ini bisa berguna dan membantu anda lama membuat tabel yang bagus di html.

Apa Selanjutnya?
Tau Cara Bagaimana Membuat 2 Tabel Atau Lebih dari 2 Tabel di HTML dengan Benar. dan cara Membuat tabel di dalam tabel di HTML

Baca : Membuat 2 Tabel Atau Lebih di HTML




EmoticonEmoticon