Belajar Coding Interaktif HTML

Belajar HTML dasar, dengan mode pembelajaran interaktif di CodePolitan

*Headings* adalah elemen HTML yang digunakan untuk menampilkan judul dari sebuah konten. Elemen headings ada 6 jenis, yakni `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>` dan `<h6>`. 

Elemen `<h1>` menunjukkan tingkat kepentingan yang lebih tinggi daripada `<h2>` dan seterusnya. Elemen `<h1>` umumnya akan ditampilkan dengan ukuran huruf yang lebih besar dibanding `<h2>`, dan begitu seterusnya sampai `<h6>`.

Bila kita hendak membuat judul sebuah konten, maka gunakanlah `<h1>` sebagai prioritas utama. Bila hendak membuat subjudul di dalam konten, maka gunakan `<h2>`, dan bila hendak membuat sub-subjudul, maka gunakan `<h3>`, dan seterusnya.

Headings

Elemen `<p>` mendefinisikan sebuah konten paragraf.
```
<p>Ini adalah sebuah paragraf.</p>
<p>Dan ini adalah paragraf lain.</p>
```

Suatu konten teks yang kita tulis di dalam sebuah elemen HTML dan kita buat baris baru atau spasi/tab di dalamnya, akan tetap dihitung sebagai satu spasi.
```
<p>Ini      adalah sebuah 
paragraf.</p>
```
Kode HTML di atas akan tetap ditampilkan dalam satu baris tanpa ada jarak spasi lebih dari satu di dalamnya. Bila kita hendak membuat baris baru di dalam sebuah teks, maka gunakanlah tag `<br>` atau `<br />`.
```
<p>Ini<br>
adalah<br>
sebuah<br>
paragraf.</p>
```


Paragraph

Kita dapat menandai bagian-bagian tertentu dari sebuah teks HTML seperti cetak tebal, cetak miring dan lain-lain.

- `<b>` - mencetak tebal teks
- `<strong>` - menandai teks penting
- `<i>` - mencetak miring teks
- `<em>` - memberikan penekanan pada teks
- `<mark>` - menandai teks dengan sorotan
- `<small>` - membuat teks lebih kecil dari ukuran bawaan
- `<del>` - memberi coretan pada teks
- `<ins>` - mengarisbawahi teks
- `<sub>` - membuat tulisan lebih bawah dari garis datar tulisan
- `<sup>` - membuat tulisan lebih atas dari garis datar tulisan

Text Formatting

HTML link adalah elemen yang digunakan untuk membuat kaitan ke halaman lain. Ketika elemen link diklik maka halaman browser akan berpindah menampilkan halaman lain yang dituju link tersebut.
```
<a href="url">teks link</a>
```
Tag `<a>` menggunakan atribut `href` untuk menentukan alamat tujuan link. `teks link` adalah teks yang akan kita jadikan link. Ketika teks link diklik, maka halaman akan berpindah ke alamat tujuan link.

Kita tidak hanya dapat menggunakan teks sebagai link, tapi juga gambar atau elemen lainnya.
```
<a href="url"><img src="gambar.jpg" /></a>
```

### Atribut Target

Atribut `target` kita gunakan untuk menentukan dimana alamat link harus dibuka.
- `_self` - Membuka alamat link di tab/jendela browser yang sama (nilai bawaan)
- `_blank` - Membuka alamat link di tab/jendela browser yang baru
- `_parent` - Membuka alamat link di frame induk
- `_top` - Membuka alamat link di jendela penuh
- `framename` - Membuka alamat link di frame yang namanya sudah ditentukan

Umumnya kita akan sering menggunakan nilai `_blank` untuk menampilkan halaman di tab browser baru. Bila atribut ini tidak dipasang, maka nilai defaultnya adalah `_self`, artinya alamat link tersebut akan dibuka di jendela yang sedang aktif.


Links

Kita dapat menampilkan gambar pada HTML dengan elemen `<img>`. Elemen ini tidak memiliki konten, hanya menggunakan atribut saja dan tidak memilik tag penutup.
```
<img src="gambar.jpg" />
```
Atribut `src` digunakan untuk menentukan alamat gambar yang hendak ditampilkan.

Kita juga dapat mengatur ukuran gambar menggunakan atribut *width* untuk panjang gambar dan *height* untuk tinggi gambar.
```
<img src="gambar.jpg" width="100px" height="100px" />
```

Images

