Membentangkan Baris dan Kolom

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

Dalam HTML, kamu bisa membuat sel tabel mencakup beberapa baris atau kolom menggunakan atribut rowspan dan colspan. Atribut ini memungkinkan kamu membuat tata letak tabel yang lebih kompleks dengan menggabungkan sel.

Atribut colspan digunakan untuk menentukan jumlah kolom yang harus dicakup 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" mencakup dua kolom. Ini berguna untuk membuat header yang mencakup beberapa kolom. Tampilannya seperti ini:

Atribut rowspan digunakan untuk menentukan jumlah baris yang harus direntangkan oleh sebuah sel. Atribut ini juga ditambahkan ke tag <td> atau <th> pada 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 sif pagi dan malam tanpa mengulang nama.

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 memuat tabel dengan sel yang membentang di beberapa baris dan kolom. Tabel tersebut harus memiliki struktur berikut:

Satu baris tabel (<tr>) dengan sel header (<th>) yang membentang di tiga kolom dan berisi teks Student Report.
Baris tabel lainnya (<tr>) dengan sel header (<th>) yang bertuliskan Name, sel header (<th>) yang bertuliskan Subject, dan sel header (<th>) yang bertuliskan Grade.
Baris tabel lainnya (<tr>) dengan sel data (<td>) yang bertuliskan John Doe, sel data (<td>) yang bertuliskan Math, dan sel data (<td>) yang bertuliskan A.
Baris tabel lainnya (<tr>) dengan sel data (<td>) yang membentang di 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