Beranda
Blogging

Cara Membuat Tabel HTML dengan Colspan dan Rowspan

Pelajari cara membuat tabel HTML dengan colspan dan rowspan lengkap dengan contoh kode, fungsi, perbedaan, dan cara menggabungkannya.

Cara Membuat Tabel HTML dengan Colspan dan Rowspan
Membuat tabel HTML sebenarnya cukup mudah. Dengan beberapa tag dasar seperti <table>, <tr>, <th>, dan <td>, kita sudah bisa membuat tabel sederhana. Namun, jika ingin menggabungkan beberapa kolom atau baris, kita membutuhkan atribut colspan dan rowspan.

Pada tutorial ini, kita akan belajar cara membuat tabel HTML dengan colspan dan rowspan, lengkap dengan contoh kode yang bisa langsung dicoba.

Baca Juga: • Cara Menambahkan Kata di Awal Kalimat di Notepad++
• Cara Menambahkan Kata di Akhir Kalimat Notepad++
 
Cara Membuat Tabel HTML dengan Colspan dan Rowspan

Apa Itu Colspan dan Rowspan pada HTML?

colspan dan rowspan merupakan atribut HTML yang digunakan untuk menggabungkan beberapa sel pada tabel.

Perbedaannya cukup sederhana:
  • colspan digunakan untuk menggabungkan beberapa kolom secara horizontal / dari kiri ke kanan.
  • rowspan digunakan untuk menggabungkan beberapa baris secara vertikal / dari atas ke bawah.

Dengan memahami kedua atribut tersebut, kita dapat membuat tabel HTML yang lebih kompleks dan rapi.

Tag HTML yang Digunakan untuk Membuat Tabel

Sebelum menggunakan colspan dan rowspan, sebaiknya pahami beberapa tag dasar tabel HTML berikut:

Tag/AtributFungsi
<table>Membuat elemen tabel
<tbody>Menentukan bagian isi tabel
<tr>Membuat baris tabel
<th>Membuat sel header
<td>Membuat sel data
colspanMenggabungkan beberapa kolom
rowspanMenggabungkan beberapa baris

1. <table>

Tag <table> digunakan sebagai pembungkus seluruh struktur tabel.

2. <tr>

<tr> merupakan singkatan dari table row dan digunakan untuk membuat satu baris tabel.

3. <th>

<th> atau table header digunakan untuk membuat sel judul/header tabel.

4. <td>

<td> atau table data digunakan untuk menampilkan data di dalam tabel.

5. colspan

Atribut colspan menentukan berapa banyak kolom yang akan digabungkan menjadi satu sel.

6. rowspan

Atribut rowspan menentukan berapa banyak baris yang akan digabungkan menjadi satu sel.

Cara Membuat Tabel HTML Sederhana

Sebelum menggunakan colspan dan rowspan, mari membuat tabel HTML sederhana terlebih dahulu.

Hasilnya kurang lebih seperti berikut:

Header 1Header 2Header 3
Data 1Data 2Data 3

Kode HTML-nya:

<table border="1" cellpadding="5" cellspacing="0">
  <tbody>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

Pada contoh tersebut, terdapat tiga kolom dan dua baris.

Jika menambahkan <td> pada satu baris, jumlah kolom akan bertambah. Sedangkan jika menambahkan <tr>, jumlah baris tabel akan bertambah.

Catatan: Untuk website modern, tampilan tabel sebaiknya diatur menggunakan CSS. Atribut presentasional seperti border, cellpadding, dan cellspacing pada contoh di atas digunakan agar konsep tabel lebih mudah dipahami.

Cara Membuat Tabel HTML dengan Colspan

Sekarang kita masuk ke bagian utama, yaitu menggunakan colspan.

Misalnya kita ingin membuat header yang mencakup dua kolom sekaligus.

Hasil tabel:

header 1 header 2 header 3
data 1 data 2 data 3 data 4

Kode HTML:
<table border="1" cellpadding="5" cellspacing="0">
  <tbody>
    <tr>
      <th colspan="2">Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
  </tbody>
</table>

Perhatikan bagian berikut:

<th colspan="2">Header 1</th>

Artinya, sel Header 1 menggabungkan dua kolom.

Jika menggunakan:

<th colspan="3">Header 1</th>

maka Header 1 akan mencakup tiga kolom.

Kapan Menggunakan Colspan?

colspan berguna ketika satu judul atau informasi ingin mencakup beberapa kolom sekaligus. Contohnya adalah tabel laporan, jadwal, nilai, perbandingan produk, dan tabel data lainnya.

Cara Membuat Tabel HTML dengan Rowspan

Selanjutnya kita gunakan atribut rowspan untuk menggabungkan beberapa baris.

Contohnya:

header 1 header 2 header 3
data 1 data 2
data 3 data 4

Kode HTML:

<table border="1" cellpadding="5" cellspacing="0">
  <tbody>
    <tr>
      <th rowspan="3">Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
    <tr>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
  </tbody>
</table>

Bagian:

<th rowspan="3">Header 1</th>

berarti sel Header 1 digabungkan secara vertikal hingga mencakup tiga baris.

Nilai rowspan dapat disesuaikan dengan jumlah baris yang ingin digabungkan.

Misalnya:

<th rowspan="2">Header</th>

berarti sel tersebut mencakup dua baris.

Sedangkan:

<th rowspan="4">Header</th>