Sebagai (calon) programmer tentu Kamu akan sering bersentuhan dengan kode program. Saat Kamu membuat tulisan tentang kode programmu, Kamu akan perlu menampilkan kode agar tampilannya lebih mudah dibaca. Daripada seperti ini:

var x = 5;<br>
var y = 6;<br>
alert(x + y);<br>

Tentu akan lebih mudah dan nyaman dibaca bila ditulis seperti ini:
```
var x = 5;
var y = 6;
alert(x + y);
```

Untuk menuliskan kode di dalam HTML, kita dapat menggunakan elemen `<code>` atau `<pre>` atau kombinasi keduanya. Karena elemen `<code>` bersifat *inline*, maka kita dapat menggunakan tag `<pre>` baru kemudian menuliskan tag `<code>` dan kodemu di dalamnya.

Code

Adakalanya kita harus memberikan penjelasan di dalam dokumen HTML tentang bagian-bagian tertentu di dalamnya, agar memudahkan kita atau orang lain untuk memahami isi dari dokumen HTML tersebut. Terlebih lagi bila HTML yang kita tulis sudah ratusan atau bahkan ribuan baris.

HTML menyediakan format untuk menulis komentar pada dokumen HTML tanpa menampilkannya di browser.
```

```
Komentar dibuka dengan tag ``. Komentar dapat ditulis lebih dari satu baris hingga komentar tersebut ditutup. Semua teks yang ada di dalam tag komentar akan dianggap sebagai komentar.
```

```

Comment

Setiap elemen HTML memiliki mode tampilan (display) bawaannya masing-masing, yang umumnya antara dua nilai, yaitu `block` dan `inline`.

### Block

Elemen dengan mode display `block` akan tampil dengan ukuran width penuh, mengisi ruang kiri dan kanan semaksimal mungkin. Contohnya adalah elemen `<h1>`-`<h6>`. Ketika kita menuliskan elemen ini di dalam satu baris pun, browser akan menampilkan elemen ini di masing-masing baris.
```
<h1>Halo Coders</h1> <h2>Apa kabar?</h2>
```
Elemen `<h1>` dan `<h2>` pada kode di atas akan tetap ditampilkan di baris tersendiri.
<div class="well well-sm">
<h1>Halo Coders</h1> <h2>Apa kabar?</h2>
</div>

Beberapa contoh elemen lain yang mode displaynya `block` diantaranya adalah `<p>`, `<form>`, `<div>`, `<pre>` dan lain-lain.

### Inline

Tidak seperti `block`, elemen dengan mode display `inline` akan ditampilkan dalam satu baris sesuai ukuran *width*nya. Mode inline tidak akan menghabiskan ruang ke kiri dan kanan. Contoh elemen dengan mode `inline` adalah elemen-elemen formatting seperti `<strong>` dan `<em>`.
```
Ini contoh teks berisi elemen <strong>inline</strong>. Elemen inline akan sesuai ukuran <em>width</em> aslinya.
```
Teks pada contoh kode di atas akan tampil dalam satu baris, termasuk elemen-elemen di dalamnya.
<div class="well well-sm">
Ini contoh teks berisi elemen <strong>inline</strong>. Elemen inline akan sesuai ukuran <em>width</em> aslinya.
</div>

Beberapa contoh elemen lain yang juga memiliki mode display `inline` diantaranya adalah `<a>`, `<span>`, `<img>` dan lain-lain.

Block dan Inline

Ada 2 jenis list/daftar pada HTML, yaitu ordered list dan unordered list. Ordered list adalah list yang menggunakan urutan karakter seperti angka atau huruf, sedangkan unordered list adalah list yang menggunakan simbol yang sama untuk setiap poin listnya.

Letak perbedaannya hanya pada tag pembuka dan penutupnya saja, dimana ordered list menggunakan tag `<ol>` dan unordered list menggunakan tag `<ul>`.
```
<ol>
  <li>daftar satu</li>
  <li>daftar dua</li>
  <li>daftar tiga</li>
</ol>
```
Kode di atas adalah contoh ordered list, menggunakan tag `<ol>`. Setiap poin daftar ditulis di dalam elemen `<li>`. Kode di atas akan ditampilkan seperti ini:
<ol><li>daftar satu</li><li>daftar dua</li><li>daftar tiga</li></ol>

```
<ul>
  <li>daftar satu</li>
  <li>daftar dua</li>
  <li>daftar tiga</li>
</ul>
```
Kode di atas adalah contoh unordered list, menggunakan tag `<ul>`. Sama seperti ordered list, poin daftar ditulis di dalam elemen `<li>`. Kode di atas akan ditampilkan seperti ini:
<ul style="list-style-type: initial;"><li>daftar satu</li><li>daftar dua</li><li>daftar tiga</li></ul>

