Kursus IT Dasar HTML 012_Daftar dan tabel

Daftar

Daftar HTML adalah elemen penting untuk mengorganisir dan menyajikan informasi di halaman web. Dengan menggunakan berbagai jenis daftar, konten dapat lebih terstruktur dan ditampilkan dengan lebih baik.

HTML memiliki tiga jenis daftar:

1. Daftar tidak berurut (Unordered list): Dibuat menggunakan elemen <ul>, setiap item daftar diwakili dengan elemen <li>.
2. Daftar berurut (Ordered list): Dibuat menggunakan elemen <ol>, item daftar juga diwakili dengan elemen <li>, perbedaannya adalah mereka akan secara otomatis diberi nomor.
3. Daftar definisi (Definition list): Dibuat menggunakan elemen <dl>, berisi elemen <dt> (judul definisi) dan <dd> (deskripsi definisi).

Daftar tidak berurut

Daftar tidak berurut adalah jenis daftar yang paling umum. Ini menambahkan lingkaran kecil (juga disebut penanda daftar) di depan setiap item daftar. Ini menggunakan <ul> sebagai wadah untuk daftar dan <li> untuk menggambarkan item daftar spesifik.

Contoh:

1
<ul>
2
  <li>Item 1</li>
3
  <li>Item 2</li>
4
  <li>Item 3</li>
5
</ul>

Hasil:

Daftar berurut

Berbeda dengan daftar tidak berurut, setiap item dalam daftar berurut akan ditandai dengan angka. Daftar berurut menggunakan <ol> sebagai wadah untuk daftar dan juga menggunakan <li> untuk menggambarkan item daftar spesifik.

Contoh:

1
<ol>
2
  <li>Item pertama</li>
3
  <li>Item kedua</li>
4
  <li>Item ketiga</li>
5
</ol>

Hasil:

Daftar definisi

Daftar definisi terdiri dari elemen <dl> (daftar definisi), <dt> (istilah definisi), dan <dd> (deskripsi definisi). Daftar definisi biasanya digunakan untuk menampilkan sekelompok istilah dan definisinya.

Contoh:

1
<dl>
2
  <dt>Istilah 1</dt>
3
  <dd>Deskripsi 1</dd>
4
  <dt>Istilah 2</dt>
5
  <dd>Deskripsi 2</dd>
6
</dl>

Hasil:

[!Ringkasan]

• Item daftar dapat berisi paragraf, pemisah baris, gambar, tautan, serta daftar lainnya, dll.

Tabel

Tabel HTML adalah elemen yang kuat untuk menampilkan data terstruktur. Tabel HTML dasar diwakili oleh elemen <table>, yang berisi beberapa sub-elemen kunci seperti <tr> (baris tabel), <th> (sel header), dan <td> (sel data tabel).

Contoh:

1
<table>
2
  <tr>
3
    <th>Nama</th>
4
    <th>Usia</th>
5
    <th>Jenis Kelamin</th>
6
  </tr>
7
  <tr>
8
    <td>Budi Santoso</td>
9
    <td>20</td>
10
    <td>laki-laki</td>
11
  </tr>
12
  <tr>
13
    <td>Siti Nurhaliza</td>
14
    <td>21</td>
15
    <td>perempuan</td>
16
  </tr>
17
</table>

Hasil:

Elemen tabel:

• <table>: Mewakili seluruh tabel.
• <thead>: Mendefinisikan bagian header tabel, yang berisi elemen <th> untuk mewakili judul kolom.
• <tr>: Baris tabel, berisi sel header <th>.
• <th>: Sel header, digunakan untuk mengidentifikasi judul kolom.
• <tbody>: Mendefinisikan bagian isi tabel, di mana setiap baris berisi elemen <td> untuk mewakili data aktual.
• <td>: Sel data tabel, berisi data aktual.
• <tfoot>: Mendefinisikan bagian footer tabel, umumnya digunakan untuk menempatkan ringkasan, total, atau informasi footer tabel lainnya.
• <caption>: Digunakan untuk menambahkan judul ke tabel HTML, judul biasanya ditampilkan di bagian atas tabel.
• <colgroup>: Mendefinisikan grup kolom tabel
• <col>: Mendefinisikan atribut untuk kolom tabel.

Contoh:

1
<table border="1">
2
  <caption>Ini adalah judul tabel</caption>
3
  <colgroup>
4
    <col style="width: 50px; background-color: #f2f2f2;">
