Membentangkan Baris dan Kolom

Termasuk bagian Dasar-Dasar dalam perjalanan HTML di Coddy. Pelajaran 50 dari 60.

Di HTML, kamu dapat membuat sel tabel membentang di beberapa baris atau kolom menggunakan atribut rowspan dan colspan. Atribut ini memungkinkan kamu membuat tata letak tabel yang lebih kompleks dengan menggabungkan beberapa sel.

Atribut colspan digunakan untuk menentukan jumlah kolom yang harus direntang oleh sebuah sel. Atribut ini ditambahkan ke tag <td> atau <th> pada sel yang ingin kamu perluas.

Berikut contoh cara menggunakan colspan:

<table border="1">
	<tr>
		<th colspan="2">Name</th>
	</tr>
	<tr>
		<td>John</td>
		<td>Doe</td>
	</tr>
</table>

Dalam contoh ini, sel header dengan teks "Name" membentang di dua kolom. Ini berguna untuk membuat header yang mencakup beberapa kolom. Beginilah tampilannya:

Atribut rowspan digunakan untuk menentukan jumlah baris yang dicakup oleh sebuah sel. Atribut ini juga ditambahkan pada tag <td> atau <th> dari sel yang ingin kamu perluas.

Berikut contoh cara menggunakan rowspan:

<table border="1">
  <tr>
    <th>Employee</th>
    <th>Shift</th>
  </tr>
  <tr>
    <td rowspan="2">Alex</td>
    <td>Morning</td>
  </tr>
  <tr>
    <td>Evening</td>
  </tr>
</table>

Di sini, rowspan digunakan untuk menunjukkan bahwa Alex bekerja pada shift pagi dan malam tanpa mengulang namanya.

Kamu bisa menggunakan colspan dan rowspan sekaligus dalam tabel yang sama untuk membuat tata letak yang kompleks. Ingat untuk menyesuaikan jumlah sel di setiap baris agar sesuai dengan sel yang membentang.

Tantangan

Mudah

Buat dokumen HTML yang menyertakan tabel dengan sel yang membentang beberapa baris dan kolom. Tabel harus memiliki struktur berikut:

Satu baris tabel (<tr>) dengan sel header (<th>) yang membentang tiga kolom dan berisi teks "Student Report".
Baris tabel lain (<tr>) dengan sel header (<th>) yang bertuliskan "Name", sel header (<th>) yang bertuliskan "Subject", dan sel header (<th>) yang bertuliskan "Grade".
Baris tabel lain (<tr>) dengan sel data (<td>) yang bertuliskan "John Doe", sel data (<td>) yang bertuliskan "Math", dan sel data (<td>) yang bertuliskan "A".
Baris tabel lain (<tr>) dengan sel data (<td>) yang membentang dua baris dan berisi teks "Jane Smith", sel data (<td>) yang bertuliskan "Science", dan sel data (<td>) yang bertuliskan "B".
Baris tabel terakhir (<tr>) dengan sel data (<td>) yang bertuliskan "History" dan sel data (<td>) yang bertuliskan "A".

Coba sendiri

<!DOCTYPE html>
<html>
    <body>
        <table border="1">
            <!-- Tulis kodemu di sini -->
        </table>
    </body>
</html>

Uji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Dasar-Dasar

1Dasar-Dasar HTML

Apa itu HTML?Struktur Dasar HTML Tag dan Elemen Tag Bersarang dan Tag Penutup Komentar dalam HTML

4Kartu Resep

Gambaran Umum Proyek Judul dan Deskripsi Resep

Bahan-bahan

Langkah-langkah

7Halaman Profil Pribadi

Gambaran Umum Proyek Bagian Header

Foto Profil

Bagian Tentang Saya

Tautan Media Sosial

10Tabel

Dasar-Dasar Tabel Menambahkan Judul TabelMembentangkan Baris dan KolomRangkuman: Tabel

2Teks dan Pemformatan

Judul Paragraf Pindah Baris Teks Tebal dan Miring Teks Tebal dan Miring Lagi Rangkuman: Pemformatan

5Menambahkan Konten

Atribut HTML Tautan Tautan ke Halaman Baru Gambar Atribut Gambar

8Formulir dan Input Bagian 1

Dasar Formulir Input Teks Atribut Input Kolom Kata Sandi Label untuk Input Ulasan, Formulir Dasar

11Halaman Pendaftaran Acara

Gambaran Umum Proyek Bagian Header

Bagian Detail Acara

Formulir Pendaftaran

Bagian Footer

3Bekerja dengan list

list Tak Berurutan list Berurutan list Bersarang Ringkasan: list

6Tata Letak Halaman

Elemen div Elemen span Sebaris Tag Semantik Bagian dan Artikel Rangkuman Tata Letak

9Formulir dan Input Bagian 2

Tombol Radio Kotak Centang Menu Dropdown Tombol Tombol dalam Formulir Rangkuman, Formulir #1 Rangkuman, Formulir #2

12Tantangan Akhir

Kartu Profil Sederhana Kartu Undangan Acara Halaman Artikel Sederhana Daftar Buku Favorit

Latihan sendiri: Playground Web