list html, ordered list dan unordered list

List

Pada beberapa kasus kita perlu membuat daftar subpoin di dalam poin list. Untuk itu kita dapat membuat list di dalam list.
```
<ol>
    <li>
        daftar satu
        <ul>
            <li>subdaftar pertama</li>
            <li>subdaftar kedua</li>
            <li>subdaftar ketiga</li>
        </ul>
    </li>
    <li>daftar dua</li>
    <li>daftar tiga</li>
</ol>
```
Contoh kode di atas akan tampil seperti ini:
<ol><li>daftar satu<ul><li>subdaftar pertama</li><li>subdaftar kedua</li><li>subdaftar ketiga</li></ul></li><li>daftar dua</li><li>daftar tiga</li></ol>

Perhatikan bahwa untuk membuat list di dalam list, kita meletakkan sub list di dalam tag `<li>` dari salahsatu poin list induknya.

Nested List

### Tipe Ordered List

Pada ordered list kita dapat menggunakan tidak hanya list angka saja (1,2,3,dst) tapi juga huruf (a,b,c,dst) dan angka romawi (I,II,III,dst). Untuk mengubah tipe ordered list, kita gunakan atribut di dalam tag `<ol>`.
```
<ol type="A">
   <li>List Pertama</li>
   <li>List Kedua</li>
   <li>List Ketiga</li>
</ol>
```
Contoh kode di atas akan menampilkan list seperti ini:
<ol type="A"><li>List Pertama</li><li>List Kedua</li><li>List Ketiga</li></ol>

Adapun tipe-tipe yang dapat digunakan diantaranya:
<table class="table table-stripped table-condensed">
<tbody><tr>
<th>Tipe</th>
<th>Deskripsi</th>
</tr>
<tr>
<td>type="1"</td>
<td>Item list menggunakan angka (default)</td>
</tr>
<tr>
<td>type="A"</td>
<td>Item list menggunakan huruf kapital</td>
</tr>
<tr>
<td>type="a"</td>
<td>Item list menggunakan huruf kecil</td>
</tr>
<tr>
<td>type="I"</td>
<td>Item list menggunakan angka romawi kapital</td>
</tr>
<tr>
<td>type="i"</td>
<td>Item list menggunakan angka romawi kecil</td>
</tr>
</tbody></table>

### Tipe Unordered List

Bawaan dari unordered list menggunakan lingkaran hitam untuk setiap item listnya. Kita dapat mengganti simbol item tersebut menggunakan style property `list-style-type`.
```
<ul style="list-style-type:circle">
   <li>List Pertama</li>
   <li>List Kedua</li>
   <li>List Ketiga</li>
</ul>
```
Contoh kode di atas akan menampilkan list seperti ini:
<ul style="list-style-type:circle"><li>List Pertama</li><li>List Kedua</li><li>List Ketiga</li></ul>

Adapun tipe list style yang dapat kita gunakan diantaranya:
<table class="table table-condensed table-stripped">
<tbody><tr>
<th>Nilai</th>
<th>Deskripsi</th>
</tr>
<tr>
<td>disc</td>
<td>Item list menggunakan simbol lingkaran (default)</td>
</tr>
<tr>
<td>circle</td>
<td>Item list menggunakan simbol garis luar lingkaran</td>
</tr>
<tr>
<td>square</td>
<td>Item list menggunakan simbol kotak</td>
</tr>
<tr>
<td>none</td>
<td>Item list tidak menggunakan simbol list</td>
</tr>
</tbody></table>

Mengganti Karakter List

Setiap website yang ada di dunia ini dibangun menggunakan bahasa yang dinamakan HTML. HTML menjadi sebuah kerangka membentuk struktur sebuah halaman website. 

HTML adalah singkatan dari ***Hyper Text Markup Language***. HTML mendeskripsikan struktur halaman sebuah website. Sebuah halaman HTML dibangun oleh blok-blok konten yang disebut elemen HTML.

Dokumen HTML ditampilkan oleh aplikasi yang dinamakan *browser*. Browser tidak akan menampilkan kode HTML, tetapi menggunakan kode HTML untuk menentukan bagaimana konten dokumen tersebut seharusnya ditampilkan.

