0Pricing
HTML Academy · Pelajaran

colspan dan rowspan untuk Rentang Sel

Gabungkan sel melintasi kolom dan baris.

colspan dan rowspan untuk Rentang Sel adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Apa Itu Rentang Sel?

Secara default, setiap sel tabel menempati satu baris dan satu kolom. Peregangan memungkinkan sel membentang di beberapa kolom atau baris:

  • colspan — membentang di beberapa kolom
  • rowspan — membentang di beberapa baris

colspan

Atribut colspan membuat sel membentang di beberapa kolom:

<table>
  <tr>
    <th colspan="3">2024 Quarterly Sales</th>
  </tr>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
  </tr>
  <tr>
    <td>$10k</td>
    <td>$12k</td>
    <td>$15k</td>
  </tr>
</table>

rowspan

Atribut rowspan membuat sel membentang di beberapa baris:

<table>
  <tr>
    <th rowspan="2">John</th>
    <td>HTML</td>
    <td>95</td>
  </tr>
  <tr>
    <!-- no th here — John's cell spans this row -->
    <td>CSS</td>
    <td>88</td>
  </tr>
</table>

colspan dan rowspan Bersamaan

Anda dapat menggabungkan kedua atribut pada satu sel:

<table>
  <tr>
    <th colspan="2" rowspan="2">Top-Left Corner</th>
    <th>Col 3</th>
  </tr>
  <tr>
    <td>Row 2, Col 3</td>
  </tr>
  <tr>
    <td>Row 3, Col 1</td>
    <td>Row 3, Col 2</td>
    <td>Row 3, Col 3</td>
  </tr>
</table>

Menangani Sel yang Membentang

Jika sebuah sel membentang di beberapa kolom, hilangkan kolom tersebut dari baris yang dilewati:

<table>
  <tr>
    <td colspan="2">Spans 2 columns</td>
    <!-- This row has: 1 td = 2 columns wide -->
    <td>Third column</td>
  </tr>
  <tr>
    <td>Col 1</td>   <!-- back to 1 column each -->
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
</table>

Pola Rentang yang Umum

Contoh rentang tabel di dunia nyata:

<!-- Group header spanning all data columns -->
<thead>
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="3">Test Scores</th>
  </tr>
  <tr>
    <th>Math</th><th>Science</th><th>English</th>
  </tr>
</thead>

rowspan untuk Tajuk Baris Gabungan

Gunakan rowspan untuk membuat label kelompok baris gabungan:

<tbody>
  <tr>
    <th rowspan="3">Frontend</th>
    <td>HTML</td>
    <td>Structure</td>
  </tr>
  <tr>
    <!-- Frontend spans this row -->
    <td>CSS</td>
    <td>Presentation</td>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>Behavior</td>
  </tr>
</tbody>

colspan=0 — Sel Lebar Penuh

Nilai colspan 0 membentang di semua kolom yang tersisa dalam kelompok kolom (jarang digunakan):

<!-- colspan="0" spans the entire colgroup -->
<td colspan="0">Full width row</td>

Rentang dan Aksesibilitas

Tabel dengan rentang kompleks memerlukan atribut scope dan headers untuk pembaca layar:

<th scope="colgroup" colspan="3">2024 Scores</th>
<!-- scope="colgroup" applies to a spanning header -->

<!-- For complex tables, use headers attribute on td: -->
<td headers="col-q1 row-alice">95</td>

Men-debug Masalah Rentang

Kesalahan umum saat menggunakan rentang:

  • Terlalu banyak atau terlalu sedikit sel dalam satu baris setelah penggunaan rentang
  • rowspan melampaui jumlah baris
  • Rentang saling tumpang tindih (dua sel mengklaim posisi yang sama)

Gunakan DevTools browser untuk memeriksa struktur tabel jika ada bagian yang terlihat keliru.

CSS untuk Sel yang Membentang

Berikan gaya pada sel yang membentang di beberapa kolom atau baris:

[colspan] {
  text-align: center;
  font-weight: bold;
  background-color: #e2e8f0;
}

/* Or use attribute selectors for specific spans: */
[colspan="3"] {
  background-color: #dbeafe;
}

Pencetakan dan Rentang

Sel yang membentang dicetak dengan benar di browser modern. Namun:

  • Jika baris thead membentang di beberapa kolom, baris tersebut diulang dengan benar pada setiap halaman yang dicetak
  • rowspan di dalam tbody tidak diulang di antara pergantian halaman
  • Uji tabel kompleks dalam pratinjau cetak sebelum merilisnya

Pemeriksaan Singkat

Anda memiliki sel tabel yang harus mencakup 3 kolom. Atribut mana yang digunakan?

Rangkuman: colspan dan rowspan

Hal penting tentang rentang sel:

  • colspan — sel membentang di beberapa kolom
  • rowspan — sel membentang di beberapa baris
  • Tangani sel yang membentang: hilangkan sel yang dicakup oleh rentang
  • Tambahkan scope="colgroup" untuk aksesibilitas tajuk yang membentang
  • Gunakan DevTools untuk men-debug masalah tata letak

Pertanyaan yang Sering Diajukan

Apakah pelajaran “colspan dan rowspan untuk Rentang Sel” gratis?

Ya — teks lengkap “colspan dan rowspan untuk Rentang Sel” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “colspan dan rowspan untuk Rentang Sel”?

Gabungkan sel melintasi kolom dan baris. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “colspan dan rowspan untuk Rentang Sel” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. table tr td dan th
  2. Struktur thead tbody tfoot
  3. colspan dan rowspan untuk Rentang Sel
  4. Aksesibilitas Tabel: scope summary caption
← Kembali ke HTML Academy