5
    <col style="width: 100px; background-color: #ddd;">
6
    <col style="width: 150px; background-color: #f2f2f2;">
7
  </colgroup>
8
  <thead>
9
    <tr>
10
      <th>Nama</th>
11
      <th>Usia</th>
12
      <th>Kota</th>
13
    </tr>
14
  </thead>
15
  <tbody>
16
    <tr>
17
      <td>Budi Santoso</td>
18
      <td>25</td>
19
      <td>Jakarta</td>
20
    </tr>
21
    <tr>
22
      <td>Siti Nurhaliza</td>
23
      <td>30</td>
24
      <td>Surabaya</td>
25
    </tr>
26
  </tbody>
27
  <tfoot>
28
    <tr>
29
      <td colspan="3">Total orang: 2</td>
30
    </tr>
31
  </tfoot>
32
</table>

Hasil:

Atribut tabel:

• border: Digunakan untuk menentukan batas tabel. Nilainya adalah angka yang menunjukkan lebar batas.
• cellpadding: Digunakan untuk menentukan jarak antara sel. Nilainya adalah angka yang menunjukkan ukuran jarak.
• cellspacing: Digunakan untuk menentukan jarak antara batas sel. Nilainya adalah angka yang menunjukkan ukuran jarak.
• width: Digunakan untuk menentukan lebar tabel. Nilainya adalah angka yang menunjukkan lebar.
• height: Digunakan untuk menentukan tinggi tabel. Nilainya adalah angka yang menunjukkan tinggi.
• style: Digunakan untuk menentukan gaya tabel.

Contoh:

1
<table style="border-collapse: collapse; width: 60%; margin: 20px auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
2
  <caption style="font-size: 1.5em; font-weight: bold; padding: 10px; background-color: #3498db; color: #fff;">Ini adalah tabel yang indah</caption>
3
  <colgroup>
4
    <col style="width: 30%;">
5
    <col style="width: 30%;">
6
    <col style="width: 40%;">
7
  </colgroup>
8
  <thead>
9
    <tr>
10
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">Nama</th>
11
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">Usia</th>
12
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">Kota</th>
13
    </tr>
14
  </thead>
15
  <tbody>
16
    <tr>
17
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Budi Santoso</td>
18
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">25</td>
19
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Jakarta</td>
20
    </tr>
21
    <tr>
22
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Siti Nurhaliza</td>
23
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">30</td>
24
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Surabaya</td>
25
    </tr>
26
  </tbody>
27
  <tfoot>
28
    <tr>
29
      <td colspan="3" style="border: 1px solid #ddd; padding: 8px; text-align: center; background-color: #3498db; color: #fff;">Total orang: 2</td>
30
    </tr>
31
  </tfoot>
32
</table>

Hasil:

Penggabungan tabel

Penggabungan tabel mengacu pada menggabungkan dua atau lebih sel menjadi satu sel. Penggabungan tabel dapat digunakan untuk menyederhanakan tata letak tabel atau menyorot data tertentu. Gunakan atribut colspan untuk menentukan jumlah baris yang mencakup sel, atau gunakan atribut rowspan untuk menentukan jumlah kolom yang mencakup sel. Nilai atribut adalah angka yang menunjukkan jumlah baris yang dicakup.

Contoh:

1
<table border="1">
2
  <tr>
3
    <td>Sel 1</td>
4
    <td colspan="2">Penggabungan horizontal dua kolom</td>
5
    <td>Sel 4</td>
6
  </tr>
7
  <tr>
8
    <td rowspan="2">Penggabungan vertikal dua baris</td>
9
    <td>Sel 3</td>
10
    <td>Sel 4</td>
11
    <td>Sel 5</td>
12
  </tr>
13
  <tr>
14
    <td>Sel 7</td>
15
    <td>Sel 8</td>
16
    <td>Sel 9</td>
17
  </tr>
18
</table>

Hasil:

[!Ringkasan]

• Secara default, tabel tidak menampilkan batas.
• <tr> adalah singkatan dari table row, mewakili baris tabel.
• <td>: td adalah singkatan dari table data, mewakili sel data tabel.
• <th>: th adalah singkatan dari table header, mewakili sel header tabel.
• Sebagian besar browser menampilkan header sebagai teks tebal yang rata tengah.
• Tabel dapat berisi teks, gambar, daftar, paragraf, formulir, garis horizontal, tabel, dll.