Sejak pertama kali web ditemukan, sudah muncul dan berkembang versi dari HTML, yakni bermula dari versi 1 di tahun 1991. Kemudian HTML 2.0 lahir pada tahun 1995 dan HTML 3.2 pada tahun 1997. HTML 4.01 muncul pada tahun 1999 dan disempurnakan dengan XHTML pada tahun 2000. Versi terakhir HTML adalah HTML5 yang diperkenalkan pada tahun 2014 dan digunakan hingga saat ini.

Apa itu HTML?

Struktur minimum dari sebuah dokumen HTML dapat diamati pada kolom editor di samping.

- Deklarasi `<!DOCTYPE html>` mendefinisikan dokumen sebagai sebuah halaman HTML5
- Elemen `<html>` adalah induk elemen dari sebuah halaman HTML
- Elemen `<head>` berisi informasi seputar dokumen
- Elemen `<title>` menetapkan judul dari dokumen HTML
- Elemen `<body>` adalah induk dari konten halaman yang akan ditampilkan
- Elemen `<h1>` dan `<p>` adalah contoh konten yang tampil pada layar

Bila kita memanggil dokumen HTML tersebut di browser, maka konten dari elemen `<title>` akan tampil di bagian headbar/tab browser dan semua konten yang ada di dalam body akan ditampilkan di dalam jendela browser.

Struktur HTML

Sebuah elemen HTML umumnya tersusun dari tag pembuka dan tag penutup, dengan konten yang disimpan diantara keduanya.
```
<namatag>Konten di dalam tag</namatag>
```

Tag HTML adalah nama dari elemen HTML, ditulis di antara tanda kurung sudut `<` dan `>`, misalnya `<h1>` dan `<p>`.

Tag penutup ditulis seperti tag pembuka, dengan diawali karakter garis miring `/` sebelum nama tagnya, misalnya `</h1>` dan `</p>`.

Konten elemen adalah semua konten yang ada di antara tag pembuka dan tag penutup.

Tag mendefinisikan maksud konten yang ada di dalamnya. Ketika kita menuliskan sebuah konten menggunakan tag `<h1>`, misalnya `<h1>Halo Coder!</h1>` berarti kita mendefinisikan konten "Halo Coders!" sebagai sebuah *heading* besar. Ketika kita menulis konten di dalam tag `<p>` maka berarti kita mendefinisikan konten tersebut sebagai sebuah paragraf.

Tag sendiri tidak akan ditampilkan di browser. Tag hanya menjadi pengenal untuk browser dalam menentukan seperti apa sebuah konten ditampilkan. Misalnya, ketika kita menulis `<strong>Kereeen!</strong>`, maka konten di dalam tag tersebut akan ditampilkan sebagai tulisan yang dicetak tebal, seperti ini:
<div class="well well-sm">
<strong>Kereen!</strong>
</div>

Meski demikian tidak semua elemen html ditulis dengan tag pembuka dan penutup. Ada juga elemen yang ditulis tanpa penutup, misalnya:
```
<br />
<img src="image.jpg" />
```
Elemen `<br>` dan `<img>` di atas tidak memiliki tag penutup, melainkan menutup dirinya sendiri dengan diakhiri karakter `/>`.

Elemen HTML

Atribut HTML adalah informasi tambahan yang diperlukan oleh sebuah elemen HTML.

Pada pembahasan sebelumnya kita sudah melihat contoh elemen `<img>`. Elemen ini memiliki konten tambahan di dalam tagnya, yakni `src`.
```
<img src="image.jpg" />
```
`src` yang terdapat di dalam tag `<img>` adalah salahsatu contoh atribut HTML.

Atribut HTML selalu didefinisikan di dalam tag pembuka suatu elemen. Atribut biasanya ditulis dalam bentuk pasangan nama dan nilai atribut dengan format seperti ini: `nama="nilai"`.

Semua elemen HTML dapat mengandung atribut, baik itu atribut yang umum yang dapat dimiliki oleh semua elemen HTML, maupun atribut khusus untuk elemen HTML tertentu. Contoh atribut umum adalah `id` dan `class`. Contoh atribut khusus adalah `src` pada elemen `<img>` dan `href` pada elemen `<a>`.

### Nama Atribut

Nama atribut dapat ditulis baik menggunakan huruf kapital maupun huruf kecil, akan tetapi sangat dianjurkan menggunakan huruf kecil semua sebagai sebuah standar sejak versi XHTML.

### Nilai Atribut