berarti sel tersebut mencakup empat baris.

Cara Menggabungkan Colspan dan Rowspan Sekaligus

colspan dan rowspan juga dapat digunakan secara bersamaan dalam satu tabel.

Contohnya:

header 1 header 2 header 3
data 1 data 2 data 3 data 4
data 5 data 6 data 7 data 8

Contoh kode HTML:

<table border="1" cellpadding="5" cellspacing="0">
  <tbody>
    <tr>
      <th colspan="2">Header 1</th>
      <th rowspan="3">Header 2</th>
      <th colspan="2">Header 3</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
    <tr>
      <td>Data 5</td>
      <td>Data 6</td>
      <td>Data 7</td>
      <td>Data 8</td>
    </tr>
  </tbody>
</table>

Pada contoh tersebut terdapat dua atribut yang digunakan sekaligus.

<th colspan="2">Header 1</th>

berfungsi menggabungkan dua kolom, sedangkan:

<th rowspan="3">Header 2</th>

berfungsi menggabungkan tiga baris.

Dengan menggabungkan kedua atribut tersebut, kita dapat membuat struktur tabel HTML yang lebih fleksibel.

Perbedaan Colspan dan Rowspan

Agar lebih mudah diingat, gunakan aturan sederhana berikut:

AtributFungsiArah
colspanMenggabungkan kolomHorizontal
rowspanMenggabungkan barisVertikal

Jadi:

Colspan = menggabungkan kolom ke samping.

Rowspan = menggabungkan baris ke bawah.

Kesalahan yang cukup sering terjadi adalah tertukar antara colspan dan rowspan. Cara paling mudah mengingatnya adalah melihat kata column pada colspan dan row pada rowspan.

Contoh Colspan dengan Nilai Lebih Besar

Jika ingin menggabungkan lima kolom, gunakan:
<th colspan="5">Judul Tabel</th>
Jika ingin menggabungkan empat baris, gunakan:
<td rowspan="4">Data</td>

Angka pada colspan dan rowspan menunjukkan jumlah sel yang dicakup, bukan jumlah sel tambahan.

Tips Membuat Tabel HTML yang Rapi

Agar tabel HTML lebih mudah dibaca, perhatikan beberapa hal berikut:
  1. Gunakan <th> untuk bagian header dan <td> untuk data.
  2. Pastikan jumlah kolom dan baris yang digabungkan sesuai dengan struktur tabel.
  3. Gunakan colspan untuk penggabungan horizontal.
  4. Gunakan rowspan untuk penggabungan vertikal.
  5. Untuk desain tabel modern, gunakan CSS daripada mengandalkan atribut presentasional HTML.
  6. Pada tabel yang kompleks, gunakan struktur header yang jelas agar lebih mudah dipahami pengguna.

Contoh CSS sederhana:

<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}
</style>

Dengan CSS tersebut, tabel akan terlihat lebih rapi dan mudah dibaca.

Kesimpulan

Membuat tabel HTML dengan colspan dan rowspan tidaklah sulit jika sudah memahami fungsi masing-masing atribut.

colspan digunakan untuk menggabungkan beberapa kolom, sedangkan rowspan digunakan untuk menggabungkan beberapa baris.

Keduanya juga dapat digunakan secara bersamaan untuk membuat tabel HTML yang lebih kompleks, seperti tabel laporan, jadwal, daftar nilai, perbandingan data, dan berbagai kebutuhan lainnya.

Jika baru belajar HTML, cobalah terlebih dahulu membuat tabel sederhana menggunakan <table>, <tr>, <th>, dan <td>. Setelah itu, tambahkan colspan dan rowspan secara bertahap agar lebih mudah memahami struktur tabel.

Selamat mencoba dan semoga tutorial cara membuat tabel HTML dengan colspan dan rowspan ini bermanfaat.


FAQ

1. Apa itu colspan pada HTML?

colspan adalah atribut HTML yang digunakan untuk menggabungkan dua atau lebih kolom tabel menjadi satu sel secara horizontal.

2. Apa itu rowspan pada HTML?

rowspan adalah atribut HTML yang digunakan untuk menggabungkan dua atau lebih baris tabel menjadi satu sel secara vertikal.

3. Apa perbedaan colspan dan rowspan?

colspan digunakan untuk menggabungkan kolom, sedangkan rowspan digunakan untuk menggabungkan baris. colspan bekerja secara horizontal, sementara rowspan bekerja secara vertikal.

4. Bagaimana cara menggunakan colspan?

Gunakan atribut colspan pada elemen <th> atau <td>. Contohnya:

<th colspan="2">Judul</th>

Kode tersebut membuat satu sel yang mencakup dua kolom.

5. Bagaimana cara menggunakan rowspan?

Gunakan atribut rowspan pada elemen <th> atau <td>. Contohnya:

<td rowspan="3">Data</td>

Kode tersebut membuat satu sel yang mencakup tiga baris.

6. Apakah colspan dan rowspan bisa digunakan bersamaan?

Ya. colspan dan rowspan dapat digunakan secara bersamaan dalam satu tabel untuk membuat struktur tabel yang lebih kompleks.

7. Apakah colspan dan rowspan masih digunakan pada HTML5?

Ya. colspan dan rowspan masih merupakan atribut tabel HTML yang valid. Untuk mengatur tampilan seperti border, warna, padding, dan lebar tabel, sebaiknya gunakan CSS.

Posting Komentar