Nilai dari atribut HTML dapat ditulis tanpa menggunakan tanda kutip. Namun dalam banyak kasus tanda kutip harus digunakan untuk membungkus nilai atribut yang mengandung spasi.
```
<h1 title=judul konten>Pendahuluan</h1>
```
Pada contoh di atas, atribut title bernilai 'judul' dan kata 'konten' akan dianggap sebagai sebuah atribut lain karena antara kata 'judul' dan 'konten' terpisah oleh koma. Bila kita hendak mengisi nilai atribut title di atas dengan 'judul konten', maka kita harus menulisnya dengan tanda kutip:
```
<h1 title="judul konten">Pendahuluan</h1>
```

### Tanda Kutip atau Petik?

Nilai atribut dapat menggunakan baik tanda kutip `"` maupun tanda petik `'`. Bila kita membuka dengan tanda kutip, maka tutup juga dengan tanda kutip. Begitu pula bila membuka dengan tanda petik, maka tutuplah dengan tanda petik.

Hal ini sangat berguna bila nilai atribut mengandung tanda kutip atau petik. Bila nilai atribut mengandung tanda kutip, maka gunakanlah petik untuk membungkus nilai atribut. Dan bila nilai atribut mengandung tanda petik, maka gunakanlah kutip untuk membungkus nilai atribut.
```
<h1 title='Bosnya "Microsoft"'>Bill Gates</h1>
```

Atribut HTML

Tabel adalah salah satu objek yang umum digunakan dalam sebuah dokumen, termasuk HTML. Untuk membuat sebuah tabel, paling tidak ada 3 tag yang bakal kita gunakan, yaitu `<table>`, `<tr>` dan `<td>`. Struktur penulisan tabel HTML seperti berikut:
```
<table border="1">
  <tr>
    <td>Baris 1 Kolom 1</td>
    <td>Baris 1 Kolom 2</td>
  </tr>
  <tr>
    <td>Baris 2 Kolom 1</td>
    <td>Baris 2 Kolom 2</td>
  </tr>
</table>
```
Kode di atas akan menghasilkan tabel seperti ini:
<table border="1">
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>

Tag `<table>` adalah tag untuk membuat tabel. Kita menggunakan atribut `border="1"` agar tabel memiliki garis. Tag `<tr>` digunakan untuk membuat baris tabel. Tag `<td>` digunakan untuk membuat kolom di dalam baris. Konten disimpan di dalam tag `<td>` ini.

Struktur Table

Seringkali kita perlu menampilkan header untuk setiap kolom pada tabel. HTML menyediakan tag `<th>` untuk memuat konten header kolom.
```
<table border="1">
	<tr>
		<th>Kolom 1</th>
		<th>Kolom 2</th>
	</tr>
	<tr>
		<td>Baris 1 Kolom 1</td>
		<td>Baris 1 Kolom 2</td>
	</tr>
	<tr>
		<td>Baris 2 Kolom 1</td>
		<td>Baris 2 Kolom 2</td>
	</tr>
</table>
```
Tabel di atas akan tampil seperti ini:
<div class="well well-sm">
<table border="1">
<tr>
<th>Kolom 1</th>
<th>Kolom 2</th>
</tr>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
</div>


Table Header

Kita dapat merentangkan sebuah sel pada tabel ke samping, sehingga ukurannya setara dengan beberapa kolom.
```
<table border="1">
<tr>
	<th>No.</th>
	<th>Nama</th>
</tr>
<tr>
	<td>1</td>
	<td>Toni</td>
	<td>Haryanto</td>
</tr>
<tr>
	<td>2</td>
	<td>Kresna</td>
	<td>Galuh</td>
</tr>
</table>
```
Pada kode di atas jumlah kolom di tiap barisnya ada 3, kecuali baris header tabel. Hal ini akan membuat tampilannya seperti ini:
<table border="1">
<tr>
<th>No.</th>
<th>Nama</th>
</tr>
<tr>
<td>1</td>
<td>Toni</td>
<td>Haryanto</td>
</tr>
<tr>
<td>2</td>
<td>Kresna</td>
<td>Galuh</td>
</tr>
</table>

Kolom ketiga tidak memiliki header, padahal kita ingin header **Nama** digunakan sebagai header untuk kolom kedua dan ketiga di bawahnya. Untuk itu kita dapat menambahkan atribut `colspan` pada elemen headernya.
```
<th colspan="2">Nama</th>
```
Kita merentangkan sel header ini ke samping sebesar 2 sel kolom. sehingga tampilannya akan menjadi seperti ini:
<table border="1">
<tr>
<th>No.</th>
<th colspan="2">Nama</th>
</tr>
<tr>
<td>1</td>
<td>Toni</td>
<td>Haryanto</td>
</tr>
<tr>
<td>2</td>
<td>Kresna</td>
<td>Galuh</td>
</tr>
</table>

Colspan

Kita juga dapat merentangkan sebuah sel pada tabel ke bawah, sehingga tingginya setara dengan beberapa baris.
```
<table border="1">
	<tr>
		<th>Language</th>
		<th>Framework</th>
	</tr>
	<tr>
		<td>PHP</td>
		<td>Laravel</td>
	</tr>
	<tr>
		<td>PHP</td>
		<td>CodeIgniter</td>
	</tr>
        <tr>
		<td>Ruby</td>
		<td>Ruby on Rails</td>
	</tr>
	<tr>
		<td>Ruby</td>
		<td>Sinatra</td>
	</tr>
</table>
```
Kode table di atas akan ditampilkan seperti ini:
<table border="1">
<tr>
<th>Language</th>
<th>Framework</th>
</tr>
<tr>
<td>PHP</td>
<td>Laravel</td>
</tr>
<tr>
<td>PHP</td>
<td>CodeIgniter</td>
</tr>
<tr>
<td>Ruby</td>
<td>Ruby on Rails</td>
</tr>
<tr>
<td>Ruby</td>
<td>Sinatra</td>
</tr>
</table>

Kita dapat menggabungkan beberapa sel yang memiliki nilai yang sama seperti sel **PHP** dan **Ruby** di atas, dengan cara menambahkan atribut `rowspan` pada sel yang ingin direntangkan ke bawah:
```
<table border="1">
	<tr>
		<th>Language</th>
		<th>Framework</th>
	</tr>
	<tr>
		<td rowspan="2">PHP</td>
		<td>Laravel</td>
	</tr>
	<tr>
		<td>CodeIgniter</td>
	</tr>
        <tr>
		<td rowspan="2">Ruby</td>
		<td>Ruby on Rails</td>
	</tr>
	<tr>
		<td>Sinatra</td>
	</tr>
</table>
```
Kode di atas akan tampil seperti ini:
<table border="1">
<tr>
<th>Language</th>
<th>Framework</th>
</tr>
<tr>
<td rowspan="2">PHP</td>
<td>Laravel</td>
</tr>
<tr>
<td>CodeIgniter</td>
</tr>
<tr>
<td rowspan="2">Ruby</td>
<td>Ruby on Rails</td>
</tr>
<tr>
<td>Sinatra</td>
</tr>
</table>

Perhatikan baris tabel ke-3 dan ke-5, kita tidak perlu lagi mendefinisikan kolom pertama, karena area kolom sudah digunakan oleh kolom di baris di atasnya.

html table rowspan, bagaimana cara menggunakan rowspan pada table html

Rowspan

Saat kita membuat table dengan menambahkan atribut `border`, kita akan mendapatkan table dengan border dan spasi antar garis bordernya seperti ini:
<table border="1" style="border-collapse:separate;border-spacing:2px"><tr><th colspan="2">Tanggal</th><th>Hari Besar</th></tr><tr><td>Juni</td><td>1</td><td>Hari Pancasila</td></tr><tr><td>Juni</td><td>8</td><td>Hari Laut Sedunia</td></tr><tr><td>Juli</td><td>12</td><td>Hari Koperasi</td></tr><tr><td>Juli</td><td>23</td><td>Hari Anak Nasional</td></tr></table>

Kita akan ingin mengubah tampilan border bawaan table ini dengan garis yang lebih tegas. Untuk itu kita harus mereset style bawaan table ini dengan style berikut:
```
table {
    border-spacing: 0;
    border-collapse: collapse;
}
```

<table border="1"><tr><th colspan="2">Tanggal</th><th>Hari Besar</th></tr><tr><td>Juni</td><td>1</td><td>Hari Pancasila</td></tr><tr><td>Juni</td><td>8</td><td>Hari Laut Sedunia</td></tr><tr><td>Juli</td><td>12</td><td>Hari Koperasi</td></tr><tr><td>Juli</td><td>23</td><td>Hari Anak Nasional</td></tr></table><br>

Setelah ini kita dapat mengatur spasi pada `<td>` dan `<th>` menggunakan property `padding`.

Belajar Coding Interaktif HTML

Silabus

Tentang Kelas

Yang akan kamu dapat

Belajar Coding Interaktif HTML

Silabus

Pengenalan Dasar

Elemen HTML Umum

Style

Table

List

Tentang Kelas

Yang akan kamu dapat